/* GERADO por ui/construir.js a partir de ui/fonte/. NAO EDITE A MAO. */

@layer aqua.base, aqua.componente, aqua.utilitario, aqua.consumidor;

/* ==== 00-base.css ==== */
/* 00-base.css - o chao do kit: fonte, reset, tipo, foco, scrollbar, sentinela.
   Cascateavel vai em @layer aqua.base, a camada mais baixa: componente e
   consumidor sobrescrevem sem !important. @font-face fica fora porque nao
   cascateia. */

/* ---- fontes ------------------------------------------------------------- */
/* url() plano de proposito: no flavor browser (aqua-ui.css) o .woff2 mora na
   MESMA pasta; no flavor nui (aqua-ui.nui.css) o construir.js troca este url()
   por data: em base64, porque a NUI carrega o kit de outro origin
   (cfx-nui-aqua-manager) e @font-face entre origins exigiria CORS. Fase 8. */
@font-face {
	font-family: "Instrument Sans";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("data:font/woff2;base64,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") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Geist Mono";
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url("data:font/woff2;base64,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") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@layer aqua.base {
	/* ---- reset ----------------------------------------------------------- */
	*, *::before, *::after { box-sizing: border-box; }

	html {
		font-family: var(--aqua-font-sans);
		font-size: var(--aqua-fs-md);
		line-height: var(--aqua-lh-base);
		color: var(--aqua-text);
		-webkit-font-smoothing: antialiased;
		-webkit-text-size-adjust: 100%;
		text-rendering: optimizeLegibility;
	}

	body { margin: 0; min-height: 100vh; }

	/* NUI: o jogo aparece atras. Sem isto o CEF pinta a pagina de branco. */
	.aqua-nui-veu, .aqua-nui-hud { background: transparent; }

	/* Margem e do layout (gap), nao do elemento. E o que faz a escala de espaco
	   valer alguma coisa: nenhum elemento chega com espaco proprio. */
	h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
	ul, ol { margin: 0; padding: 0; list-style: none; }

	img, svg, video, canvas { display: block; max-width: 100%; }

	button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; margin: 0; }
	button { padding: 0; border: 0; background: none; cursor: pointer; text-align: inherit; }
	button:disabled, [aria-disabled="true"] { cursor: not-allowed; }

	/* ---- tipo ------------------------------------------------------------ */
	/* Tres pesos, e so: 400 corpo, 500 rotulo e botao, 600 titulo. Nunca 700. */
	h1, h2, h3, h4, h5, h6 { font-weight: 600; line-height: var(--aqua-lh-tight); letter-spacing: -0.01em; }
	h1 { font-size: var(--aqua-fs-2xl); }
	h2 { font-size: var(--aqua-fs-xl); }
	h3 { font-size: var(--aqua-fs-lg); }
	h4, h5, h6 { font-size: var(--aqua-fs-md); }
	small { font-size: var(--aqua-fs-sm); }
	strong, b { font-weight: 600; }

	a { color: var(--aqua-accent); text-decoration: none; }
	a:hover { text-decoration: underline; text-underline-offset: 0.15em; }

	code, kbd, pre, samp { font-family: var(--aqua-font-mono); font-variant-numeric: tabular-nums; }
	code { font-size: 0.92em; }

	/* kbd e hr sao base, nao componente: toda NUI precisa dos dois. Raio menor
	   que radius-xs so existe por derivacao do proprio token. */
	kbd {
		display: inline-block;
		padding: 0 var(--aqua-space-1);
		font-size: var(--aqua-fs-xs);
		line-height: 1.6;
		color: var(--aqua-text-muted);
		background: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-rest));
		border: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border-strong));
		border-bottom-width: 2px;
		border-radius: calc(var(--aqua-radius-xs) / 2);
	}

	hr {
		height: 1px;
		margin: var(--aqua-space-4) 0;
		border: 0;
		background: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border));
	}

	/* Placeholder e texto e mede como texto: text-muted, nunca text-faint. */
	::placeholder { color: var(--aqua-text-muted); opacity: 1; }
	::selection { background: rgb(var(--aqua-accent-rgb) / 30%); color: var(--aqua-text); }

	/* ---- foco ---------------------------------------------------------------- */
	/* Ate 2026-09-29 esta era a lei 3 do movimento (anel, nao glow): um outline
	   fino sempre presente, substituido por um traco desenhado (02-movimento.css)
	   quando o aqua-ui.js carregava. Retirada por decisao do dono: nenhum traco
	   visivel ao focar OU ao clicar, em nenhum controle - global, sem excecao de
	   componente. outline: none em :focus-visible cobre o piso e o caso do campo
	   composto (§4); o segundo seletor cobria so a transicao entre os dois e ficou
	   sem uso.

	   O anel desenhado sobrevive em 02-movimento.css, mas so para o aqua-tour
	   (79-tour.css): apontar o alvo de um passo nao e focar. */
	:focus-visible { outline: none; }
	:focus:not(:focus-visible) { outline: 0; }

	/* ---- scrollbar --------------------------------------------------------- */
	/* scrollbar-width e Chrome 121, fora do piso m103. O pseudo-elemento webkit
	   funciona la - o armas ja o usa. */
	::-webkit-scrollbar { width: 8px; height: 8px; }
	::-webkit-scrollbar-track { background: transparent; }
	::-webkit-scrollbar-thumb {
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-hover));
		border: 2px solid transparent;
		border-radius: var(--aqua-radius-full);
		background-clip: padding-box;
	}
	::-webkit-scrollbar-thumb:hover { background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-active)); }

	/* ---- sentinela --------------------------------------------------------- */
	/* Se tokens.css nao carregou, a pagina fica sem cor e ninguem sabe por que.
	   Deteccao por valor de fallback, nao por seletor - :has() nao existe no m103.
	   Com o token presente, content vira a cor da surface, que e invalida para content:
	   a declaracao invalida em tempo de computacao, content volta a `normal`, e o
	   pseudo-elemento nao e gerado. Sem o token, a mensagem aparece.
	   As cores sao de sistema (Highlight/HighlightText) porque no caso de falha
	   NAO EXISTE token - e a unica excecao a "toda cor sai de tokens.css",
	   registrada no CONVENCOES.md. */
	body::before {
		content: var(--aqua-surface, "aqua-ui: tokens.css nao foi carregado - o kit esta sem cor");
		position: fixed;
		top: 0; left: 0; right: 0;
		z-index: 2147483647;
		padding: 8px 16px;
		font: 600 14px/1.4 system-ui, sans-serif;
		background: Highlight;
		color: HighlightText;
	}
}

@layer aqua.utilitario {
	/* Papeis de texto. .aqua-faint fixa o tamanho junto com a cor de proposito:
	   text-faint so passa o piso em 24px+, entao o utilitario torna o uso
	   pequeno impossivel em vez de proibido. */
	.aqua-title { font-size: var(--aqua-fs-2xl); font-weight: 600; line-height: var(--aqua-lh-tight); letter-spacing: -0.01em; }
	.aqua-subtitle { font-size: var(--aqua-fs-xl); font-weight: 600; line-height: var(--aqua-lh-tight); letter-spacing: -0.01em; }
	.aqua-label { font-size: var(--aqua-fs-sm); font-weight: 500; color: var(--aqua-text-muted); }
	.aqua-muted { color: var(--aqua-text-muted); }
	.aqua-faint { color: var(--aqua-text-faint); font-size: var(--aqua-fs-2xl); }
	.aqua-mono { font-family: var(--aqua-font-mono); font-variant-numeric: tabular-nums; }

	/* Texto so para leitor de tela. O icon-button da 2b precisa dele. */
	.aqua-sr-only {
		position: absolute;
		width: 1px; height: 1px;
		margin: -1px; padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
		border: 0;
	}
}

/* ==== 01-vidro.css ==== */
/* 01-vidro.css - o material do sistema.
   Os NUMEROS moram no tokens.css (--aqua-vidro-<modo>-<nivel>-*). Aqui eles sao
   compostos em background e backdrop-filter, uma vez, por modo. Componente le
   var(--aqua-vidro-N-bg) e var(--aqua-vidro-N-filtro) e nao sabe em que modo
   esta. O porque de cada numero: docs/vidro.md. */

@layer aqua.base {
	/* ---- browser: o padrao. backdrop-filter funciona, e o clamp de brilho e o
	   que da pior caso calculavel. Sem classe na raiz, e este. ---------------- */
	:root, .aqua-browser {
		/* O veu aqui e estetico (scrim de modal): o contraste do modo browser vem do
		   clamp, nao do veu. So no nui-veu ele sustenta contraste. */
		--aqua-veu-bg: rgb(var(--aqua-surface-rgb) / 40%);

		--aqua-vidro-1-bg: rgb(var(--aqua-surface-rgb) / var(--aqua-vidro-browser-1-tint));
		--aqua-vidro-2-bg: rgb(var(--aqua-surface-rgb) / var(--aqua-vidro-browser-2-tint));
		--aqua-vidro-3-bg: rgb(var(--aqua-surface-rgb) / var(--aqua-vidro-browser-3-tint));

		--aqua-vidro-1-filtro: blur(var(--aqua-vidro-browser-1-blur)) saturate(var(--aqua-vidro-browser-sat)) brightness(var(--aqua-vidro-browser-1-clamp));
		--aqua-vidro-2-filtro: blur(var(--aqua-vidro-browser-2-blur)) saturate(var(--aqua-vidro-browser-sat)) brightness(var(--aqua-vidro-browser-2-clamp));
		--aqua-vidro-3-filtro: blur(var(--aqua-vidro-browser-3-blur)) saturate(var(--aqua-vidro-browser-sat)) brightness(var(--aqua-vidro-browser-3-clamp));

		/* Lei do Vidro (02-movimento, CONVENCOES §13): ao pressionar, o blur desce
		   para press-blur. Composto AQUI, por modo, pelo mesmo motivo dos niveis:
		   o componente nao decide se ha filtro. */
		--aqua-press-filtro: blur(var(--aqua-press-blur)) saturate(var(--aqua-vidro-browser-sat));
	}

	/* Sem backdrop-filter nao ha clamp, e sem clamp nao ha pior caso calculavel:
	   sobra o tint, e ele sobe para 92%. Degrada legivel em vez de virar sopa. */
	@supports not (backdrop-filter: blur(1px)) {
		:root, .aqua-browser {
			--aqua-vidro-1-bg: rgb(var(--aqua-surface-rgb) / var(--aqua-vidro-browser-sem-suporte-tint));
			--aqua-vidro-2-bg: rgb(var(--aqua-surface-rgb) / var(--aqua-vidro-browser-sem-suporte-tint));
			--aqua-vidro-3-bg: rgb(var(--aqua-surface-rgb) / var(--aqua-vidro-browser-sem-suporte-tint));
			--aqua-vidro-1-filtro: none;
			--aqua-vidro-2-filtro: none;
			--aqua-vidro-3-filtro: none;
			--aqua-press-filtro: none;
		}
	}

	/* ---- selecao e escolha: o vocabulario do ADR 0033 ---------------------------
	   Ate 2026-09-22 tudo o que estava escolhido levava accent 10% de fundo, borda
	   accent 45% e o canto da Gota; o dono leu esse contorno colorido como
	   interface gerada. Passam a existir DUAS marcas, e nenhuma e accent:
	   - SELECAO (posicao: nav, aba, pagina, linha, opcao): um degrau de
	     superficie, sem borda, com o mesmo fio de luz e a mesma sombra curta do
	     vidro-2, para ler como o mesmo material.
	   - ESCOLHA (o que esta ligado: chip, toggle, caixa, dia): a pilula INVERTE,
	     text por fundo e surface por texto. Um degrau de 11% nao diz "ligado"
	     numa pilula de 26px; a inversao diz.
	   Componente le daqui e nao repete os numeros. Fora de modo de proposito:
	   selecao nao depende de haver filtro. ---------------------------------------- */
	:root {
		--aqua-selecao-bg: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-selected));
		--aqua-selecao-sombra: inset 0 1px 0 rgb(var(--aqua-white-rgb) / 7%), 0 1px 2px rgb(var(--aqua-black-rgb) / 20%);
		--aqua-escolha-bg: var(--aqua-text);
		--aqua-escolha-fg: var(--aqua-surface);
	}

	/* ---- nui-veu: menu de NUI que captura foco. O CEF m103 faz backdrop-filter
	   piscar (citizenfx/fivem, issue 3843), entao NENHUM filtro; o determinismo vem do
	   veu de 70%, que e obrigatorio - sem ele os numeros do modo nao valem. ---- */
	.aqua-nui-veu {
		--aqua-veu-bg: rgb(var(--aqua-surface-rgb) / var(--aqua-vidro-nui-veu-veu));

		--aqua-vidro-1-bg: rgb(var(--aqua-surface-rgb) / var(--aqua-vidro-nui-veu-1-tint));
		--aqua-vidro-2-bg: rgb(var(--aqua-surface-rgb) / var(--aqua-vidro-nui-veu-2-tint));
		--aqua-vidro-3-bg: rgb(var(--aqua-surface-rgb) / var(--aqua-vidro-nui-veu-3-tint));

		--aqua-vidro-1-filtro: none;
		--aqua-vidro-2-filtro: none;
		--aqua-vidro-3-filtro: none;
		--aqua-press-filtro: none;
	}

	/* ---- nui-hud: overlay sobre o jogo cru, sem capturar foco. Um HUD nao pode
	   escurecer a tela: sem veu, sem filtro, so o tint segura - e por isso ele
	   comeca em 85%. -------------------------------------------------------- */
	.aqua-nui-hud {
		--aqua-veu-bg: transparent;

		--aqua-vidro-1-bg: rgb(var(--aqua-surface-rgb) / var(--aqua-vidro-nui-hud-1-tint));
		--aqua-vidro-2-bg: rgb(var(--aqua-surface-rgb) / var(--aqua-vidro-nui-hud-2-tint));
		--aqua-vidro-3-bg: rgb(var(--aqua-surface-rgb) / var(--aqua-vidro-nui-hud-3-tint));

		--aqua-vidro-1-filtro: none;
		--aqua-vidro-2-filtro: none;
		--aqua-vidro-3-filtro: none;
		--aqua-press-filtro: none;
	}

	/* ---- nui-vidro: a NUI com blur de verdade sobre o jogo (ADR 0042 do aquanuis).
	   O backdrop-filter da NUI nao ve o jogo: cada NUI e um iframe transparente
	   por cima dele. Quem desenha o blur e o aqua-vidro.js, num canvas, pelo game
	   view da Cfx; aqui o filtro e none e o veu some.
	   :root.aqua-nui-vidro, e nao so a classe, porque ela CONVIVE com aqua-nui-veu
	   ou aqua-nui-hud, que a NUI continua trocando para dizer se ha foco: com mais
	   especificidade o vidro ganha dos dois, e se o game view falhar o
	   aqua-vidro.js tira a classe e a NUI volta ao modo dela, com o contraste
	   medido. O texto branco e a borda moram no tokens.css, porque la estao os
	   tokens que eles sobrepoem. -------------------------------------------- */
	:root.aqua-nui-vidro {
		background: transparent;
		--aqua-veu-bg: transparent;

		--aqua-vidro-1-bg: rgb(var(--aqua-vidro-nui-vidro-tom-rgb) / var(--aqua-vidro-nui-vidro-1-tint));
		--aqua-vidro-2-bg: rgb(var(--aqua-vidro-nui-vidro-tom-rgb) / var(--aqua-vidro-nui-vidro-2-tint));
		--aqua-vidro-3-bg: rgb(var(--aqua-vidro-nui-vidro-tom-rgb) / var(--aqua-vidro-nui-vidro-3-tint));

		--aqua-vidro-1-filtro: none;
		--aqua-vidro-2-filtro: none;
		--aqua-vidro-3-filtro: none;
		--aqua-press-filtro: none;
	}
}

@layer aqua.utilitario {
	/* ---- o material ---------------------------------------------------------
	   Raio e do componente. Aqui so o que faz parecer vidro e nao opacity
	   preguicoso: tint, filtro, borda assimetrica (a luz vem de cima: brilho de
	   1px por dentro, linha fina por fora) e, so em 2 e 3, sombra curta + longa.
	   Nunca glow - requisito do dono. */
	.aqua-vidro-1, .aqua-vidro-2, .aqua-vidro-3 {
		border: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border));
		box-shadow: inset 0 1px 0 rgb(var(--aqua-white-rgb) / 7%);
	}

	.aqua-vidro-1 {
		background: var(--aqua-vidro-1-bg);
		-webkit-backdrop-filter: var(--aqua-vidro-1-filtro);
		backdrop-filter: var(--aqua-vidro-1-filtro);
	}

	.aqua-vidro-2,
	.aqua-vidro-3 {
		box-shadow:
			inset 0 1px 0 rgb(var(--aqua-white-rgb) / 7%),
			0 1px 2px rgb(var(--aqua-black-rgb) / 20%),
			0 12px 32px -12px rgb(var(--aqua-black-rgb) / 40%);
	}

	.aqua-vidro-2 {
		background: var(--aqua-vidro-2-bg);
		-webkit-backdrop-filter: var(--aqua-vidro-2-filtro);
		backdrop-filter: var(--aqua-vidro-2-filtro);
	}

	.aqua-vidro-3 {
		background: var(--aqua-vidro-3-bg);
		-webkit-backdrop-filter: var(--aqua-vidro-3-filtro);
		backdrop-filter: var(--aqua-vidro-3-filtro);
	}

	/* ---- o veu ------------------------------------------------------------
	   Em nui-veu e OBRIGATORIO e e o primeiro filho do body. Em nui-hud nao
	   existe, e a regra abaixo garante que um veu esquecido nao escureca um HUD. */
	.aqua-veu {
		position: fixed;
		inset: 0;
		z-index: var(--aqua-z-veil);
		background: var(--aqua-veu-bg);
		pointer-events: none;
	}

	.aqua-nui-hud .aqua-veu { display: none; }

	/* ---- a caixa de vidro de verdade -------------------------------------
	   O aqua-vidro.js marca com data-aqua-vidro="1|2|3" cada caixa que ele
	   borra atras, e so ela leva a aresta e a sombra do modo: botao, campo e
	   linha de lista, que moram dentro dela, ficam com as do kit. */
	:root.aqua-nui-vidro [data-aqua-vidro] {
		box-shadow: inset 0 1px 0 rgb(var(--aqua-white-rgb) / var(--aqua-vidro-nui-vidro-aresta));
	}

	:root.aqua-nui-vidro [data-aqua-vidro="2"],
	:root.aqua-nui-vidro [data-aqua-vidro="3"] {
		box-shadow:
			inset 0 1px 0 rgb(var(--aqua-white-rgb) / var(--aqua-vidro-nui-vidro-aresta)),
			0 1px 2px rgb(var(--aqua-black-rgb) / calc(var(--aqua-vidro-nui-vidro-sombra) * 20%)),
			0 12px 32px -12px rgb(var(--aqua-black-rgb) / calc(var(--aqua-vidro-nui-vidro-sombra) * 40%));
	}

	/* A caixa que flutua sobre OUTRA caixa (o menu, o popover, o tooltip, a paleta), marcada com
	   data-aqua-vidro-sobre pelo aqua-vidro.js. Atras dela ha HTML, e o canvas nao alcanca HTML:
	   ela borra pelo backdrop-filter, com a receita do modo browser e os numeros do nui-vidro. O
	   filtro ve o jogo borrado porque o canvas mora dentro da pagina. O raio vem do mesmo degrau
	   de desfoque, escrito na raiz pelo modulo. */
	:root.aqua-nui-vidro [data-aqua-vidro-sobre="1"] {
		-webkit-backdrop-filter: blur(var(--aqua-vidro-sobre-blur, 12px)) saturate(var(--aqua-vidro-nui-vidro-sat)) brightness(var(--aqua-vidro-nui-vidro-1-clamp));
		backdrop-filter: blur(var(--aqua-vidro-sobre-blur, 12px)) saturate(var(--aqua-vidro-nui-vidro-sat)) brightness(var(--aqua-vidro-nui-vidro-1-clamp));
	}

	:root.aqua-nui-vidro [data-aqua-vidro-sobre="2"] {
		-webkit-backdrop-filter: blur(var(--aqua-vidro-sobre-blur, 12px)) saturate(var(--aqua-vidro-nui-vidro-sat)) brightness(var(--aqua-vidro-nui-vidro-2-clamp));
		backdrop-filter: blur(var(--aqua-vidro-sobre-blur, 12px)) saturate(var(--aqua-vidro-nui-vidro-sat)) brightness(var(--aqua-vidro-nui-vidro-2-clamp));
	}

	:root.aqua-nui-vidro [data-aqua-vidro-sobre="3"] {
		-webkit-backdrop-filter: blur(var(--aqua-vidro-sobre-blur, 12px)) saturate(var(--aqua-vidro-nui-vidro-sat)) brightness(var(--aqua-vidro-nui-vidro-3-clamp));
		backdrop-filter: blur(var(--aqua-vidro-sobre-blur, 12px)) saturate(var(--aqua-vidro-nui-vidro-sat)) brightness(var(--aqua-vidro-nui-vidro-3-clamp));
	}
}

/* ==== 02-movimento.css ==== */
/* 02-movimento.css - as quatro leis (docs/movimento.md) e as duas leis cineticas (CONVENCOES §13) em CSS.
   Keyframes fora de camada: nao cascateiam. Utilitarios em aqua.utilitario.
   O corte por prefers-reduced-motion fica em aqua.base COM !important: em
   camadas, !important inverte a ordem e a camada mais baixa vence, entao nada
   acima - nem o consumidor - consegue reanimar o que o usuario pediu para parar. */

/* Lei 4 - entrada: opacidade + escala 0.96 -> 1 + 8px de subida. */
@keyframes aqua-entrar {
	from { opacity: 0; transform: translateY(8px) scale(0.96); }
	to   { opacity: 1; transform: none; }
}

/* Saida e o inverso, mais curta e menor: o olho nao acompanha o que vai embora. */
@keyframes aqua-sair {
	from { opacity: 1; transform: none; }
	to   { opacity: 0; transform: translateY(4px) scale(0.98); }
}

@keyframes aqua-veu-entrar {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@layer aqua.utilitario {
	/* transform-origin no GATILHO: quem abre o elemento escreve --aqua-origem
	   inline a partir do botao que o chamou (Fase 4). Sem gatilho, abre do
	   topo-centro - o caso do dropdown que desce. */
	.aqua-entra {
		transform-origin: var(--aqua-origem, 50% 0%);
		animation: aqua-entrar var(--aqua-t-base) var(--aqua-ease-out) both;
	}

	.aqua-sai {
		transform-origin: var(--aqua-origem, 50% 0%);
		animation: aqua-sair var(--aqua-t-rapido) var(--aqua-ease-in-out) both;
	}

	/* O veu nao escala: so aparece. */
	.aqua-veu.aqua-entra { animation-name: aqua-veu-entrar; }

	/* Leis 1 e 2 - press e hover, para clicavel que nao e componente do kit
	   (card-link, linha de tabela, item avulso). Componente do kit repete estas
	   declaracoes no proprio bloco: CSS sem pre-processador nao tem @extend, e o
	   CONVENCOES.md publica o bloco para copiar. */
	.aqua-clicavel {
		cursor: pointer;
		transition:
			transform var(--aqua-t-toque) var(--aqua-ease-out),
			background-color var(--aqua-t-rapido) var(--aqua-ease-out),
			border-color var(--aqua-t-rapido) var(--aqua-ease-out),
			color var(--aqua-t-rapido) var(--aqua-ease-out);
	}

	/* Lei 2 - nunca so cor: o micro-deslocamento e o que o cerebro le como fisico. */
	.aqua-clicavel:hover { transform: translateY(-1px); }

	/* Lei 1 - press. Icone vai a 0.90, mas isso e do aqua-icon-btn (2b). */
	.aqua-clicavel:active { transform: scale(0.97); }

	/* Desabilitado: opacidade e permitida AQUI e so aqui - WCAG isenta controle
	   inativo. Sem hover, sem press. pointer-events fica, para title funcionar. */
	.aqua-clicavel:disabled,
	.aqua-clicavel[aria-disabled="true"] {
		opacity: 0.5;
		cursor: not-allowed;
		transform: none;
	}

	/* Selecionado, quando o clicavel tem estado: accent a 10% de fundo e 45% de
	   borda - o padrao que a pagina de prova da Fase 1 fixou. */
	.aqua-clicavel[aria-pressed="true"],
	.aqua-clicavel[aria-selected="true"],
	.aqua-clicavel[aria-current] {
		color: var(--aqua-text);
		background-color: var(--aqua-selecao-bg);
		box-shadow: var(--aqua-selecao-sombra);
		border-color: transparent;
	}
}

@layer aqua.base {
	/* Sem excecao, sem "mas esta e sutil". A pessoa que ligou isto nao pediu
	   menos movimento; pediu nenhum. Duracao quase-zero em vez de none para os
	   eventos animationend/transitionend continuarem disparando. */
	@media (prefers-reduced-motion: reduce) {
		*, *::before, *::after {
			animation-duration: 0.001ms !important;
			animation-iteration-count: 1 !important;
			transition-duration: 0.001ms !important;
			scroll-behavior: auto !important;
		}
	}
}

/* --- Lei da Gota ---------------------------------------------------------
   O canto afiado percorre os quatro cantos, e a massa inclina atras dele. Nao
   e rotacao: nada gira como roda, e cada quadro e uma silhueta diferente. O
   deslocamento e transform (composto em GPU); o canto e border-radius, que
   repinta - por isso a lei vale para elemento pequeno, e a Task 15 mede o custo
   num painel grande antes de a Fase 4 usar em superficie maior. */
@keyframes aqua-gota-percorre {
	0%   { border-radius: var(--aqua-gota-bl); transform: translate(-1px,  1px); }
	25%  { border-radius: var(--aqua-gota-tl); transform: translate(-1px, -1px); }
	50%  { border-radius: var(--aqua-gota-tr); transform: translate( 1px, -1px); }
	75%  { border-radius: var(--aqua-gota-br); transform: translate( 1px,  1px); }
	100% { border-radius: var(--aqua-gota-bl); transform: translate(-1px,  1px); }
}

/* Condensa: de pilula a Gota e de volta. E o vocabulario do esqueleto e de
   qualquer coisa que espera no lugar, sem varrer. */
@keyframes aqua-gota-condensa {
	0%, 100% { border-radius: var(--aqua-radius-full); opacity: 1; }
	50%      { border-radius: var(--aqua-gota-bl);     opacity: 0.62; }
}

/* Respira: so opacidade, sem mudar de forma. E a espera de superficie GRANDE
   (esqueleto de card, painel), onde a Gota ainda nao pode ser usada porque o
   border-radius interpolado repinta e o custo no CEF nao foi medido. Mesma
   amplitude e mesmo tempo da condensa, para as duas esperarem em fase. */
@keyframes aqua-respirar {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.62; }
}

@layer aqua.utilitario {
	/* ---- o anel desenhado (usado pelo aqua-tour) -------------------------------
	   Um svg em tela cheia, fora do ponteiro, acima de tudo. O traco nasce no
	   canto afiado da Gota - o inferior-esquerdo - e percorre o contorno do
	   alvo em t-lento; ao sair, corre PARA A FRENTE e some, entao a linha vai
	   embora em vez de apagar. E a Lei da Gota aplicada ao aqua-tour (§13): a
	   assinatura entra desenhando.

	   pathLength=100 no path normaliza o contorno, entao o mesmo dasharray serve
	   para um botao de 80px e para um campo de 420px, e a velocidade de desenho
	   e a mesma nos dois. A espessura e 1.25 e a folga do contorno e 3px
	   (o tour passa space-1), decididos pelo dono em 2026-09-15 ("um pouco mais
	   fino, minimalista e moderno"). A folga mora no contornoAnel do aqua-ui.js.
	   prefers-reduced-motion corta a transicao pela base, e o traco simplesmente
	   aparece inteiro - continua sendo um anel visivel.

	   Ate 2026-09-29 este bloco tambem era a lei 3 do movimento (foco e anel,
	   nunca glow): todo controle, e os dez campos compostos (search,
	   number-input, file-picker, markdown-editor, prompt-box, tag-input,
	   password-input, duration-input, console), desenhava este traco ao
	   focar. Retirado por decisao do dono - ver 00-base.css. O que sobra
	   aqui e so o que o aqua-tour ainda usa: a classe, o path e as transicoes
	   de entrada e saida. */

	.aqua-anel {
		position: fixed;
		inset: 0;
		z-index: var(--aqua-z-toast);
		overflow: visible;
		pointer-events: none;
	}
	.aqua-anel path {
		fill: none;
		stroke: var(--aqua-accent);
		stroke-width: 1.25;
		stroke-linecap: round;
		stroke-linejoin: round;
		stroke-dasharray: 100 100;
		stroke-dashoffset: 100;
	}
	.aqua-anel[data-aqua-anel-estado="entra"] path {
		stroke-dashoffset: 0;
		transition: stroke-dashoffset var(--aqua-t-lento) var(--aqua-ease-out);
	}
	/* A saida termina ESCONDIDA, e nao so fora do contorno (1.32, 2026-09-16).
	   Em dashoffset -100 o traco nao some por inteiro: o contorno e fechado, a
	   ponta que saiu e o ponto onde ele nasceu sao o mesmo lugar, e ali sobrava
	   um resto do accent, 3px fora do canto inferior esquerdo, ate o proximo
	   foco. Nao era so a ponta redonda: com ponta reta o resto encolhe e nao
	   some, entao ele tem comprimento.

	   visibility com DURACAO, nao com atraso: entre visible e hidden o valor
	   interpolado e visible durante a transicao inteira e so vira hidden no
	   fim, entao a saida corre completa e o traco some no ultimo quadro. As
	   duas duracoes sao o mesmo token, e o corte de prefers-reduced-motion da
	   base encurta as duas juntas: sem movimento, o traco some na hora. Atraso
	   nao serviria, porque a base corta a duracao e nao o atraso, e o resto
	   ficaria t-base na tela de quem pediu nenhum movimento. Nada aqui depende
	   de transitionend nem de relogio, que param com a aba em segundo plano.
	   Um foco novo durante a saida passa pelo estado sem atributo, que e
	   visible e sem transicao, antes do entra.

	   Empurrar o dashoffset alem de -100 tambem apaga o resto, e foi medido,
	   mas a folga teria de cobrir a diferenca entre o comprimento que o
	   navegador usa para o pathLength e o que o traco percorre de fato, que o
	   kit nao controla. */
	.aqua-anel[data-aqua-anel-estado="sai"] path {
		stroke-dashoffset: -100;
		visibility: hidden;
		transition:
			stroke-dashoffset var(--aqua-t-base) var(--aqua-ease-in-out),
			visibility var(--aqua-t-base) step-end;
	}

	/* A espera do sistema. Substitui o anel girando, que era o spinner do
	   Bootstrap. Duracao em multiplo de t-lento para a escala de tempo
	   continuar sendo a do sistema, e ease-in-out porque o movimento e
	   continuo - ease-out e para reagir, nao para repetir. */
	.aqua-espera {
		display: inline-block;
		flex: none;
		width: var(--aqua-space-4);
		height: var(--aqua-space-4);
		background-color: var(--aqua-accent);
		animation: aqua-gota-percorre calc(var(--aqua-t-lento) * 4) var(--aqua-ease-in-out) infinite;
	}

	/* Lei do Vidro - pressao adensa em vez de escurecer. So faz sentido sobre
	   superficie de vidro; em fundo solido o adensamento nao tem o que compor.
	   O canto fecha junto: e a Gota reagindo ao toque. O filtro e
	   --aqua-press-filtro, composto por modo no 01-vidro.css: em nui-veu e
	   nui-hud ele e none, porque backdrop-filter pisca no CEF, e o componente
	   nao decide isso. */
	.aqua-adensa {
		transition:
			background-color var(--aqua-t-toque) var(--aqua-ease-out),
			backdrop-filter var(--aqua-t-toque) var(--aqua-ease-out),
			border-radius var(--aqua-t-toque) var(--aqua-ease-out);
	}
	.aqua-adensa:active {
		background-color: rgb(var(--aqua-surface-rgb) / var(--aqua-press-tint));
		-webkit-backdrop-filter: var(--aqua-press-filtro);
		backdrop-filter: var(--aqua-press-filtro);
		border-radius: var(--aqua-radius-btn-fechado);
	}
}

/* ==== 10-button.css ==== */
/* 10-button.css - aqua-btn. A acao.

   Gota: em repouso, radius-btn. O botao e o unico lugar em que a Gota fica
   PARADA, e o dono aprovou esse detalhe explicitamente (2026-09-03): a marca
   em repouso e o botao; em movimento e a espera. Ao toque o canto fecha
   (gota-fechado) e a superficie adensa (Lei do Vidro, CONVENCOES §13).
   Esperando (--loading), O BOTAO anda: aqua-gota-percorre no proprio
   elemento, sem spinner dentro. O rotulo diz o que esta acontecendo; a forma
   diz que esta vivo.

   Decisoes, para ninguem "corrigir":
   - press em fundo alfa (neutro, ghost): tint sobe para press-tint e o blur
     vem de --aqua-press-filtro, que o 01-vidro.css compoe por modo. Em fundo
     solido (primary, danger) nao ha vidro para adensar: brightness(0.96) e o
     canto fechando.
   - as quatro leis do §7 continuam: hover e cor mais 1px de subida, press e
     scale(0.97) escrito por inteiro (translateY junto, senao o hover some no
     toque), foco e o anel da base. A Lei do Vidro soma brightness(1.06) ao
     foco e ao selecionado.
   - --loading corta o ponteiro: botao que espera nao recebe hover nem clique,
     e o segundo clique do jogador impaciente nao dispara a compra duas vezes.
   - cor solida so em primary e danger: on-accent sobre accent 8.07, surface
     sobre danger 6.56 (docs/contraste.md).
   - <a> tambem: text-decoration none no repouso E no hover, porque a base
     sublinha todo link (00-base.css). Sem isto, todo botao escrito como <a>
     (o "Comprar" da capsula, o "Central" do header do site, os gestos das
     telas da central) sublinhava ao passar o rato, e um botao sublinhado
     parece link quebrado. O aqua-fab e o aqua-brand-cta ja faziam isto desde
     2026-09-03, e o aqua-btn tinha ficado de fora; medido e corrigido em
     2026-09-22, por recusa do dono. */
@layer aqua.componente {
	.aqua-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--aqua-space-2);
		padding: var(--aqua-space-2) var(--aqua-space-4);
		border: 1px solid transparent;
		border-radius: var(--aqua-radius-btn);
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-rest));
		color: var(--aqua-text);
		font-size: var(--aqua-fs-md);
		font-weight: 500;
		line-height: var(--aqua-lh-base);
		white-space: nowrap;
		text-decoration: none;
		cursor: pointer;
		transition:
			transform var(--aqua-t-toque) var(--aqua-ease-out),
			border-radius var(--aqua-t-toque) var(--aqua-ease-out),
			backdrop-filter var(--aqua-t-toque) var(--aqua-ease-out),
			background-color var(--aqua-t-rapido) var(--aqua-ease-out),
			border-color var(--aqua-t-rapido) var(--aqua-ease-out),
			color var(--aqua-t-rapido) var(--aqua-ease-out),
			filter var(--aqua-t-rapido) var(--aqua-ease-out);
	}

	/* ---- os cinco estados, mais o selecionado ------------------------------------ */
	.aqua-btn:hover {
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-hover));
		transform: translateY(-1px);
		text-decoration: none;
	}
	.aqua-btn:focus-visible { filter: brightness(1.06); }
	.aqua-btn:active {
		transform: translateY(-1px) scale(0.97);
		border-radius: var(--aqua-radius-btn-fechado);
		background-color: rgb(var(--aqua-surface-rgb) / var(--aqua-press-tint));
		-webkit-backdrop-filter: var(--aqua-press-filtro);
		backdrop-filter: var(--aqua-press-filtro);
	}
	.aqua-btn:disabled,
	.aqua-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; filter: none; }

	/* Selecionado (botao de alternancia): o par com :hover impede o hover de
	   repouso de vencer o selecionado sob o ponteiro. A Gota ja esta aqui; o
	   que o §13 acrescenta e o brilho. */
	.aqua-btn[aria-pressed="true"],
	.aqua-btn[aria-pressed="true"]:hover {
		color: var(--aqua-escolha-fg);
		background-color: var(--aqua-escolha-bg);
		border-color: transparent;
	}
	.aqua-btn[aria-pressed="true"]:hover { filter: brightness(0.94); }
	.aqua-btn[aria-pressed="true"]:active { background-color: var(--aqua-escolha-bg); filter: brightness(0.88); backdrop-filter: none; -webkit-backdrop-filter: none; }
	.aqua-btn[aria-pressed="true"] .aqua-btn__icon { color: var(--aqua-escolha-fg); }

	/* ---- tom ------------------------------------------------------------------ */
	.aqua-btn--danger { border-color: transparent; background-color: var(--aqua-danger); color: var(--aqua-surface); }
	.aqua-btn--ghost { border-color: transparent; background-color: transparent; }

	/* ---- o primario e o CRISTAL (ADR 0033, 2026-09-22) ---------------------------
	   Escolhido pelo dono entre doze candidatos, no navegador. Vidro em tres
	   camadas sobre surface-overlay (o 800), texto e icone BRANCOS, quatro
	   sombras internas que fazem a espessura, e uma luz accent que segue o
	   ponteiro (010-button.js).
	   - Branco sobre o accent claro mede 2.25 e reprova; sobre o 800 mede 10.69.
	     O accent entra como LUZ, nunca como fundo de texto.
	   - SEM backdrop-filter: o fundo e opaco, entao nao havia o que desfocar, e
	     na NUI o CEF m103 faz o filtro piscar (01-vidro.css).
	   - A luz e um elemento de tamanho fixo que anda por TRANSFORM: mover o
	     "at X Y" de um gradiente repinta o botao a cada evento; mover o
	     elemento nao. Promovido a camada so enquanto ha ponteiro em cima.
	   - Num HUD nao ha ponteiro: a luz fica parada no canto superior esquerdo,
	     e e a degradacao desejada. */
	.aqua-btn--primary {
		position: relative;
		isolation: isolate;
		overflow: hidden;
		border-color: transparent;
		background-color: var(--aqua-surface-overlay);
		background-image: linear-gradient(180deg, rgb(var(--aqua-white-rgb) / 6%), rgb(var(--aqua-white-rgb) / 0%));
		color: var(--aqua-white);
		font-weight: 600;
		box-shadow:
			inset 0 1px 0 rgb(var(--aqua-white-rgb) / 30%),
			inset 0 -1px 0 rgb(var(--aqua-surface-rgb) / 40%),
			inset 1px 0 0 rgb(var(--aqua-white-rgb) / 8%),
			0 10px 30px -10px rgb(var(--aqua-surface-rgb) / 90%);
		transition:
			transform var(--aqua-t-toque) var(--aqua-ease-out),
			border-radius var(--aqua-t-toque) var(--aqua-ease-out),
			box-shadow var(--aqua-t-rapido) var(--aqua-ease-out),
			filter var(--aqua-t-rapido) var(--aqua-ease-out);
	}
	.aqua-btn--primary .aqua-btn__icon { color: var(--aqua-white); }
	.aqua-btn--primary::before {
		content: "";
		position: absolute;
		z-index: -1;
		top: 0;
		left: 0;
		width: calc(var(--aqua-space-12) * 4);
		height: calc(var(--aqua-space-12) * 4);
		margin: calc(var(--aqua-space-12) * -2) 0 0 calc(var(--aqua-space-12) * -2);
		background: radial-gradient(closest-side circle, rgb(var(--aqua-accent-rgb) / 55%), transparent);
		transform: translate(var(--aqua-btn-luz-x, var(--aqua-space-12)), var(--aqua-btn-luz-y, var(--aqua-space-2)));
		opacity: 0.55;
		pointer-events: none;
		transition: opacity var(--aqua-t-rapido) var(--aqua-ease-out);
	}
	.aqua-btn--primary:hover {
		background-color: var(--aqua-surface-overlay);
		filter: none;
		box-shadow:
			inset 0 1px 0 rgb(var(--aqua-white-rgb) / 40%),
			inset 0 -1px 0 rgb(var(--aqua-surface-rgb) / 40%),
			inset 1px 0 0 rgb(var(--aqua-white-rgb) / 10%),
			0 14px 34px -10px rgb(var(--aqua-accent-rgb) / 40%);
	}
	.aqua-btn--primary:hover::before { opacity: 1; will-change: transform; }
	.aqua-btn--primary:active {
		background-color: var(--aqua-surface-overlay);
		filter: brightness(0.9);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	/* ---- na NUI o primario e a ASSINATURA, nao o Cristal (ADR 0056, 2026-09-30) ----
	   Lei do dono, na AN-33: "deixar o botao primario das NUIs mais simples, sem
	   efeitos". Ele escolheu no navegador, entre seis candidatos, e esclareceu o
	   alcance: na web o Cristal fica, porque ali ele e interessante; e no jogo que
	   nao. Entao sao DOIS primarios, de proposito, e a divisao e por AMBIENTE.

	   O seletor e o modo de vidro do CONVENCOES §6, e nao :root: a classe tambem
	   vale numa subarvore, e uma NUI que alterna troca-a no SetNuiFocus. Toda NUI
	   tem um dos dois - a pergunta que os separa e "captura foco?", e nao ha
	   terceira resposta. O aqua-nui-vidro NAO serve aqui: o modulo tira-o quando
	   nao ha game view, e o botao mudaria de desenho sozinho.

	   Cor: accent de fundo, on-accent de texto. Nao e cor nova - e exatamente o que
	   o aqua-fab e o aqua-split-button--primary ja faziam, e o Cristal era o unico
	   dos tres fora do padrao. Na NUI os tres passam a ler igual.

	   Decisoes, para ninguem "corrigir":
	   - branco NAO entra: sobre o accent ele mede 2.25 e reprova o piso. O texto
	     escuro mede 7.95. Foi a troca que o dono aceitou ao escolher (ADR 0036 §4
	     tinha pedido texto branco, e esta parte dele deixa de valer na NUI).
	   - sem gradiente, sem pilha de sombra e sem a luz do ponteiro: e o "sem
	     efeitos" do pedido. O ::before sai por content, e nao por opacity, para
	     nao restar elemento a compor.
	   - o que FICA e o gesto: hover clareia e sobe 1px, toque afunda em
	     scale(0.97) e fecha o canto. A lei do dono de 2026-09-22 continua - o
	     clique tem de ser satisfatorio - e "sem efeitos" nunca quis dizer parado.
	   - o border-radius do toque nao se redeclara: vem do .aqua-btn:active, que o
	     compoe a partir do raio de repouso (ADR 0036 §3). Valor fixo aqui e o erro
	     que aquele ADR descreve.
	   - o 010-button.js tambem tem de saber disto, e sabe: sem a guarda de la, a
	     NUI continuaria a escrever duas propriedades por quadro para uma luz que
	     ja nao existe. */
	:is(.aqua-nui-veu,.aqua-nui-hud) .aqua-btn--primary {
		border-color: transparent;
		background-color: var(--aqua-accent);
		background-image: none;
		color: var(--aqua-on-accent);
		box-shadow: none;
		transition:
			transform var(--aqua-t-toque) var(--aqua-ease-out),
			border-radius var(--aqua-t-toque) var(--aqua-ease-out),
			background-color var(--aqua-t-rapido) var(--aqua-ease-out),
			color var(--aqua-t-rapido) var(--aqua-ease-out),
			filter var(--aqua-t-rapido) var(--aqua-ease-out);
	}
	:is(.aqua-nui-veu,.aqua-nui-hud) .aqua-btn--primary::before { content: none; }
	:is(.aqua-nui-veu,.aqua-nui-hud) .aqua-btn--primary .aqua-btn__icon { color: var(--aqua-on-accent); }
	:is(.aqua-nui-veu,.aqua-nui-hud) .aqua-btn--primary:hover {
		background-color: var(--aqua-accent);
		transform: translateY(-1px);
		filter: brightness(1.08);
		box-shadow: none;
	}
	:is(.aqua-nui-veu,.aqua-nui-hud) .aqua-btn--primary:active {
		background-color: var(--aqua-accent);
		transform: translateY(-1px) scale(0.97);
		filter: brightness(0.94);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	/* Fundo solido nao troca de cor no hover (nao ha color-mix no m103): clareia.
	   E nao adensa no press: escurece um degrau e fecha o canto. */
	.aqua-btn--danger:hover { background-color: var(--aqua-danger); filter: brightness(1.08); }
	.aqua-btn--danger:active {
		background-color: var(--aqua-danger);
		filter: brightness(0.96);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	/* ---- tamanho e forma ---------------------------------------------------------- */
	.aqua-btn--sm { padding: var(--aqua-space-1) var(--aqua-space-3); font-size: var(--aqua-fs-sm); }
	.aqua-btn--lg { padding: var(--aqua-space-3) var(--aqua-space-6); font-size: var(--aqua-fs-lg); }
	.aqua-btn--block { display: flex; width: 100%; }
	.aqua-btn__icon { flex: none; width: 1.15em; height: 1.15em; }

	/* ---- espera: o botao anda ----------------------------------------------------- */
	/* A animacao escreve transform e border-radius, entao hover e press nao
	   competem; o pointer-events corta o resto. Duracao em multiplo de t-lento,
	   ease-in-out porque e loop (CONVENCOES §13). */
	.aqua-btn--loading {
		cursor: progress;
		pointer-events: none;
		animation: aqua-gota-percorre calc(var(--aqua-t-lento) * 4) var(--aqua-ease-in-out) infinite;
	}
}

/* ==== 11-icon-button.css ==== */
/* 11-icon-button.css - aqua-icon-btn. Botao so de icone. Exige aria-label.

   Gota: nenhuma em repouso - radius-sm, porque a Gota parada e so do aqua-btn
   (§5). O que ele recebe do §13 e a Lei do Vidro: ao toque adensa e o canto
   FECHA em gota-fechado, entao por um instante a assinatura aparece onde nao
   estava. E o unico momento em que o icon-button cita a Gota, e e por isso
   que se le como parte da mesma familia sem repetir o botao.

   Decisoes:
   - o icone e um host data-aqua-icon (Task 4), ou um <svg>/<img> solto para
     quem nao carrega o pack; os tres seletores medem igual.
   - o icone acompanha a escala de tipo (fs-lg, fs-xl, fs-2xl) em vez de ter
     escala propria - a mesma decisao do 20-icon.css.
   - press vai a 0.90, nao 0.97: 3% de um alvo de 36px e invisivel (lei 1).
   - press em fundo alfa adensa (press-tint, --aqua-press-filtro por modo). Nao
     ha tom solido aqui: icon-button primario nao existe, e nao vai existir -
     acao primaria tem rotulo. */
@layer aqua.componente {
	.aqua-icon-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: none;
		padding: var(--aqua-space-2);
		border: 1px solid transparent;
		border-radius: var(--aqua-radius-xs);
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-rest));
		color: var(--aqua-text-muted);
		line-height: 0;
		text-decoration: none;
		cursor: pointer;
		transition:
			transform var(--aqua-t-toque) var(--aqua-ease-out),
			border-radius var(--aqua-t-toque) var(--aqua-ease-out),
			backdrop-filter var(--aqua-t-toque) var(--aqua-ease-out),
			background-color var(--aqua-t-rapido) var(--aqua-ease-out),
			border-color var(--aqua-t-rapido) var(--aqua-ease-out),
			color var(--aqua-t-rapido) var(--aqua-ease-out),
			filter var(--aqua-t-rapido) var(--aqua-ease-out);
	}
	.aqua-icon-btn > [data-aqua-icon],
	.aqua-icon-btn > svg,
	.aqua-icon-btn > img { width: var(--aqua-fs-xl); height: var(--aqua-fs-xl); }

	/* ---- os cinco estados, mais o selecionado ------------------------------------ */
	.aqua-icon-btn:hover {
		color: var(--aqua-text);
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-hover));
		transform: translateY(-1px);
		text-decoration: none;
	}
	.aqua-icon-btn:focus-visible { filter: brightness(1.06); }
	.aqua-icon-btn:active {
		transform: translateY(-1px) scale(0.90);
		border-radius: var(--aqua-radius-btn-fechado);
		background-color: rgb(var(--aqua-surface-rgb) / var(--aqua-press-tint));
		-webkit-backdrop-filter: var(--aqua-press-filtro);
		backdrop-filter: var(--aqua-press-filtro);
	}
	.aqua-icon-btn:disabled,
	.aqua-icon-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; filter: none; }
	.aqua-icon-btn[aria-pressed="true"],
	.aqua-icon-btn[aria-pressed="true"]:hover {
		color: var(--aqua-escolha-fg);
		background-color: var(--aqua-escolha-bg);
		border-color: transparent;
	}
	.aqua-icon-btn[aria-pressed="true"]:hover { filter: brightness(0.94); }
	.aqua-icon-btn[aria-pressed="true"]:active { background-color: var(--aqua-escolha-bg); filter: brightness(0.88); backdrop-filter: none; -webkit-backdrop-filter: none; }

	/* ---- forma e tamanho ---------------------------------------------------------- */
	.aqua-icon-btn--ghost { border-color: transparent; background-color: transparent; }
	.aqua-icon-btn--round { border-radius: var(--aqua-radius-full); }
	/* Redondo fecha o canto do mesmo jeito: a Gota e o que o toque revela. */
	.aqua-icon-btn--round:active { border-radius: var(--aqua-radius-btn-fechado); }

	.aqua-icon-btn--sm { padding: var(--aqua-space-1); }
	.aqua-icon-btn--sm > [data-aqua-icon],
	.aqua-icon-btn--sm > svg,
	.aqua-icon-btn--sm > img { width: var(--aqua-fs-lg); height: var(--aqua-fs-lg); }
	.aqua-icon-btn--lg { padding: var(--aqua-space-3); }
	.aqua-icon-btn--lg > [data-aqua-icon],
	.aqua-icon-btn--lg > svg,
	.aqua-icon-btn--lg > img { width: var(--aqua-fs-2xl); height: var(--aqua-fs-2xl); }
}

/* ==== 12-chip.css ==== */
/* 12-chip.css - aqua-chip. Rotulo curto: categoria, filtro ativo, tag.

   Gota: a SELECAO. Em repouso o chip e radius-xs, sem assinatura nenhuma. O
   chip selecionado (aria-pressed) e o unico do grupo com o canto da Gota: a
   assinatura migra com a escolha, e o olho acha o filtro ativo pela forma
   antes de achar pela cor. border-radius transiciona em t-base, entao a
   migracao e VISTA, nao trocada - o canto se fecha num chip enquanto abre no
   outro. E a expressao "selecao" do CONVENCOES §13.

   Decisoes:
   - o ELEMENTO diz o papel: <span> e rotulo estatico, sem hover; <button> e
     filtro clicavel e so ele recebe o bloco de toque. Um chip estatico que
     reage ao mouse mente sobre ser clicavel.
   - press: Lei do Vidro (adensa, canto em gota-fechado). Selecionado e
     pressionado ao mesmo tempo fecha o canto tambem: e a Gota reagindo.
   - o x de remover e alvo proprio, sem a Gota: remover nao e escolher.
   - icone via data-aqua-icon ou svg solto, os dois medem 1em. */
@layer aqua.componente {
	.aqua-chip {
		display: inline-flex;
		align-items: center;
		gap: var(--aqua-space-1);
		padding: var(--aqua-space-1) var(--aqua-space-3);
		border: 1px solid transparent;
		border-radius: var(--aqua-radius-xs);
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-rest));
		color: var(--aqua-text);
		font-size: var(--aqua-fs-sm);
		font-weight: 500;
		line-height: var(--aqua-lh-base);
		white-space: nowrap;
	}
	.aqua-chip__icon { flex: none; width: 1em; height: 1em; color: var(--aqua-text-muted); }

	/* ---- so o chip-botao e clicavel ------------------------------------------------ */
	button.aqua-chip {
		cursor: pointer;
		transition:
			transform var(--aqua-t-toque) var(--aqua-ease-out),
			border-radius var(--aqua-t-base) var(--aqua-ease-out),
			backdrop-filter var(--aqua-t-toque) var(--aqua-ease-out),
			background-color var(--aqua-t-rapido) var(--aqua-ease-out),
			border-color var(--aqua-t-rapido) var(--aqua-ease-out),
			color var(--aqua-t-rapido) var(--aqua-ease-out),
			filter var(--aqua-t-rapido) var(--aqua-ease-out);
	}
	button.aqua-chip:hover {
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-hover));
		transform: translateY(-1px);
	}
	button.aqua-chip:focus-visible { filter: brightness(1.06); }
	button.aqua-chip:active {
		transform: translateY(-1px) scale(0.97);
		border-radius: var(--aqua-radius-btn-fechado);
		background-color: rgb(var(--aqua-surface-rgb) / var(--aqua-press-tint));
		-webkit-backdrop-filter: var(--aqua-press-filtro);
		backdrop-filter: var(--aqua-press-filtro);
	}
	button.aqua-chip:disabled,
	.aqua-chip[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; filter: none; }

	/* ---- selecionado: a Gota migra para ca ------------------------------------------ */
	.aqua-chip[aria-pressed="true"],
	.aqua-chip[aria-pressed="true"]:hover {
		color: var(--aqua-escolha-fg);
		background-color: var(--aqua-escolha-bg);
		border-color: transparent;
	}
	button.aqua-chip[aria-pressed="true"]:hover { filter: brightness(0.94); }
	button.aqua-chip[aria-pressed="true"]:active { background-color: var(--aqua-escolha-bg); filter: brightness(0.88); backdrop-filter: none; -webkit-backdrop-filter: none; }
	.aqua-chip[aria-pressed="true"] .aqua-chip__icon { color: var(--aqua-escolha-fg); }
	button.aqua-chip[aria-pressed="true"]:active { border-radius: var(--aqua-radius-btn-fechado); }

	/* ---- o x de remover: alvo proprio, sem borda, encostado a direita ------------------ */
	.aqua-chip__remove {
		display: inline-flex;
		margin-right: calc(-1 * var(--aqua-space-1));
		padding: 0;
		border: 0;
		border-radius: var(--aqua-radius-full);
		background: none;
		color: var(--aqua-text-muted);
		line-height: 0;
		cursor: pointer;
		transition:
			transform var(--aqua-t-toque) var(--aqua-ease-out),
			color var(--aqua-t-rapido) var(--aqua-ease-out),
			background-color var(--aqua-t-rapido) var(--aqua-ease-out);
	}
	.aqua-chip__remove > [data-aqua-icon],
	.aqua-chip__remove > svg { width: 1em; height: 1em; }
	.aqua-chip__remove:hover { color: var(--aqua-text); background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-hover)); }
	.aqua-chip__remove:active { transform: scale(0.90); }

	.aqua-chip--sm { padding: 0 var(--aqua-space-2); font-size: var(--aqua-fs-xs); }
}

/* ==== 13-segmented.css ==== */
/* 13-segmented.css - aqua-segmented. Escolha exclusiva entre poucas opcoes,
   todas visiveis. Um aria-pressed por vez. Abas de conteudo sao outro
   componente (tabs, Fase 4, aria-selected).

   Gota: o INDICADOR. Quem marca a escolha nao e o fundo do item: e um
   indicador (::before do trilho) que DESLIZA ate o item escolhido, carrega a
   Gota, e vira o canto afiado para a parede em que encosta - no primeiro item
   o canto aponta para a esquerda (gota-bl), no ultimo para a direita
   (gota-br), no meio fica no giro de repouso. E a expressao "escolha
   exclusiva" do CONVENCOES §13: a assinatura migra, e migra andando.

   Melhoria progressiva, nao dependencia: sem o aqua-ui.js o item pressionado
   se marca sozinho com o fundo do selecionado (§4). Com ele, o trilho ganha
   data-aqua-seg-vivo, --aqua-seg-x e --aqua-seg-w, o indicador aparece e o
   item solta o proprio fundo. data-aqua-seg-parede diz a direcao do canto.

   Decisoes:
   - o indicador anima transform e width, nunca left: transform e composto.
     width repinta, mas e um elemento de 30px.
   - o item continua com hover (sobe 1px), foco (clareia) e press (adensa,
     canto fecha): o toque e no item, a escolha e no indicador.
   - trilho em radius-sm, item em radius-xs, indicador na Gota: tres raios
     porque sao tres papeis. */
@layer aqua.componente {
	.aqua-segmented {
		position: relative;
		isolation: isolate;
		display: inline-flex;
		gap: var(--aqua-space-1);
		padding: var(--aqua-space-1);
		border: 1px solid transparent;
		border-radius: var(--aqua-radius-xs);
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-rest));
	}

	/* ---- o indicador ------------------------------------------------------------ */
	.aqua-segmented::before {
		content: "";
		position: absolute;
		z-index: 0;
		top: var(--aqua-space-1);
		bottom: var(--aqua-space-1);
		left: 0;
		width: var(--aqua-seg-w, 0px);
		transform: translateX(var(--aqua-seg-x, 0px));
		border: 0;
		border-radius: calc(var(--aqua-radius-xs) - var(--aqua-space-1));
		background-color: var(--aqua-selecao-bg);
		box-shadow: var(--aqua-selecao-sombra);
		opacity: 0;
		pointer-events: none;
		transition:
			transform var(--aqua-t-base) var(--aqua-ease-out),
			width var(--aqua-t-base) var(--aqua-ease-out),
			border-radius var(--aqua-t-base) var(--aqua-ease-out),
			opacity var(--aqua-t-rapido) var(--aqua-ease-out);
	}
	.aqua-segmented[data-aqua-seg-vivo]::before { opacity: 1; }
	/* ADR 0033: o canto deixou de virar para a parede; o indicador e simetrico. */

	/* ---- o item ----------------------------------------------------------------- */
	.aqua-segmented__item {
		position: relative;
		z-index: 1;
		flex: 1 1 auto;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--aqua-space-1);
		padding: var(--aqua-space-1) var(--aqua-space-3);
		border: 1px solid transparent;
		border-radius: var(--aqua-radius-xs);
		color: var(--aqua-text-muted);
		font-size: var(--aqua-fs-sm);
		font-weight: 500;
		line-height: var(--aqua-lh-base);
		white-space: nowrap;
		cursor: pointer;
		transition:
			transform var(--aqua-t-toque) var(--aqua-ease-out),
			border-radius var(--aqua-t-toque) var(--aqua-ease-out),
			backdrop-filter var(--aqua-t-toque) var(--aqua-ease-out),
			background-color var(--aqua-t-rapido) var(--aqua-ease-out),
			border-color var(--aqua-t-rapido) var(--aqua-ease-out),
			color var(--aqua-t-rapido) var(--aqua-ease-out),
			filter var(--aqua-t-rapido) var(--aqua-ease-out);
	}
	.aqua-segmented__item:hover {
		color: var(--aqua-text);
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-hover));
		transform: translateY(-1px);
	}
	.aqua-segmented__item:focus-visible { filter: brightness(1.06); }
	.aqua-segmented__item:active {
		transform: translateY(-1px) scale(0.97);
		border-radius: var(--aqua-radius-btn-fechado);
		background-color: rgb(var(--aqua-surface-rgb) / var(--aqua-press-tint));
		-webkit-backdrop-filter: var(--aqua-press-filtro);
		backdrop-filter: var(--aqua-press-filtro);
	}
	.aqua-segmented__item:disabled,
	.aqua-segmented__item[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; filter: none; }

	/* Sem o indicador vivo, o item pressionado se marca sozinho (§4). */
	.aqua-segmented__item[aria-pressed="true"],
	.aqua-segmented__item[aria-pressed="true"]:hover {
		color: var(--aqua-text);
		background-color: var(--aqua-selecao-bg);
		box-shadow: var(--aqua-selecao-sombra);
		border-color: transparent;
	}
	/* Com o indicador vivo, o item solta o fundo: quem marca e o indicador. */
	.aqua-segmented[data-aqua-seg-vivo] .aqua-segmented__item[aria-pressed="true"],
	.aqua-segmented[data-aqua-seg-vivo] .aqua-segmented__item[aria-pressed="true"]:hover {
		background-color: transparent;
		border-color: transparent;
	}
	.aqua-segmented[data-aqua-seg-vivo] .aqua-segmented__item[aria-pressed="true"]:hover {
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-rest));
	}

	.aqua-segmented--block { display: flex; width: 100%; }
	.aqua-segmented--sm .aqua-segmented__item { padding: 0 var(--aqua-space-2); font-size: var(--aqua-fs-xs); }
}

/* ==== 14-card.css ==== */
/* 14-card.css - aqua-card. A superficie padrao: vidro-2, radius-lg, sombra
   curta + longa. Le var(--aqua-vidro-2-*) e nao sabe em que modo esta.

   Gota: a SELECAO, e so nela. O card estatico e superficie e nao tem
   assinatura: e o chao sobre o qual os componentes vivem. O card interativo
   (--interactive) e clicavel, entao recebe a Lei do Vidro por inteiro - e o
   lugar em que ela mais aparece, porque o card E vidro: ao toque o tint sobe
   para press-tint, o blur desce para press-blur e o canto inferior-esquerdo
   fecha. Selecionado (aria-pressed, aria-selected), o card recebe a Gota:
   entre varios cards de escolha, so o escolhido tem o canto afiado, e a
   assinatura migra com a escolha (§13). A Gota do card e a mesma do botao
   (gota-bl); o raio maior do card em repouso (radius-lg) encolhe para ela,
   e e essa mudanca de raio que se ve acontecer.

   Decisoes:
   - --interactive e modificador, nao atributo: interatividade e variante.
   - --nested e vidro-1 SEM sombra (§5).
   - o press do card interativo troca o proprio fundo de vidro (vidro-2-bg)
     pelo adensado; o filtro ja e composto por modo nos dois casos, entao em
     nui-veu e nui-hud so o tint muda - e basta.
   - hover sobe 1px e engrossa a borda; nao acrescenta sombra (§5). */
@layer aqua.componente {
	.aqua-card {
		display: flex;
		flex-direction: column;
		gap: var(--aqua-space-4);
		padding: var(--aqua-space-6);
		border: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border));
		border-radius: var(--aqua-radius-lg);
		background: var(--aqua-vidro-2-bg);
		-webkit-backdrop-filter: var(--aqua-vidro-2-filtro);
		backdrop-filter: var(--aqua-vidro-2-filtro);
		box-shadow:
			inset 0 1px 0 rgb(var(--aqua-white-rgb) / 7%),
			0 1px 2px rgb(var(--aqua-black-rgb) / 20%),
			0 12px 32px -12px rgb(var(--aqua-black-rgb) / 40%);
		color: var(--aqua-text);
	}

	.aqua-card__header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--aqua-space-3); }
	.aqua-card__title { font-size: var(--aqua-fs-lg); font-weight: 600; line-height: var(--aqua-lh-tight); letter-spacing: -0.01em; }
	.aqua-card__meta { font-size: var(--aqua-fs-sm); color: var(--aqua-text-muted); }
	.aqua-card__body { display: flex; flex-direction: column; gap: var(--aqua-space-3); }
	.aqua-card__footer {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: var(--aqua-space-2);
		padding-top: var(--aqua-space-4);
		border-top: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border));
	}
	/* Imagem sangrando ate a borda: desfaz o padding e herda o raio de cima. */
	.aqua-card__media {
		display: block;
		width: calc(100% + 2 * var(--aqua-space-6));
		margin: calc(-1 * var(--aqua-space-6)) calc(-1 * var(--aqua-space-6)) 0;
		border-radius: var(--aqua-radius-lg) var(--aqua-radius-lg) 0 0;
		object-fit: cover;
	}

	.aqua-card--compact { gap: var(--aqua-space-3); padding: var(--aqua-space-4); }
	.aqua-card--compact .aqua-card__media {
		width: calc(100% + 2 * var(--aqua-space-4));
		margin: calc(-1 * var(--aqua-space-4)) calc(-1 * var(--aqua-space-4)) 0;
	}

	/* Card dentro de card: um nivel abaixo, e sem sombra. */
	.aqua-card--nested {
		border-radius: var(--aqua-radius-md);
		background: var(--aqua-vidro-1-bg);
		-webkit-backdrop-filter: var(--aqua-vidro-1-filtro);
		backdrop-filter: var(--aqua-vidro-1-filtro);
		box-shadow: inset 0 1px 0 rgb(var(--aqua-white-rgb) / 7%);
	}

	/* ---- card que e link ou botao: os cinco estados, e a Lei do Vidro ------------------ */
	.aqua-card--interactive {
		text-align: inherit;
		cursor: pointer;
		transition:
			transform var(--aqua-t-toque) var(--aqua-ease-out),
			border-radius var(--aqua-t-base) var(--aqua-ease-out),
			backdrop-filter var(--aqua-t-toque) var(--aqua-ease-out),
			background-color var(--aqua-t-toque) var(--aqua-ease-out),
			border-color var(--aqua-t-rapido) var(--aqua-ease-out),
			color var(--aqua-t-rapido) var(--aqua-ease-out),
			filter var(--aqua-t-rapido) var(--aqua-ease-out);
	}
	.aqua-card--interactive:hover {
		border-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border-strong));
		transform: translateY(-1px);
	}
	.aqua-card--interactive:focus-visible { filter: brightness(1.06); }
	.aqua-card--interactive:active {
		transform: translateY(-1px) scale(0.97);
		border-radius: var(--aqua-radius-btn-fechado);
		background: rgb(var(--aqua-surface-rgb) / var(--aqua-press-tint));
		-webkit-backdrop-filter: var(--aqua-press-filtro);
		backdrop-filter: var(--aqua-press-filtro);
	}
	.aqua-card--interactive:disabled,
	.aqua-card--interactive[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; filter: none; }

	/* Selecionado: o degrau de superficie do §4 (ADR 0033). Um card e grande, e
	   por isso e SELECAO e nao escolha: inverter 300px de superficie faria o
	   card virar uma placa branca no meio da pagina. */
	.aqua-card--interactive[aria-pressed="true"],
	.aqua-card--interactive[aria-pressed="true"]:hover,
	.aqua-card--interactive[aria-selected="true"],
	.aqua-card--interactive[aria-selected="true"]:hover {
		border-color: transparent;
		background-color: var(--aqua-selecao-bg);
		box-shadow: var(--aqua-selecao-sombra);
	}
	.aqua-card--interactive[aria-pressed="true"]:active,
	.aqua-card--interactive[aria-selected="true"]:active { border-radius: var(--aqua-radius-btn-fechado); }
}

/* ==== 15-badge.css ==== */
/* 15-badge.css - aqua-badge. Estado, contagem, rotulo curto.

   Gota: NENHUMA, de proposito. O badge e o mais quieto dos dez: so herda a
   escala (fs-xs, permitido aqui pelo §3) e o raio (radius-sm). Nao se move,
   nao reage, nao cita a assinatura. Se os dez componentes animarem, nenhum e
   memoravel - badge, avatar e stat sao o fundo quieto contra o qual botao,
   esqueleto e espera se destacam (CONVENCOES §13).

   Decisoes:
   - tom e um PONTO de status, nunca o fundo nem o texto: cor de sinal sobre
     vidro nao esta na prova de contraste (§5). O texto continua text-muted.
   - --pulse e o unico movimento, e ja existia: o ponto de "ao vivo" respira.
     Nao e decoracao, e informacao (isto esta acontecendo agora); e usa o
     mesmo aqua-respirar da espera grande, para as duas pulsarem em fase, em
     vez de um keyframe proprio. Duracao derivada de t-lento.
   - --count em Geist Mono tabular, para 9 e 10 nao mudarem de largura. */
@layer aqua.componente {
	.aqua-badge {
		display: inline-flex;
		align-items: center;
		gap: var(--aqua-space-1);
		padding: 0 var(--aqua-space-2);
		border: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border-strong));
		border-radius: var(--aqua-radius-sm);
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-rest));
		color: var(--aqua-text-muted);
		font-size: var(--aqua-fs-xs);
		font-weight: 500;
		line-height: var(--aqua-lh-base);
		white-space: nowrap;
	}
	.aqua-badge--strong { color: var(--aqua-text); }
	.aqua-badge--count { font-family: var(--aqua-font-mono); font-variant-numeric: tabular-nums; color: var(--aqua-text); }

	/* ---- tom: um ponto ------------------------------------------------------------ */
	.aqua-badge--success::before,
	.aqua-badge--warning::before,
	.aqua-badge--danger::before,
	.aqua-badge--info::before,
	.aqua-badge--accent::before {
		content: "";
		flex: none;
		width: 0.5em;
		height: 0.5em;
		border-radius: var(--aqua-radius-full);
	}
	.aqua-badge--success::before { background: var(--aqua-success); }
	.aqua-badge--warning::before { background: var(--aqua-warning); }
	.aqua-badge--danger::before { background: var(--aqua-danger); }
	.aqua-badge--info::before { background: var(--aqua-info); }
	.aqua-badge--accent::before { background: var(--aqua-accent); }

	/* "ao vivo": o ponto respira. E o unico movimento do badge. */
	.aqua-badge--pulse::before { animation: aqua-respirar calc(var(--aqua-t-lento) * 4) var(--aqua-ease-in-out) infinite; }
}

/* ==== 16-avatar.css ==== */
/* 16-avatar.css - aqua-avatar. Imagem, iniciais ou icone. Os tres tamanhos
   vem da escala de espaco (24, 32, 48): nenhum valor novo.

   Gota: EM REPOUSO, e so no recorte --square. O avatar e quieto de proposito
   (CONVENCOES §13): nao anima, nao reage, nao tem hover. O circulo continua
   sendo o padrao. O que muda e o quadrado: em vez de um radius-sm generico, o
   recorte quadrado E a Gota parada - tres cantos redondos e o inferior-
   esquerdo afiado. E a marca citada sem se mover, num lugar em que a foto do
   jogador ou o logo do servidor vai aparecer mil vezes por sessao.

   Decisoes:
   - iniciais em caixa alta, SEM tracking: e rotulo de dois caracteres, nao
     eyebrow (a proibicao 1 do §13 e sobre texto acima de titulo). O tracking
     de 0.02em saiu em 2026-09-11 pela clausula 2 da regra 51 do aquanuis:
     caixa alta com tracking positivo e a assinatura de interface gerada, e em
     duas letras o respiro nao se ve.
   - o status e um ponto com anel na cor da surface, para se destacar do
     vidro; a cor e de sinal, nunca texto (§5).
   - --square nao leva status: o ponto pousaria no canto afiado.
   - sem overflow: hidden no bloco: a imagem se recorta sozinha (border-radius
     herdado), e o ponto de status precisa sair do circulo. */
@layer aqua.componente {
	.aqua-avatar {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: none;
		width: var(--aqua-space-8);
		height: var(--aqua-space-8);
		border: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border));
		border-radius: var(--aqua-radius-full);
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-hover));
		color: var(--aqua-text);
		font-size: var(--aqua-fs-sm);
		font-weight: 600;
		text-transform: uppercase;
	}
	.aqua-avatar > img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
	.aqua-avatar > svg,
	.aqua-avatar > [data-aqua-icon] { width: 60%; height: 60%; color: var(--aqua-text-muted); }

	.aqua-avatar--sm { width: var(--aqua-space-6); height: var(--aqua-space-6); font-size: var(--aqua-fs-xs); }
	.aqua-avatar--lg { width: var(--aqua-space-12); height: var(--aqua-space-12); font-size: var(--aqua-fs-lg); }

	/* O recorte quadrado e a Gota em repouso. */
	.aqua-avatar--square { border-radius: var(--aqua-gota-bl); }

	/* ---- status: ponto com anel na cor da surface ------------------------------------- */
	.aqua-avatar__status {
		position: absolute;
		right: 0;
		bottom: 0;
		width: 0.6em;
		height: 0.6em;
		border: 2px solid var(--aqua-surface);
		border-radius: var(--aqua-radius-full);
		background: var(--aqua-text-muted);
	}
	.aqua-avatar__status--online { background: var(--aqua-success); }
	.aqua-avatar__status--away { background: var(--aqua-warning); }
	.aqua-avatar__status--busy { background: var(--aqua-danger); }
}

/* ==== 17-stat.css ==== */
/* 17-stat.css - aqua-stat. Rotulo, valor grande em Geist Mono, tendencia. Sem
   fundo proprio: mora dentro de um aqua-card.

   Gota: NENHUMA. O stat e quieto (CONVENCOES §13): o cartao nao se move, o
   numero nao pisca. O unico movimento permitido e a VARIACAO do valor - quando
   o numero muda, o consumidor troca o texto e poe .aqua-entra no __value ou
   no __delta, e a lei 4 faz o resto: o valor novo entra, o cartao fica. Nada
   aqui e loop.

   Decisoes:
   - o numero usa --aqua-font-mono com tabular-nums: 1.284 e 1.285 tem a mesma
     largura, e o card nao respira quando o valor troca.
   - a seta da tendencia e o ponto de status (success/danger no glifo), e o
     numero do delta fica em text-muted: cor de sinal nao vira cor de texto.
   - o glifo da tendencia e um triangulo em ::before, nao um icone do pack:
     nao depende do JS, e um stat num HUD tem que valer sem aqua-ui.js. */
@layer aqua.componente {
	.aqua-stat { display: flex; flex-direction: column; gap: var(--aqua-space-1); min-width: 0; }
	.aqua-stat__label { font-size: var(--aqua-fs-sm); font-weight: 500; color: var(--aqua-text-muted); }
	.aqua-stat__value {
		font-family: var(--aqua-font-mono);
		font-variant-numeric: tabular-nums;
		font-size: var(--aqua-fs-2xl);
		font-weight: 600;
		line-height: var(--aqua-lh-tight);
		letter-spacing: -0.01em;
		color: var(--aqua-text);
	}
	.aqua-stat__delta {
		display: inline-flex;
		align-items: center;
		gap: var(--aqua-space-1);
		font-family: var(--aqua-font-mono);
		font-variant-numeric: tabular-nums;
		font-size: var(--aqua-fs-sm);
		color: var(--aqua-text-muted);
	}
	.aqua-stat__delta--up::before { content: "\25B2"; font-size: 0.7em; color: var(--aqua-success); }
	.aqua-stat__delta--down::before { content: "\25BC"; font-size: 0.7em; color: var(--aqua-danger); }
	.aqua-stat__hint { font-size: var(--aqua-fs-xs); color: var(--aqua-text-muted); }

	/* A variacao entra; o cartao fica. transform-origin no proprio numero,
	   porque o "gatilho" da variacao e o valor anterior, no mesmo lugar. */
	/* ---- o valor que NAO e numero (1.44, 2026-09-29) -----------------------------------------
	   O __value e para numero, e e por isso que ele e mono com tabular-nums. Mas todo painel tem o
	   caso sem numero: o servidor novo que ainda nao teve ticket ("sem dado"), a nota que ainda nao
	   existe ("sem nota"), a data ("13 de set."). Em mono, palavra parece quebrada, e o dono viu isso
	   no painel do Aqua Bot como "counter fora do design system". Ele estava certo: faltava a forma.

	   --texto e essa forma: a letra do corpo, um degrau abaixo, e em text-muted quando e ausencia.
	   Ela NAO troca a cor por padrao, porque data e informacao, e nao ausencia: quem mostra "sem
	   dado" poe tambem --vazio, e ai o valor recua para text-muted. Dois modificadores, e nao um,
	   porque sao duas perguntas: "isto e numero?" e "isto e falta?". */
	.aqua-stat__value--texto {
		font-family: inherit;
		font-variant-numeric: normal;
		font-size: var(--aqua-fs-xl);
		font-weight: 600;
		letter-spacing: -0.01em;
	}
	.aqua-stat__value--vazio { color: var(--aqua-text-muted); font-weight: 500; }

	.aqua-stat__value.aqua-entra,
	.aqua-stat__delta.aqua-entra { --aqua-origem: 0% 100%; }

	.aqua-stat--lg .aqua-stat__value { font-size: var(--aqua-fs-3xl); }
	.aqua-stat--inline { flex-direction: row; align-items: baseline; gap: var(--aqua-space-2); }
}

/* ==== 18-skeleton.css ==== */
/* 18-skeleton.css - aqua-skeleton. O lugar do conteudo que ainda nao chegou.

   Gota: a CONDENSA. Nada varre. Cada bloco condensa de pilula em Gota e
   relaxa, em cascata vertical de --aqua-cascata entre irmaos: o primeiro
   comeca, o segundo 110ms depois, e assim por diante - a espera desce pela
   pagina como uma coisa so, em vez de um brilho atravessando cada bloco por
   conta propria. E a expressao "esqueleto" do CONVENCOES §13, e apaga o
   shimmer do Facebook de 2015 (linear-gradient a 90deg) que o 2b tinha.

   Decisoes:
   - a animacao e aqua-gota-condensa, do 02-movimento: border-radius de
     radius-full para gota-bl e de volta, com a opacidade caindo junto. O
     border-radius interpolado repinta, e por isso a lei vale para elemento
     pequeno: --text, --title e --circle.
   - --card e superficie GRANDE, e a Gota nao pode ser usada nela ate a sonda
     medir o custo no CEF (§13). Ela usa aqua-respirar (so opacidade), no
     mesmo tempo e na mesma amplitude, para esperar em fase com os pequenos.
   - a cascata e por :nth-child ate o oitavo; do nono em diante o atraso
     satura, porque uma lista de vinte esqueletos com cascata de dois segundos
     parece quebrada, nao viva.
   - --circle nao fixa o raio no modificador: o circulo tambem condensa, e um
     circulo virando gota e a assinatura mais literal do sistema. */
@layer aqua.componente {
	.aqua-skeleton {
		display: block;
		min-height: var(--aqua-space-4);
		border-radius: var(--aqua-radius-full);
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-hover));
		animation: aqua-gota-condensa calc(var(--aqua-t-lento) * 4) var(--aqua-ease-in-out) infinite;
		animation-delay: calc(var(--aqua-cascata) * var(--aqua-skeleton-i, 0));
	}

	/* A cascata: o indice do irmao vira atraso. */
	.aqua-skeleton:nth-child(2) { --aqua-skeleton-i: 1; }
	.aqua-skeleton:nth-child(3) { --aqua-skeleton-i: 2; }
	.aqua-skeleton:nth-child(4) { --aqua-skeleton-i: 3; }
	.aqua-skeleton:nth-child(5) { --aqua-skeleton-i: 4; }
	.aqua-skeleton:nth-child(6) { --aqua-skeleton-i: 5; }
	.aqua-skeleton:nth-child(7) { --aqua-skeleton-i: 6; }
	.aqua-skeleton:nth-child(n + 8) { --aqua-skeleton-i: 7; }

	.aqua-skeleton--text { height: 1em; min-height: 0; }
	.aqua-skeleton--title { height: 1.5em; min-height: 0; }
	.aqua-skeleton--circle { width: var(--aqua-space-8); height: var(--aqua-space-8); }

	/* Superficie grande: so respira, ate a medicao liberar a Gota. */
	.aqua-skeleton--card {
		min-height: calc(var(--aqua-space-12) * 3);
		border-radius: var(--aqua-radius-lg);
		animation-name: aqua-respirar;
	}
}

/* ==== 19-spinner.css ==== */
/* 19-spinner.css - aqua-spinner. Espera indeterminada.

   Gota: a ESPERA, a expressao mais literal do CONVENCOES §13. Nada gira. Um
   bloco em accent do tamanho de um glifo, e o canto afiado percorre os quatro
   cantos enquanto a massa inclina 1px atras dele (aqua-gota-percorre). A
   forma nunca se repete no meio do ciclo e nada roda como roda. E o
   .aqua-espera do 02-movimento, repetido aqui porque componente nao depende
   de o consumidor lembrar de uma classe a mais. Apaga o anel do Bootstrap
   (border-top-color mais rotate 360deg) que o 2b tinha, e e o que faz a prova
   7 voltar a passar.

   Decisoes:
   - tres tamanhos na escala de espaco (12, 16, 24). Os raios da Gota sao de
     16px e o navegador os reduz na proporcao quando o bloco e menor: em 12px
     a silhueta continua sendo Gota, so menor.
   - --inverse e para dentro de fundo solido em accent: o bloco vira on-accent
     (o escuro sobre o claro). O botao esperando nao precisa mais dele - o
     botao anda sozinho - mas o contrato fica, para HTML da 2b nao quebrar.
   - sob prefers-reduced-motion a base congela o quadro 0: sobra uma Gota
     parada em accent, que ainda diz "esperando" sem se mover.
   - role="status" e o texto so para leitor de tela sao do consumidor, como
     na 2b; o showroom mostra o jeito certo. */
@layer aqua.componente {
	.aqua-spinner {
		display: inline-block;
		flex: none;
		width: var(--aqua-space-4);
		height: var(--aqua-space-4);
		border-radius: var(--aqua-gota-bl);
		background-color: var(--aqua-accent);
		animation: aqua-gota-percorre calc(var(--aqua-t-lento) * 4) var(--aqua-ease-in-out) infinite;
	}
	.aqua-spinner--sm { width: var(--aqua-space-3); height: var(--aqua-space-3); }
	.aqua-spinner--lg { width: var(--aqua-space-6); height: var(--aqua-space-6); }
	/* Dentro de fundo solido em accent: o escuro sobre o claro. */
	.aqua-spinner--inverse { background-color: var(--aqua-on-accent); }
}

/* ==== 20-icon.css ==== */
/* 20-icon.css - aqua-icon. O fundamento: um glifo do pack, no tamanho da
   escala de tipo, na cor do texto que o cerca.

   Gota: nenhuma. Icone e vocabulario, nao componente que reage; quem se move e
   o botao em volta dele.

   Fino de proposito: tamanho, tom e alinhamento. Zero cor - o svg que o
   aqua-ui.js monta leva fill="currentColor", entao o icone herda a cor do pai
   (e o que faz "icone em text-muted" ser so `color`, sem regra propria). Os
   tres tamanhos acompanham a escala de tipo (fs-lg, fs-xl, fs-2xl) em vez de
   ter escala propria: e a decisao que o 11-icon-button.css ja tinha tomado.

   [data-aqua-icon] sem classe mede 1em: dentro de texto, o icone e do tamanho
   da letra e senta no baseline. .aqua-icon fixa o tamanho na escala. O padrao
   vai em :where() (especificidade zero) para qualquer classe de componente -
   .aqua-btn__icon, .aqua-chip__icon - vencer sem depender da ordem das folhas. */
@layer aqua.componente {
	:where([data-aqua-icon]) {
		display: inline-flex;
		flex: none;
		width: 1em;
		height: 1em;
		vertical-align: -0.125em;
		line-height: 0;
	}
	:where([data-aqua-icon]) > svg { width: 100%; height: 100%; }

	.aqua-icon { width: var(--aqua-fs-xl); height: var(--aqua-fs-xl); }
	.aqua-icon--sm { width: var(--aqua-fs-lg); height: var(--aqua-fs-lg); }
	.aqua-icon--lg { width: var(--aqua-fs-2xl); height: var(--aqua-fs-2xl); }
}

/* ==== 21-fab.css ==== */
/* 21-fab.css - aqua-fab. O botao da tela.

   Gota: EM REPOUSO, como o botao (10-button.css). O fab e O botao - o unico
   que flutua sobre o conteudo - entao carrega a Gota parada (radius-btn) e a
   cor solida da acao primaria: accent de fundo, on-accent de texto (8.07,
   medido). E a linha do fab no CONVENCOES §13.

   Sem par no OCEON. Adiado na 2b por falta de uso; o spec o trouxe de volta
   para a loja e o dashboard.

   Decisoes, para ninguem "corrigir":
   - SEM sombra: sombra e do vidro-2 e 3 (§5), e o fab e solido. O que o
     destaca e a cor e a forma, nao a sombra.
   - os cinco estados do aqua-btn--primary, por inteiro: hover clareia
     (brightness 1.08) e sobe 1px; press e translateY(-1px) scale(0.97),
     brightness(0.96) e o canto fechando em gota-fechado, sem adensar (fundo
     solido nao tem o que adensar); foco e o anel da base; disabled a 0.5.
   - space-12 de lado (48px), icone fs-2xl; --sm 40px (space-8 + space-2),
     icone fs-xl; --extended tem icone e rotulo na mesma altura, com mais
     padding a direita do que a esquerda porque o icone ja respira.
   - --fixed ancora no canto inferior direito em z-float. Sem ele o fab e
     inline, e e assim que o atelie o mostra.
   - <a> tambem: text-decoration none no repouso e no hover, porque a base
     sublinha todo link. So icone exige aria-label. */
@layer aqua.componente {
	.aqua-fab {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--aqua-space-2);
		width: var(--aqua-space-12);
		height: var(--aqua-space-12);
		padding: 0;
		border: 1px solid transparent;
		border-radius: var(--aqua-radius-btn);
		background-color: var(--aqua-accent);
		color: var(--aqua-on-accent);
		font-size: var(--aqua-fs-md);
		font-weight: 500;
		line-height: var(--aqua-lh-base);
		white-space: nowrap;
		text-decoration: none;
		cursor: pointer;
		transition:
			transform var(--aqua-t-toque) var(--aqua-ease-out),
			border-radius var(--aqua-t-toque) var(--aqua-ease-out),
			background-color var(--aqua-t-rapido) var(--aqua-ease-out),
			filter var(--aqua-t-rapido) var(--aqua-ease-out);
	}
	.aqua-fab > [data-aqua-icon],
	.aqua-fab > svg { flex: none; width: var(--aqua-fs-2xl); height: var(--aqua-fs-2xl); }

	/* ---- os cinco estados do botao primario ------------------------------------------ */
	.aqua-fab:hover {
		background-color: var(--aqua-accent);
		filter: brightness(1.08);
		transform: translateY(-1px);
		text-decoration: none;
	}
	.aqua-fab:focus-visible { filter: brightness(1.06); }
	.aqua-fab:active {
		transform: translateY(-1px) scale(0.97);
		border-radius: var(--aqua-radius-btn-fechado);
		filter: brightness(0.96);
	}
	.aqua-fab:disabled,
	.aqua-fab[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; filter: none; }

	/* ---- forma e tamanho ---------------------------------------------------------- */
	.aqua-fab--extended { width: auto; padding: 0 var(--aqua-space-6) 0 var(--aqua-space-4); }
	.aqua-fab--sm { width: calc(var(--aqua-space-8) + var(--aqua-space-2)); height: calc(var(--aqua-space-8) + var(--aqua-space-2)); }
	.aqua-fab--sm > [data-aqua-icon],
	.aqua-fab--sm > svg { width: var(--aqua-fs-xl); height: var(--aqua-fs-xl); }
	.aqua-fab--sm.aqua-fab--extended { width: auto; padding: 0 var(--aqua-space-4) 0 var(--aqua-space-3); }
	.aqua-fab--fixed {
		position: fixed;
		right: var(--aqua-space-6);
		bottom: var(--aqua-space-6);
		z-index: var(--aqua-z-float);
	}
}

/* ==== 22-brand-cta.css ==== */
/* 22-brand-cta.css - aqua-brand-cta. A acao de marca: UMA por tela.

   Gota: EM REPOUSO, como o botao, porque e acao. E a unica acao que e VIDRO:
   botao e fundo alfa, fab e solido, a acao de marca e vidro-2 com a sombra
   curta mais longa que so o vidro tem (§5), e por isso flutua sobre a pagina
   como um card. E a linha da acao de marca no CONVENCOES §13.

   O OBrandCta e uma pilula neutra com gradiente, brilho no topo e uma seta
   que desliza no hover. Gradiente decorativo e a proibicao 6; seta grudada e
   a 3. O que sobra da ideia e o que importa: uma acao por tela que nao e a
   acao primaria do formulario, e sim a da marca - "conheca a Aqua Nuis",
   "ver planos". Duas acoes de marca na mesma tela e a marca gritando; o
   componente nao impede, a revisao impede.

   Decisoes, para ninguem "corrigir":
   - <a> ou <button>, os dois medem igual. text-decoration none no repouso e
     no hover, porque a base sublinha todo link; a cor e text, nao accent.
   - mais ar que o botao (space-2 space-6): e a marca, respira. --sm e
     space-1 space-4 com fs-sm.
   - le var(--aqua-vidro-2-*) e nao sabe em que modo esta (§5): em nui-veu e
     nui-hud o filtro e none e sobra o tint, que basta.
   - os cinco estados: hover engrossa a borda para alpha-border-strong,
     clareia (1.06) e sobe 1px; press adensa pela Lei do Vidro (press-tint,
     --aqua-press-filtro), fecha o canto em gota-fechado e encolhe a 0.97;
     foco e o anel da base; aria-disabled e :disabled a 0.5.
   - __icon em accent, 1.15em: o unico ponto de cor, e e a marca. Sem seta,
     sem gradiente, sem palavra em cor diferente. */
@layer aqua.componente {
	.aqua-brand-cta {
		display: inline-flex;
		align-items: center;
		gap: var(--aqua-space-2);
		padding: var(--aqua-space-2) var(--aqua-space-6);
		border: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border));
		border-radius: var(--aqua-radius-btn);
		background-color: var(--aqua-vidro-2-bg);
		-webkit-backdrop-filter: var(--aqua-vidro-2-filtro);
		backdrop-filter: var(--aqua-vidro-2-filtro);
		box-shadow:
			inset 0 1px 0 rgb(var(--aqua-white-rgb) / 7%),
			0 1px 2px rgb(var(--aqua-black-rgb) / 20%),
			0 12px 32px -12px rgb(var(--aqua-black-rgb) / 40%);
		color: var(--aqua-text);
		font-size: var(--aqua-fs-md);
		font-weight: 500;
		line-height: var(--aqua-lh-base);
		white-space: nowrap;
		text-decoration: none;
		cursor: pointer;
		transition:
			transform var(--aqua-t-toque) var(--aqua-ease-out),
			border-radius var(--aqua-t-toque) var(--aqua-ease-out),
			backdrop-filter var(--aqua-t-toque) var(--aqua-ease-out),
			background-color var(--aqua-t-toque) var(--aqua-ease-out),
			border-color var(--aqua-t-rapido) var(--aqua-ease-out),
			filter var(--aqua-t-rapido) var(--aqua-ease-out);
	}
	.aqua-brand-cta__icon { flex: none; width: 1.15em; height: 1.15em; color: var(--aqua-accent); }

	/* ---- os cinco estados, e a Lei do Vidro no press ------------------------------------- */
	.aqua-brand-cta:hover {
		color: var(--aqua-text);
		border-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border-strong));
		filter: brightness(1.06);
		transform: translateY(-1px);
		text-decoration: none;
	}
	.aqua-brand-cta:focus-visible { filter: brightness(1.06); }
	.aqua-brand-cta:active {
		transform: translateY(-1px) scale(0.97);
		border-radius: var(--aqua-radius-btn-fechado);
		background-color: rgb(var(--aqua-surface-rgb) / var(--aqua-press-tint));
		-webkit-backdrop-filter: var(--aqua-press-filtro);
		backdrop-filter: var(--aqua-press-filtro);
	}
	.aqua-brand-cta:disabled,
	.aqua-brand-cta[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; filter: none; }

	/* ---- tamanho ------------------------------------------------------------------- */
	.aqua-brand-cta--sm { padding: var(--aqua-space-1) var(--aqua-space-4); font-size: var(--aqua-fs-sm); }
}

/* ==== 23-joined-bar.css ==== */
/* 23-joined-bar.css - aqua-joined-bar. A barra colada: controles num corpo so.

   Gota: A BARRA INTEIRA E UMA GOTA. O canto afiado no primeiro item, embaixo
   a esquerda; os redondos no ultimo; item do meio nao tem canto. E o
   primeiro lugar em que a assinatura se compoe canto a canto, com os tokens
   da 1.10 (gota-raio, gota-ponta, gota-ponta-fechada): o shorthand de quatro
   valores nao serve quando cada item leva so metade dos cantos. O item
   selecionado (aria-pressed) marca por fundo e borda, que o aqua-btn ja tem,
   e NAO recebe a Gota: o canto e da barra (CONVENCOES §13).

   O OJoinedBar sem variante: as cinco com nome (acoes, split, stepper, visao,
   formato) nao entram. Split e dropdown (Fase 5), stepper e o
   aqua-number-input, visao e o aqua-segmented, formato e a toolbar de
   markdown (Fase 6). A barra colada e o CONTEINER.

   Filhos: .aqua-btn, .aqua-icon-btn, .aqua-input, .aqua-search. Todos do
   mesmo tamanho (--sm em todos ou em nenhum): e o que o 24-input.css
   garantiu ao dar a campo e botao a mesma altura.

   Decisoes, para ninguem "corrigir":
   - o corpo e um so: item que sobe ou encolhe sozinho quebra o corpo. Hover e
     press ficam so com cor e adensamento, e o canto so fecha onde existe: no
     primeiro item (gota-ponta-fechada), como no botao.
   - as bordas se sobrepoem por margin-left -1px: uma linha entre os itens, nao
     duas. E margem de LAYOUT, do conteiner sobre os filhos, nao do componente.
   - a especificidade de ".aqua-joined-bar > :hover" EMPATA com a de
     ".aqua-btn:hover", e o 23- vem depois do 10- e do 11-: vence pela ordem.
     Nao acrescente peso ao seletor; se um dia a ordem mudar, a prova 5 nao
     pega e o item volta a subir.
   - o anel de foco e a borda do selecionado ficam por cima do vizinho por
     z-index; :focus-within cobre a busca, que carrega o anel na caixa.
   - --block estica os itens em partes iguais; o que vem DEPOIS de um campo
     mantem a propria largura, e o campo fica com o resto - o caso do cupom
     com o botao de aplicar. */
@layer aqua.componente {
	.aqua-joined-bar { display: inline-flex; align-items: stretch; }
	.aqua-joined-bar--block { display: flex; width: 100%; }
	.aqua-joined-bar--block > * { flex: 1 1 0; min-width: 0; }

	/* ---- a barra e UMA Gota: o canto afiado no primeiro, os redondos no ultimo ------ */
	.aqua-joined-bar > * { border-radius: 0; }
	.aqua-joined-bar > * + * { margin-left: -1px; }
	.aqua-joined-bar > :first-child { border-radius: var(--aqua-gota-raio) 0 0 var(--aqua-gota-ponta); }
	.aqua-joined-bar > :last-child { border-radius: 0 var(--aqua-gota-raio) var(--aqua-gota-raio) 0; }
	.aqua-joined-bar > :only-child { border-radius: var(--aqua-gota-bl); }

	/* ---- o corpo e um so: nada sobe nem encolhe; o canto so fecha onde existe --------- */
	.aqua-joined-bar > :hover,
	.aqua-joined-bar > :active { transform: none; }
	.aqua-joined-bar > :active { border-radius: 0; }
	.aqua-joined-bar > :first-child:active { border-radius: var(--aqua-gota-raio) 0 0 var(--aqua-gota-ponta-fechada); }
	.aqua-joined-bar > :last-child:active { border-radius: 0 var(--aqua-gota-raio) var(--aqua-gota-raio) 0; }
	.aqua-joined-bar > :only-child:active { border-radius: var(--aqua-gota-fechado); }

	/* ---- o anel de foco e a borda do selecionado ficam por cima do vizinho ------------- */
	.aqua-joined-bar > :focus-visible,
	.aqua-joined-bar > :focus-within,
	.aqua-joined-bar > [aria-pressed="true"] { position: relative; z-index: 1; }

	/* ---- campo dentro da barra: a largura e da barra, nao do campo -------------------- */
	.aqua-joined-bar > .aqua-input { width: auto; flex: 1 1 auto; }
	.aqua-joined-bar > .aqua-search { flex: 1 1 auto; }
	.aqua-joined-bar--block > .aqua-input ~ *,
	.aqua-joined-bar--block > .aqua-search ~ * { flex: 0 0 auto; }
}

/* ==== 24-input.css ==== */
/* 24-input.css - aqua-input. O campo de texto.

   Gota: NENHUMA, de proposito. O campo e o chao quieto sobre o qual o botao
   de enviar se destaca: a Gota aparece no que se escolhe ou se aciona, nunca
   no que se digita (CONVENCOES §13). Raio de campo: radius-md.

   Uma forma so. O OCEON tem quatro (doca, console, linha, capsula) e a Aqua
   nao copia nenhuma: menu de variantes e o que parece gerado; uma forma
   canonica e o que parece decidido. Esta e a CAIXA DE CAMPO, e as folhas de
   textarea, search, number-input, otp-input e expand-select a repetem por
   texto, como o §4 manda repetir o bloco de estados:
     padding space-2 space-4, fs-md, lh-base, borda 1px alpha-border-strong,
     radius-md, fundo alpha-rest.
   Da 39px com borda - a mesma altura do aqua-btn. Campo e botao do mesmo
   tamanho na mesma linha se alinham sem ajuste, e a barra colada mistura os
   dois. --sm e --lg sao os degraus do botao, pelo mesmo motivo.

   Campo nao e clicavel (§4): nao sobe no hover; o hover e o fundo indo a
   alpha-hover. Foco e o anel da base mais brightness(1.06), a Lei do Vidro
   (focar clareia). Invalido e aria-invalid, borda danger a 60%, inclusive no
   foco - o anel diz "aqui", a borda diz "errado", e os dois cabem. readonly
   e fundo transparente, borda fina e sem hover: le-se, nao se edita.
   disabled e opacity 0.5, e o hover nao sobe o fundo.

   Decisoes, para ninguem "corrigir":
   - largura e do layout: display block, width 100%, min-width 0. O pai
     decide quanto o campo ocupa; o campo nunca traz largura propria.
   - [readonly], e nao :read-only: :read-only tambem casa o desabilitado.
   - placeholder e o da base (text-muted, 00-base.css); nao se redefine aqui.
   - --mono: Geist Mono, tabular-nums, letter-spacing 0.02em - chave, codigo,
     placa. A letra mono e mais estreita e o tracking devolve o respiro.
   - caret em accent: o unico ponto de cor do campo, e diz onde se digita. */
@layer aqua.componente {
	.aqua-input {
		display: block;
		width: 100%;
		min-width: 0;
		padding: var(--aqua-space-2) var(--aqua-space-4);
		border: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border-strong));
		border-radius: var(--aqua-radius-md);
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-rest));
		color: var(--aqua-text);
		font-size: var(--aqua-fs-md);
		line-height: var(--aqua-lh-base);
		caret-color: var(--aqua-accent);
		-webkit-appearance: none;
		appearance: none;
		transition:
			background-color var(--aqua-t-rapido) var(--aqua-ease-out),
			border-color var(--aqua-t-rapido) var(--aqua-ease-out),
			filter var(--aqua-t-rapido) var(--aqua-ease-out);
	}

	/* ---- os estados de campo: hover so de fundo, foco clareia, invalido, so leitura, desabilitado ---- */
	.aqua-input:hover { background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-hover)); }
	.aqua-input:focus-visible { filter: brightness(1.06); }
	.aqua-input[aria-invalid="true"],
	.aqua-input[aria-invalid="true"]:focus-visible { border-color: rgb(var(--aqua-danger-rgb) / 60%); }
	.aqua-input[readonly]:not(:disabled),
	.aqua-input[readonly]:not(:disabled):hover {
		background-color: transparent;
		border-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border));
		cursor: default;
	}
	.aqua-input:disabled {
		opacity: 0.5;
		cursor: not-allowed;
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-rest));
	}

	/* ---- tamanho e forma: os degraus do botao ------------------------------------ */
	.aqua-input--sm { padding: var(--aqua-space-1) var(--aqua-space-3); font-size: var(--aqua-fs-sm); }
	.aqua-input--lg { padding: var(--aqua-space-3) var(--aqua-space-4); font-size: var(--aqua-fs-lg); }
	.aqua-input--mono { font-family: var(--aqua-font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
}

/* ==== 25-textarea.css ==== */
/* 25-textarea.css - aqua-textarea. O campo de texto longo.

   Gota: NENHUMA. Chao quieto, como o input (24-input.css): a Gota e do que se
   escolhe ou se aciona, nunca do que se digita (CONVENCOES §13).

   A mesma caixa de campo do input, em bloco, repetida por texto:
     padding space-2 space-4, fs-md, lh-base, borda 1px alpha-border-strong,
     radius-md, fundo alpha-rest.
   rows e a altura minima, como o HTML ja faz. resize vertical: horizontal
   quebraria o layout do pai, que e quem decide a largura.

   Decisoes, para ninguem "corrigir":
   - data-aqua-autoresize cresce com o conteudo entre rows e
     data-aqua-max-rows (aqua-ui.js). Aqui so o que e CSS: resize none, porque
     a alca mentiria (a altura e do texto), e overflow-y hidden, que o JS
     troca por auto quando o texto bate no teto.
   - line-height lh-base explicita, e nao herdada: o autoresize le o
     line-height computado para contar linhas, e "normal" nao e um numero.
   - os estados sao os do input, iguais e por inteiro: hover so de fundo,
     foco clareia com o anel da base, invalido em danger a 60%, readonly
     transparente e sem hover, disabled a 0.5 sem hover. */
@layer aqua.componente {
	.aqua-textarea {
		display: block;
		width: 100%;
		min-width: 0;
		padding: var(--aqua-space-2) var(--aqua-space-4);
		border: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border-strong));
		border-radius: var(--aqua-radius-md);
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-rest));
		color: var(--aqua-text);
		font-size: var(--aqua-fs-md);
		line-height: var(--aqua-lh-base);
		caret-color: var(--aqua-accent);
		resize: vertical;
		-webkit-appearance: none;
		appearance: none;
		transition:
			background-color var(--aqua-t-rapido) var(--aqua-ease-out),
			border-color var(--aqua-t-rapido) var(--aqua-ease-out),
			filter var(--aqua-t-rapido) var(--aqua-ease-out);
	}
	.aqua-textarea[data-aqua-autoresize] { resize: none; overflow-y: hidden; }

	/* ---- os estados de campo, os mesmos do input ---------------------------------- */
	.aqua-textarea:hover { background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-hover)); }
	.aqua-textarea:focus-visible { filter: brightness(1.06); }
	.aqua-textarea[aria-invalid="true"],
	.aqua-textarea[aria-invalid="true"]:focus-visible { border-color: rgb(var(--aqua-danger-rgb) / 60%); }
	.aqua-textarea[readonly]:not(:disabled),
	.aqua-textarea[readonly]:not(:disabled):hover {
		background-color: transparent;
		border-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border));
		cursor: default;
	}
	.aqua-textarea:disabled {
		opacity: 0.5;
		cursor: not-allowed;
		resize: none;
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-rest));
	}
}

/* ==== 26-number-input.css ==== */
/* 26-number-input.css - aqua-number-input. O numero entre dois botoes.

   Gota: NENHUMA. Chao quieto: digita-se aqui, e os botoes de passo sao alvos
   dentro do campo, nao acoes da tela (§13).

   Nao e <input type=number>: o spinner nativo e feio, nao segura para repetir
   e nao aceita virgula. E um <input type=text inputmode=numeric> entre dois
   botoes, como o ONumberInput. O comportamento mora no aqua-ui.js: Enter e
   sair confirmam, Esc volta, setas andam um passo, segurar repete no ritmo do
   OCEON (250ms de espera, depois a cada 80ms), e no limite o botao daquele
   lado e desabilitado pelo JS.

   A caixa de campo (24-input.css) repetida por texto, com padding 0 e
   overflow hidden: o raio recorta os botoes. Sem traco de foco (2026-09-29);
   o input e os botoes so tem o brightness de :focus-within na caixa.

   Decisoes, para ninguem "corrigir":
   - __step e quadrado: a largura e a altura do campo (space-8 + space-2 -
     1px cabe nos 39px com borda). Sem borda, sem fundo, text-muted; hover
     alpha-hover e text; press icone a 0.90 como o aqua-icon-btn; disabled a
     0.5. Nao sobe no hover: e alvo dentro de um campo, e campo nao sobe.
   - __input transparente, centrado, Geist Mono tabular: numero e mono (§3),
     e o 9 e o 10 nao mudam de largura. flex 1 1 4ch, min-width 0.
   - as linhas finas entre o input e os botoes sao border-left e border-right
     do input, em alpha-border: um corpo so, com tres alvos.
   - __unit (moeda, unidade) e texto em text-muted antes dos botoes.
   - min, max e step ficam no <input>: o navegador os ignora em type=text, e
     quem os le e o aqua-ui.js, por getAttribute. data-aqua-valor e o numero
     confirmado em ponto, para a aplicacao nao parsear virgula.
   - disabled e do <input>; o JS desabilita os botoes junto, e a caixa
     esmaece por :has(), como melhoria (§9). */
@layer aqua.componente {
	.aqua-number-input {
		display: inline-flex;
		align-items: stretch;
		padding: 0;
		overflow: hidden;
		border: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border-strong));
		border-radius: var(--aqua-radius-md);
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-rest));
		color: var(--aqua-text);
		font-size: var(--aqua-fs-md);
		line-height: var(--aqua-lh-base);
		transition:
			background-color var(--aqua-t-rapido) var(--aqua-ease-out),
			border-color var(--aqua-t-rapido) var(--aqua-ease-out),
			filter var(--aqua-t-rapido) var(--aqua-ease-out);
	}
	.aqua-number-input__unit {
		display: inline-flex;
		align-items: center;
		flex: none;
		padding: 0 0 0 var(--aqua-space-3);
		color: var(--aqua-text-muted);
		font-weight: 500;
	}

	/* ---- os botoes de passo: quadrados, sem borda, dentro do campo ------------------ */
	.aqua-number-input__step {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: none;
		width: calc(var(--aqua-space-8) + var(--aqua-space-2) - 1px);
		padding: 0;
		border: 0;
		background: none;
		color: var(--aqua-text-muted);
		line-height: 0;
		cursor: pointer;
		transition:
			color var(--aqua-t-rapido) var(--aqua-ease-out),
			background-color var(--aqua-t-rapido) var(--aqua-ease-out);
	}
	.aqua-number-input__step > [data-aqua-icon],
	.aqua-number-input__step > svg {
		width: var(--aqua-fs-lg);
		height: var(--aqua-fs-lg);
		transition: transform var(--aqua-t-toque) var(--aqua-ease-out);
	}
	.aqua-number-input__step:hover { color: var(--aqua-text); background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-hover)); }
	.aqua-number-input__step:focus-visible { outline: 0; }
	.aqua-number-input__step:active > [data-aqua-icon],
	.aqua-number-input__step:active > svg { transform: scale(0.90); }
	.aqua-number-input__step:disabled {
		opacity: 0.5;
		cursor: not-allowed;
		color: var(--aqua-text-muted);
		background: none;
	}

	/* ---- o input: transparente, centrado, mono --------------------------------------- */
	.aqua-number-input__input {
		flex: 1 1 4ch;
		min-width: 0;
		padding: var(--aqua-space-2);
		border: 0;
		border-left: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border));
		border-right: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border));
		background: none;
		color: inherit;
		font-family: var(--aqua-font-mono);
		font-variant-numeric: tabular-nums;
		font-size: inherit;
		line-height: inherit;
		text-align: center;
		caret-color: var(--aqua-accent);
		-webkit-appearance: none;
		appearance: none;
	}
	.aqua-number-input__input:focus-visible { outline: 0; }
	.aqua-number-input__input:disabled { cursor: not-allowed; }

	/* ---- os estados de campo, na caixa ---------------------------------------------- */
	.aqua-number-input:hover { background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-hover)); }
	/* Sem traco de foco desde 2026-09-29 (decisao do dono, ver 00-base.css); so
	   o brightness de "focar clareia" (Lei do Vidro) continua. */
	.aqua-number-input:focus-within {
		filter: brightness(1.06);
	}
	.aqua-number-input[aria-invalid="true"] { border-color: rgb(var(--aqua-danger-rgb) / 60%); }
	.aqua-number-input:has(.aqua-number-input__input:disabled) {
		opacity: 0.5;
		cursor: not-allowed;
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-rest));
	}
}

/* ==== 27-otp-input.css ==== */
/* 27-otp-input.css - aqua-otp-input. O codigo em celulas.

   Gota: a CELULA ATIVA. E o OBirthdayInput generalizado, como o spec
   decidiu: N digitos com auto-avanco, para o 2FA da loja. Cada digito e um
   <input> de verdade: sem JS o codigo ainda entra, so nao avanca sozinho.

   A celula com foco recebe o canto da Gota (gota-bl), borda accent a 45%,
   fundo accent a 10% e brightness(1.06), alem do anel da base. Conforme o
   codigo entra e o foco anda, a Gota migra de celula em celula: e a expressao
   do §13 para o otp - a assinatura acompanha o que se esta fazendo. A celula
   cheia, sem foco, volta ao raio de campo; border-radius transiciona em
   t-base para a migracao ser VISTA, nao trocada.

   Decisoes, para ninguem "corrigir":
   - pattern="[0-9]" required faz :valid significar "tem digito", e o CSS le
     isso sem JS: a celula cheia poe o digito em text. Vazia e text-muted,
     que so aparece se algo que nao e digito escapar (o JS limpa).
   - a caixa de campo (24-input.css) com padding 0: a celula mede 40 por 48
     (space-8 + space-2 por space-12); --sm mede 32 por 40. Centrado, Geist
     Mono tabular, fs-xl (fs-lg em --sm): um digito por celula pede corpo
     maior, e mono para o 1 e o 8 ocuparem o mesmo lugar.
   - hover so de fundo: campo nao e clicavel (§4).
   - __gap separa grupos (123 456): width space-2, nada mais.
   - aria-invalid vai no BLOCO (codigo recusado): todas as celulas em danger
     a 60%, porque o codigo e um so.
   - __value e um <input type=hidden> que o JS preenche com o codigo inteiro:
     e o que o formulario envia. */
@layer aqua.componente {
	.aqua-otp-input {
		display: inline-flex;
		align-items: center;
		gap: var(--aqua-space-2);
	}
	.aqua-otp-input__gap { flex: none; width: var(--aqua-space-2); }

	/* ---- a celula: uma caixa de campo sem padding, um digito no centro ---------------- */
	.aqua-otp-input__digit {
		flex: none;
		width: calc(var(--aqua-space-8) + var(--aqua-space-2));
		height: var(--aqua-space-12);
		padding: 0;
		border: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border-strong));
		border-radius: var(--aqua-radius-md);
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-rest));
		color: var(--aqua-text-muted);
		font-family: var(--aqua-font-mono);
		font-variant-numeric: tabular-nums;
		font-size: var(--aqua-fs-xl);
		line-height: var(--aqua-lh-base);
		text-align: center;
		caret-color: var(--aqua-accent);
		-webkit-appearance: none;
		appearance: none;
		transition:
			border-radius var(--aqua-t-base) var(--aqua-ease-out),
			background-color var(--aqua-t-rapido) var(--aqua-ease-out),
			border-color var(--aqua-t-rapido) var(--aqua-ease-out),
			color var(--aqua-t-rapido) var(--aqua-ease-out),
			filter var(--aqua-t-rapido) var(--aqua-ease-out);
	}
	.aqua-otp-input__digit:valid { color: var(--aqua-text); }

	/* ---- os estados: hover so de fundo; a Gota migra com o foco ----------------------- */
	.aqua-otp-input__digit:hover { background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-hover)); }
	.aqua-otp-input__digit:focus-visible {
		border-color: transparent;
		background-color: var(--aqua-selecao-bg);
		box-shadow: var(--aqua-selecao-sombra);
		color: var(--aqua-text);
		filter: brightness(1.06);
	}
	.aqua-otp-input[aria-invalid="true"] .aqua-otp-input__digit,
	.aqua-otp-input[aria-invalid="true"] .aqua-otp-input__digit:focus-visible { border-color: rgb(var(--aqua-danger-rgb) / 60%); }
	.aqua-otp-input__digit:disabled {
		opacity: 0.5;
		cursor: not-allowed;
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-rest));
	}

	/* ---- tamanho ------------------------------------------------------------------- */
	.aqua-otp-input--sm .aqua-otp-input__digit {
		width: var(--aqua-space-8);
		height: calc(var(--aqua-space-8) + var(--aqua-space-2));
		font-size: var(--aqua-fs-lg);
	}
}

/* ==== 28-search.css ==== */
/* 28-search.css - aqua-search. A busca: icone, campo, e um limpar que so
   aparece com texto.

   Gota: NENHUMA. Chao quieto, como o input: digita-se aqui (§13).

   E a capsula do OCEON e a .search do armas, na forma unica de campo da Aqua
   (24-input.css): a CAIXA e o bloco, e o <input> dentro dela e transparente.
   A caixa de campo repetida por texto: padding 0 space-3 na caixa e
   space-2 0 no input, fs-md, lh-base, borda 1px alpha-border-strong,
   radius-md, fundo alpha-rest. Da a mesma altura do input e do botao.

   Campo composto (§4): o focavel mora dentro da caixa. Sem traco de foco
   desde 2026-09-29; a caixa so ganha brightness em :focus-within.

   Decisoes, para ninguem "corrigir":
   - o limpar so aparece com texto, SEM JS: :placeholder-shown no input e o
     irmao adjacente (+) escondem o botao. Por isso o placeholder e
     obrigatorio; sem texto de placeholder, placeholder=" ".
   - Esc limpa sozinho: type=search faz isso no Chromium. O botao de limpar
     existe para o mouse; data-aqua-limpar (aqua-ui.js) esvazia, dispara
     input e devolve o foco ao campo.
   - o cancelar nativo do webkit some: quem aparece e o nosso limpar.
   - o icone e text-muted e vai a text quando a caixa tem foco: a busca
     acorda inteira, nao so o campo.
   - o limpar e alvo proprio, redondo, sem borda, text-muted, hover
     alpha-hover, press 0.90 - como o aqua-chip__remove. Sem a Gota: limpar
     nao e escolher.
   - aria-invalid vai na caixa, como o role=search.
   - disabled e do <input>, e a caixa esmaece por :has(:disabled), como
     melhoria (§9): sem :has() o campo continua sem aceitar texto, so nao
     esmaece. */
@layer aqua.componente {
	.aqua-search {
		display: inline-flex;
		align-items: center;
		gap: var(--aqua-space-2);
		padding: 0 var(--aqua-space-3);
		border: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border-strong));
		border-radius: var(--aqua-radius-md);
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-rest));
		color: var(--aqua-text);
		font-size: var(--aqua-fs-md);
		line-height: var(--aqua-lh-base);
		transition:
			background-color var(--aqua-t-rapido) var(--aqua-ease-out),
			border-color var(--aqua-t-rapido) var(--aqua-ease-out),
			filter var(--aqua-t-rapido) var(--aqua-ease-out);
	}
	.aqua-search--block { display: flex; width: 100%; }
	.aqua-search__icon {
		flex: none;
		width: 1.15em;
		height: 1.15em;
		color: var(--aqua-text-muted);
		transition: color var(--aqua-t-rapido) var(--aqua-ease-out);
	}

	/* ---- o input: transparente, a caixa e quem tem forma --------------------------- */
	.aqua-search__input {
		flex: 1 1 auto;
		min-width: 0;
		padding: var(--aqua-space-2) 0;
		border: 0;
		background: none;
		color: inherit;
		font-size: inherit;
		line-height: inherit;
		caret-color: var(--aqua-accent);
		-webkit-appearance: none;
		appearance: none;
	}
	.aqua-search__input:focus-visible { outline: 0; }
	.aqua-search__input::-webkit-search-cancel-button,
	.aqua-search__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
	.aqua-search__input:disabled { cursor: not-allowed; }

	/* ---- o limpar: alvo proprio, e so com texto ------------------------------------- */
	.aqua-search__clear {
		display: inline-flex;
		flex: none;
		margin-right: calc(-1 * var(--aqua-space-1));
		padding: var(--aqua-space-1);
		border: 0;
		border-radius: var(--aqua-radius-full);
		background: none;
		color: var(--aqua-text-muted);
		line-height: 0;
		cursor: pointer;
		transition:
			transform var(--aqua-t-toque) var(--aqua-ease-out),
			color var(--aqua-t-rapido) var(--aqua-ease-out),
			background-color var(--aqua-t-rapido) var(--aqua-ease-out);
	}
	.aqua-search__clear > [data-aqua-icon],
	.aqua-search__clear > svg { width: 1em; height: 1em; }
	.aqua-search__clear:hover { color: var(--aqua-text); background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-hover)); }
	.aqua-search__clear:active { transform: scale(0.90); }
	.aqua-search__input:placeholder-shown + .aqua-search__clear { visibility: hidden; }

	/* ---- os estados de campo, na caixa ---------------------------------------------- */
	.aqua-search:hover { background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-hover)); }
	.aqua-search:focus-within {
		filter: brightness(1.06);
	}
	.aqua-search:focus-within .aqua-search__icon { color: var(--aqua-text); }
	.aqua-search[aria-invalid="true"] { border-color: rgb(var(--aqua-danger-rgb) / 60%); }
	.aqua-search:has(:disabled) {
		opacity: 0.5;
		cursor: not-allowed;
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-rest));
	}

	/* ---- tamanhos: os degraus do input ---------------------------------------------- */
	.aqua-search--sm { padding: 0 var(--aqua-space-2); font-size: var(--aqua-fs-sm); }
	.aqua-search--sm .aqua-search__input { padding: var(--aqua-space-1) 0; }
	.aqua-search--lg { padding: 0 var(--aqua-space-4); font-size: var(--aqua-fs-lg); }
	.aqua-search--lg .aqua-search__input { padding: var(--aqua-space-3) 0; }
}

/* ==== 29-checkbox.css ==== */
/* 29-checkbox.css - aqua-checkbox. A caixa de selecao.

   Gota: a SELECAO. Um <input type=checkbox> com appearance none e a caixa; o
   check e desenhado num pseudo-elemento; checked, indeterminate e disabled
   sao os do navegador, o formulario envia sozinho, o leitor de tela ja sabe o
   que e. Zero JS.

   Marcada, a caixa recebe a Gota (gota-bl), fundo accent a 10%, borda accent
   a 45% e brightness(1.06): e a selecao do §13 em 20px, como o chip - entre
   varias caixas, o olho acha a marcada pela FORMA antes de achar pela cor. A
   20px o navegador reduz os raios na proporcao e a silhueta continua sendo
   Gota, como no spinner. Desmarcada e um quadrado de canto radius-xs / 2.
   Parcial (indeterminate) e um traco, e o canto fica em radius-xs: metade do
   caminho entre o quadrado e a Gota. border-radius transiciona em t-base
   para a mudanca de forma ser VISTA.

   O OCheckbox do OCEON tem duas variantes (traco e mare) e um layout de
   tarefa; a Aqua tem uma.

   Decisoes, para ninguem "corrigir":
   - o check e um L de borda, girado, medido em em: nao depende do pack de
     icones. Uma caixa numa NUI sem aqua-ui.js continua marcando.
   - a caixa e clicavel (§4), por inteiro: hover levanta 1px e sobe o fundo,
     e passar o mouse no TEXTO tambem levanta a caixa (.aqua-checkbox:hover);
     press encolhe a 0.90 (alvo de 20px: 3% seria invisivel, como no
     icon-btn), adensa pela Lei do Vidro e, marcada, fecha o canto em
     gota-fechado; foco clareia com o anel da base; disabled a 0.5, sem hover
     nem press, e o rotulo esmaece por irmao (~), sem :has().
   - __label em text, fs-md; __hint em text-muted, fs-sm. --sm reduz a caixa
     para space-4 e o rotulo para fs-sm: lista densa.
   - o input solto, sem o label em volta, funciona igual: e o caso da linha
     de tabela, com aria-label. */
@layer aqua.componente {
	.aqua-checkbox {
		display: inline-flex;
		align-items: flex-start;
		gap: var(--aqua-space-2);
		cursor: pointer;
	}
	.aqua-checkbox__input {
		-webkit-appearance: none;
		appearance: none;
		position: relative;
		flex: none;
		display: inline-grid;
		place-items: center;
		width: calc(var(--aqua-space-4) + var(--aqua-space-1));
		height: calc(var(--aqua-space-4) + var(--aqua-space-1));
		margin: 0;
		font-size: var(--aqua-fs-md);
		border: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border-strong));
		border-radius: calc(var(--aqua-radius-xs) / 2);
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-rest));
		cursor: pointer;
		transition:
			transform var(--aqua-t-toque) var(--aqua-ease-out),
			border-radius var(--aqua-t-base) var(--aqua-ease-out),
			backdrop-filter var(--aqua-t-toque) var(--aqua-ease-out),
			background-color var(--aqua-t-rapido) var(--aqua-ease-out),
			border-color var(--aqua-t-rapido) var(--aqua-ease-out),
			filter var(--aqua-t-rapido) var(--aqua-ease-out);
	}
	/* O check: um L de borda, girado. Nao depende do pack de icones - uma caixa
	   numa NUI sem aqua-ui.js continua marcando. */
	.aqua-checkbox__input::after {
		content: "";
		width: 0.4em;
		height: 0.75em;
		border: solid var(--aqua-escolha-fg);
		border-width: 0 2px 2px 0;
		transform: translateY(-0.08em) rotate(45deg) scale(0);
		opacity: 0;
		transition:
			transform var(--aqua-t-base) var(--aqua-ease-out),
			opacity var(--aqua-t-rapido) var(--aqua-ease-out);
	}
	.aqua-checkbox__input:checked::after { transform: translateY(-0.08em) rotate(45deg) scale(1); opacity: 1; }
	/* Parcial: um traco, e o canto fica pela metade entre o quadrado e a Gota. */
	.aqua-checkbox__input:indeterminate::after { width: 0.6em; height: 0; border-width: 0 0 2px 0; transform: none; opacity: 1; }

	/* ---- os cinco estados: no input, e pelo texto do label ------------------------- */
	.aqua-checkbox__input:hover:not(:disabled),
	.aqua-checkbox:hover .aqua-checkbox__input:not(:disabled) {
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-hover));
		transform: translateY(-1px);
	}
	.aqua-checkbox__input:focus-visible { filter: brightness(1.06); }
	.aqua-checkbox__input:active:not(:disabled),
	.aqua-checkbox:active .aqua-checkbox__input:not(:disabled) {
		transform: translateY(-1px) scale(0.90);
		background-color: rgb(var(--aqua-surface-rgb) / var(--aqua-press-tint));
		-webkit-backdrop-filter: var(--aqua-press-filtro);
		backdrop-filter: var(--aqua-press-filtro);
	}
	.aqua-checkbox__input:disabled { opacity: 0.5; cursor: not-allowed; transform: none; filter: none; }
	.aqua-checkbox__input:disabled ~ .aqua-checkbox__text,
	.aqua-checkbox__input:disabled ~ .aqua-checkbox__label { opacity: 0.5; }

	/* ---- a Gota: marcada, a caixa recebe o canto ------------------------------------ */
	.aqua-checkbox__input:checked,
	.aqua-checkbox__input:indeterminate {
		border-color: transparent;
		background-color: var(--aqua-escolha-bg);
	}
	.aqua-checkbox__input:checked:hover:not(:disabled),
	.aqua-checkbox:hover .aqua-checkbox__input:checked:not(:disabled) { background-color: var(--aqua-escolha-bg); filter: brightness(0.94); }
	.aqua-checkbox__input:checked:active:not(:disabled),
	.aqua-checkbox:active .aqua-checkbox__input:checked:not(:disabled) { border-radius: var(--aqua-radius-btn-fechado); }

	/* ---- o texto ------------------------------------------------------------------ */
	.aqua-checkbox__text { display: flex; flex-direction: column; min-width: 0; }
	.aqua-checkbox__label { font-size: var(--aqua-fs-md); line-height: var(--aqua-lh-base); color: var(--aqua-text); }
	.aqua-checkbox__hint { font-size: var(--aqua-fs-sm); line-height: var(--aqua-lh-base); color: var(--aqua-text-muted); }

	/* ---- tamanho: lista densa ------------------------------------------------------- */
	.aqua-checkbox--sm .aqua-checkbox__input { width: var(--aqua-space-4); height: var(--aqua-space-4); font-size: var(--aqua-fs-sm); }
	.aqua-checkbox--sm .aqua-checkbox__label { font-size: var(--aqua-fs-sm); }
}

/* ==== 30-radio.css ==== */
/* 30-radio.css - aqua-radio. A escolha exclusiva simples.

   Gota: NENHUMA, de proposito. A mesma estrutura da caixa (29-checkbox.css),
   com type=radio e circulo - e circulo e o vocabulario universal de radio. A
   escolha ganha a Gota no expand-select e no select-card (4b), que sao radios
   de linha e de cartao; aqui o ponto basta (CONVENCOES §13). Ao toque o raio
   NAO muda: circulo nao tem canto para fechar.

   Decisoes, para ninguem "corrigir":
   - o ponto e um ::after em em, escalado de 0 a 1 em t-base: nao depende do
     pack. Marcado, a borda vai a accent 45% e o fundo a accent 10%: e o
     selecionado do §4, sem a Gota.
   - hover, foco, press (0.90 e adensa) e disabled iguais aos da caixa, por
     inteiro: o hover pelo texto do label levanta o circulo, e o rotulo
     esmaece por irmao (~), sem :has().
   - .aqua-radio-group zera o fieldset, que a base nao zera: coluna com gap
     space-2; --inline poe os radios lado a lado. A legend e .aqua-label, e
     abre espaco por padding, nao por margin: o navegador tira a legend do
     fluxo flex, e o gap nao a alcanca.
   - .aqua-radio__input solto funciona igual, e o expand-select o reaproveita
     dentro da opcao. */
@layer aqua.componente {
	.aqua-radio-group {
		display: flex;
		flex-direction: column;
		gap: var(--aqua-space-2);
		min-width: 0;
		margin: 0;
		padding: 0;
		border: 0;
	}
	.aqua-radio-group--inline { flex-direction: row; flex-wrap: wrap; gap: var(--aqua-space-2) var(--aqua-space-4); }
	.aqua-radio-group > legend { padding: 0 0 var(--aqua-space-2); }

	.aqua-radio {
		display: inline-flex;
		align-items: flex-start;
		gap: var(--aqua-space-2);
		cursor: pointer;
	}
	.aqua-radio__input {
		-webkit-appearance: none;
		appearance: none;
		position: relative;
		flex: none;
		display: inline-grid;
		place-items: center;
		width: calc(var(--aqua-space-4) + var(--aqua-space-1));
		height: calc(var(--aqua-space-4) + var(--aqua-space-1));
		margin: 0;
		font-size: var(--aqua-fs-md);
		border: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border-strong));
		border-radius: var(--aqua-radius-full);
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-rest));
		cursor: pointer;
		transition:
			transform var(--aqua-t-toque) var(--aqua-ease-out),
			backdrop-filter var(--aqua-t-toque) var(--aqua-ease-out),
			background-color var(--aqua-t-rapido) var(--aqua-ease-out),
			border-color var(--aqua-t-rapido) var(--aqua-ease-out),
			filter var(--aqua-t-rapido) var(--aqua-ease-out);
	}
	/* O ponto: cresce de 0 a 1. Nao depende do pack de icones. */
	.aqua-radio__input::after {
		content: "";
		width: 0.5em;
		height: 0.5em;
		border-radius: var(--aqua-radius-full);
		background-color: var(--aqua-escolha-fg);
		transform: scale(0);
		transition: transform var(--aqua-t-base) var(--aqua-ease-out);
	}
	.aqua-radio__input:checked::after { transform: scale(1); }

	/* ---- os cinco estados: no input, e pelo texto do label ------------------------- */
	.aqua-radio__input:hover:not(:disabled),
	.aqua-radio:hover .aqua-radio__input:not(:disabled) {
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-hover));
		transform: translateY(-1px);
	}
	.aqua-radio__input:focus-visible { filter: brightness(1.06); }
	.aqua-radio__input:active:not(:disabled),
	.aqua-radio:active .aqua-radio__input:not(:disabled) {
		transform: translateY(-1px) scale(0.90);
		background-color: rgb(var(--aqua-surface-rgb) / var(--aqua-press-tint));
		-webkit-backdrop-filter: var(--aqua-press-filtro);
		backdrop-filter: var(--aqua-press-filtro);
	}
	.aqua-radio__input:disabled { opacity: 0.5; cursor: not-allowed; transform: none; filter: none; }
	.aqua-radio__input:disabled ~ .aqua-radio__text,
	.aqua-radio__input:disabled ~ .aqua-radio__label { opacity: 0.5; }

	/* ---- marcado: o selecionado do §4, sem a Gota ---------------------------------- */
	.aqua-radio__input:checked {
		border-color: transparent;
		background-color: var(--aqua-escolha-bg);
	}
	.aqua-radio__input:checked:hover:not(:disabled),
	.aqua-radio:hover .aqua-radio__input:checked:not(:disabled) { background-color: var(--aqua-escolha-bg); filter: brightness(0.94); }

	/* ---- o texto ------------------------------------------------------------------ */
	.aqua-radio__text { display: flex; flex-direction: column; min-width: 0; }
	.aqua-radio__label { font-size: var(--aqua-fs-md); line-height: var(--aqua-lh-base); color: var(--aqua-text); }
	.aqua-radio__hint { font-size: var(--aqua-fs-sm); line-height: var(--aqua-lh-base); color: var(--aqua-text-muted); }

	/* ---- tamanho: lista densa ------------------------------------------------------- */
	.aqua-radio--sm .aqua-radio__input { width: var(--aqua-space-4); height: var(--aqua-space-4); font-size: var(--aqua-fs-sm); }
	.aqua-radio--sm .aqua-radio__label { font-size: var(--aqua-fs-sm); }
}

/* ==== 31-toggle.css ==== */
/* 31-toggle.css - aqua-toggle. O interruptor.

   Gota: A GOTA ATRAVESSA A PISTA. O botao da pista e uma Gota de 16px: parte
   da esquerda com o canto afiado embaixo a esquerda (gota-bl), chega na
   direita com ele virado para a parede da direita (gota-br), e ao toque o
   canto fecha contra a parede em que esta - a esquerda em gota-fechado, a
   direita no canto composto de gota-raio e gota-ponta-fechada, que so existe
   desde a 1.10. E a linha do interruptor no CONVENCOES §13. O OToggle e a
   Mare, em tres atos com molas do framer; a Aqua nao tem mola (§7) e tem
   outra ideia.

   Zero JS: um <input type=checkbox role=switch> com appearance none. A pista
   e o input, o botao e o ::before; checked e disabled sao os do navegador.

   Toda medida sai da escala, e o percurso e derivado dela:
     pista 44 por 24 (space-8 + space-3, space-6), borda 1px, botao space-4,
     folga space-1 - 1px: percurso = 42 - 16 - 6 = 20 = space-4 + space-1.
     --sm: pista 36 por 20, botao space-3, folga igual: 34 - 12 - 6 = 16
     = space-4. As duas contas fecham na parede, sem sobra nem corte.

   Decisoes, para ninguem "corrigir":
   - a pista e clicavel (§4), por inteiro: hover sobe o fundo e levanta 1px,
     e passar o mouse no texto levanta a pista; press e scale(0.97), adensa
     (press-tint, --aqua-press-filtro) e o botao fecha o canto; foco clareia
     com o anel da base; disabled a 0.5, sem hover nem press, e o rotulo
     esmaece por irmao (~), sem :has().
   - ligada, a pista e o selecionado do §4: fundo accent 10%, borda accent
     45%, inclusive sob o mouse; o botao vai a accent. Desligada, o botao e
     text-muted: interruptor desligado nao e erro, e estado.
   - --reverse poe o rotulo antes e o interruptor a direita: a linha de
     configuracao; o field --inline faz o mesmo com mais texto. */
@layer aqua.componente {
	.aqua-toggle {
		display: inline-flex;
		align-items: center;
		gap: var(--aqua-space-2);
		cursor: pointer;
	}
	.aqua-toggle--reverse { flex-direction: row-reverse; justify-content: flex-end; }

	/* ---- a pista: o proprio input --------------------------------------------------- */
	.aqua-toggle__input {
		-webkit-appearance: none;
		appearance: none;
		position: relative;
		flex: none;
		width: calc(var(--aqua-space-8) + var(--aqua-space-3));
		height: var(--aqua-space-6);
		margin: 0;
		border: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border-strong));
		border-radius: var(--aqua-radius-full);
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-rest));
		cursor: pointer;
		transition:
			transform var(--aqua-t-toque) var(--aqua-ease-out),
			backdrop-filter var(--aqua-t-toque) var(--aqua-ease-out),
			background-color var(--aqua-t-rapido) var(--aqua-ease-out),
			border-color var(--aqua-t-rapido) var(--aqua-ease-out),
			filter var(--aqua-t-rapido) var(--aqua-ease-out);
	}

	/* ---- o botao: uma Gota que atravessa e vira o canto para a parede ----------------- */
	/* Parte com o canto afiado embaixo a esquerda (gota-bl) e chega com ele virado
	   para a parede da direita (gota-br). O percurso e a largura interna menos o
	   botao e as duas folgas: 42 - 16 - 6. */
	.aqua-toggle__input::before {
		content: "";
		position: absolute;
		top: calc(var(--aqua-space-1) - 1px);
		left: calc(var(--aqua-space-1) - 1px);
		width: var(--aqua-space-4);
		height: var(--aqua-space-4);
		border-radius: var(--aqua-gota-bl);
		background-color: var(--aqua-text-muted);
		transition:
			transform var(--aqua-t-base) var(--aqua-ease-out),
			border-radius var(--aqua-t-base) var(--aqua-ease-out),
			background-color var(--aqua-t-rapido) var(--aqua-ease-out);
	}
	.aqua-toggle__input:checked::before {
		transform: translateX(calc(var(--aqua-space-4) + var(--aqua-space-1)));
		border-radius: var(--aqua-gota-br);
		background-color: var(--aqua-escolha-fg);
	}
	/* Ao toque o canto fecha contra a parede em que esta. A direita precisa do
	   canto composto: gota-fechado so existe para a esquerda. */
	.aqua-toggle__input:active:not(:disabled)::before,
	.aqua-toggle:active .aqua-toggle__input:not(:disabled)::before { border-radius: var(--aqua-gota-fechado); }
	.aqua-toggle__input:checked:active:not(:disabled)::before,
	.aqua-toggle:active .aqua-toggle__input:checked:not(:disabled)::before { border-radius: var(--aqua-gota-raio) var(--aqua-gota-raio) var(--aqua-gota-ponta-fechada) var(--aqua-gota-raio); }

	/* ---- os cinco estados: na pista, e pelo texto do label ---------------------------- */
	.aqua-toggle__input:hover:not(:disabled),
	.aqua-toggle:hover .aqua-toggle__input:not(:disabled) {
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-hover));
		transform: translateY(-1px);
	}
	.aqua-toggle__input:focus-visible { filter: brightness(1.06); }
	.aqua-toggle__input:active:not(:disabled),
	.aqua-toggle:active .aqua-toggle__input:not(:disabled) {
		transform: translateY(-1px) scale(0.97);
		background-color: rgb(var(--aqua-surface-rgb) / var(--aqua-press-tint));
		-webkit-backdrop-filter: var(--aqua-press-filtro);
		backdrop-filter: var(--aqua-press-filtro);
	}
	.aqua-toggle__input:disabled { opacity: 0.5; cursor: not-allowed; transform: none; filter: none; }
	.aqua-toggle__input:disabled ~ .aqua-toggle__label { opacity: 0.5; }

	/* ---- ligada: o selecionado do §4, inclusive sob o mouse ---------------------------- */
	.aqua-toggle__input:checked,
	.aqua-toggle__input:checked:hover:not(:disabled),
	.aqua-toggle:hover .aqua-toggle__input:checked:not(:disabled) {
		border-color: transparent;
		background-color: var(--aqua-escolha-bg);
	}
	.aqua-toggle__input:checked:hover:not(:disabled),
	.aqua-toggle:hover .aqua-toggle__input:checked:not(:disabled) { filter: brightness(0.94); }

	/* ---- o rotulo ------------------------------------------------------------------ */
	.aqua-toggle__label { font-size: var(--aqua-fs-md); line-height: var(--aqua-lh-base); color: var(--aqua-text); }

	/* ---- tamanho: 36 por 20, botao de 12, percurso de 16 --------------------------------- */
	.aqua-toggle--sm .aqua-toggle__input {
		width: calc(var(--aqua-space-8) + var(--aqua-space-1));
		height: calc(var(--aqua-space-4) + var(--aqua-space-1));
	}
	.aqua-toggle--sm .aqua-toggle__input::before { width: var(--aqua-space-3); height: var(--aqua-space-3); }
	.aqua-toggle--sm .aqua-toggle__input:checked::before { transform: translateX(var(--aqua-space-4)); }
	.aqua-toggle--sm .aqua-toggle__label { font-size: var(--aqua-fs-sm); }
}

/* ==== 32-field.css ==== */
/* 32-field.css - aqua-field. O embrulho do campo: rotulo, controle e uma
   linha de apoio que e dica, erro ou contagem.

   Gota: NENHUMA. E layout; quem tem forma e o controle que ele embrulha.

   O OFormField do OCEON treme quando o erro aparece, mostra spinner de
   validacao assincrona e um botao de copiar. Nada disso entra: tremer e
   movimento sem lei (o §7 tem quatro, e nenhuma e tremor), validacao
   assincrona e da aplicacao, e copiar e um aqua-icon-btn ao lado do campo.

   Decisoes, para ninguem "corrigir":
   - o erro NAO muda a cor do rotulo nem do controle: quem marca o controle e
     o aria-invalid dele (24-input.css). O field so mostra a mensagem, e a
     mensagem e texto em text com um ponto danger na frente - cor de sinal e
     ponto, nunca texto (§3, §5), o mesmo tom do badge.
   - aria-describedby liga controle e apoio no HTML; o componente nao faz isso
     por JS. E o HTML que o leitor de tela le.
   - rotulo e dica sao o mesmo text-muted em dois pesos (500 e 400): a
     hierarquia e de peso, nao de cor. Sem text-transform.
   - a contagem e mono tabular em text-muted, e vai a text quando cheia
     (data-aqua-cheio, escrito pelo aqua-ui.js): o numero avisa sem gritar.
   - --inline e a linha de configuracao: texto a esquerda, controle a direita,
     alinhados ao centro. E um <label>, entao clicar no texto aciona o
     controle. O setting-section (4b) empilha estas linhas. */
@layer aqua.componente {
	.aqua-field {
		display: flex;
		flex-direction: column;
		gap: var(--aqua-space-1);
		min-width: 0;
	}
	.aqua-field__header {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--aqua-space-3);
	}
	.aqua-field__label {
		font-size: var(--aqua-fs-sm);
		font-weight: 500;
		line-height: var(--aqua-lh-base);
		color: var(--aqua-text-muted);
	}
	.aqua-field__hint {
		font-size: var(--aqua-fs-sm);
		font-weight: 400;
		line-height: var(--aqua-lh-base);
		color: var(--aqua-text-muted);
	}

	/* ---- o erro: texto em text, com um ponto danger na frente ------------------- */
	.aqua-field__error {
		display: flex;
		align-items: center;
		gap: var(--aqua-space-2);
		font-size: var(--aqua-fs-sm);
		font-weight: 500;
		line-height: var(--aqua-lh-base);
		color: var(--aqua-text);
	}
	.aqua-field__error::before {
		content: "";
		flex: none;
		width: 0.5em;
		height: 0.5em;
		border-radius: var(--aqua-radius-full);
		background-color: var(--aqua-danger);
	}

	/* ---- a contagem: mono tabular; cheia vai a text ------------------------------ */
	.aqua-field__count {
		flex: none;
		font-family: var(--aqua-font-mono);
		font-variant-numeric: tabular-nums;
		font-size: var(--aqua-fs-sm);
		line-height: var(--aqua-lh-base);
		color: var(--aqua-text-muted);
		transition: color var(--aqua-t-rapido) var(--aqua-ease-out);
	}
	.aqua-field__count[data-aqua-cheio] { color: var(--aqua-text); }

	/* ---- --inline: a linha de configuracao ----------------------------------------- */
	.aqua-field--inline {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: var(--aqua-space-4);
	}
	.aqua-field__text {
		display: flex;
		flex-direction: column;
		min-width: 0;
	}
}

/* ==== 33-expand-select.css ==== */
/* 33-expand-select.css - aqua-expand-select. O select que abre no lugar.

   Gota: a OPCAO ESCOLHIDA, como o chip. O gatilho e campo e nao tem
   assinatura; a opcao com o radio marcado recebe o canto da Gota (gota-bl),
   fundo accent 10% e borda accent 45% - a selecao do §13 - por :has(), como
   MELHORIA PROGRESSIVA (§9): apague a regra e o ponto do radio dentro da
   opcao continua marcando a escolha. E o unico :has() da Fase 4a.

   O OExpandSelect abre NO LUGAR, empurrando o conteudo, sem flutuar: e por
   isso que ele fica na 4a e o select na 4b. Um <details> faz isso sozinho: a
   <summary> e o gatilho, a lista e um grupo de radios de verdade
   (30-radio.css). Sem JS abre, fecha e escolhe; com JS (aqua-ui.js) o
   gatilho espelha a escolha, e a lista fecha depois de escolher, com Esc e
   ao clicar fora.

   Fechado, o <details> e a caixa de campo (24-input.css). Aberto ([open]),
   vira VIDRO-2: o fundo e o filtro do nivel, radius-lg e a sombra curta mais
   longa que so o vidro tem. O campo cresce e vira superficie: e o
   "Expansivo" do OCEON, na linguagem daqui. A lista entra por aqua-entrar:
   lei 4, a partir de um gatilho, e nao a proibicao 5.

   Decisoes, para ninguem "corrigir":
   - a summary e clicavel (§4): hover alpha-hover e sobe 1px, press adensa
     pela Lei do Vidro sem fechar canto (nao tem Gota), foco clareia com o
     anel da base. O marcador nativo some.
   - __value e placeholder em text-muted ate data-aqua-escolhido (escrito
     pelo JS), depois a escolha em text. __caret gira 180 graus aberto.
   - a opcao e um <label> com um .aqua-radio__input e o texto: hover
     alpha-hover e levanta o radio como o label do radio faria; o raio
     transiciona em t-base para a Gota migrar VISTA, como no chip.
   - details nao tem disabled: aria-disabled na summary, com pointer-events
     none e opacity 0.5. */
@layer aqua.componente {
	.aqua-expand-select {
		display: block;
		min-width: 0;
		border: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border-strong));
		border-radius: var(--aqua-radius-md);
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-rest));
		color: var(--aqua-text);
		transition:
			border-radius var(--aqua-t-base) var(--aqua-ease-out),
			background-color var(--aqua-t-base) var(--aqua-ease-out),
			border-color var(--aqua-t-base) var(--aqua-ease-out),
			box-shadow var(--aqua-t-base) var(--aqua-ease-out);
	}
	/* Aberto vira vidro-2: o campo cresce e vira superficie. */
	.aqua-expand-select[open] {
		border-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border));
		border-radius: var(--aqua-radius-lg);
		background-color: var(--aqua-vidro-2-bg);
		-webkit-backdrop-filter: var(--aqua-vidro-2-filtro);
		backdrop-filter: var(--aqua-vidro-2-filtro);
		box-shadow:
			inset 0 1px 0 rgb(var(--aqua-white-rgb) / 7%),
			0 1px 2px rgb(var(--aqua-black-rgb) / 20%),
			0 12px 32px -12px rgb(var(--aqua-black-rgb) / 40%);
	}

	/* ---- o gatilho: a summary, clicavel por inteiro ------------------------------------ */
	.aqua-expand-select__trigger {
		display: flex;
		align-items: center;
		gap: var(--aqua-space-2);
		padding: var(--aqua-space-2) var(--aqua-space-4);
		border-radius: inherit;
		list-style: none;
		font-size: var(--aqua-fs-md);
		line-height: var(--aqua-lh-base);
		cursor: pointer;
		transition:
			transform var(--aqua-t-toque) var(--aqua-ease-out),
			border-radius var(--aqua-t-base) var(--aqua-ease-out),
			backdrop-filter var(--aqua-t-toque) var(--aqua-ease-out),
			background-color var(--aqua-t-rapido) var(--aqua-ease-out),
			filter var(--aqua-t-rapido) var(--aqua-ease-out);
	}
	.aqua-expand-select__trigger::-webkit-details-marker { display: none; }
	.aqua-expand-select[open] > .aqua-expand-select__trigger { border-radius: var(--aqua-radius-lg) var(--aqua-radius-lg) 0 0; }
	.aqua-expand-select__trigger:hover {
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-hover));
		transform: translateY(-1px);
	}
	.aqua-expand-select__trigger:focus-visible { filter: brightness(1.06); }
	.aqua-expand-select__trigger:active {
		transform: translateY(-1px) scale(0.97);
		background-color: rgb(var(--aqua-surface-rgb) / var(--aqua-press-tint));
		-webkit-backdrop-filter: var(--aqua-press-filtro);
		backdrop-filter: var(--aqua-press-filtro);
	}
	.aqua-expand-select__trigger[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; transform: none; filter: none; }

	.aqua-expand-select__icon { flex: none; width: 1.15em; height: 1.15em; color: var(--aqua-text-muted); }
	.aqua-expand-select__value {
		flex: 1 1 auto;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: var(--aqua-text-muted);
	}
	.aqua-expand-select[data-aqua-escolhido] .aqua-expand-select__value { color: var(--aqua-text); }
	.aqua-expand-select__caret {
		flex: none;
		width: 1em;
		height: 1em;
		color: var(--aqua-text-muted);
		transition: transform var(--aqua-t-base) var(--aqua-ease-out);
	}
	.aqua-expand-select[open] > .aqua-expand-select__trigger .aqua-expand-select__caret { transform: rotate(180deg); }

	/* ---- a lista: entra a partir do gatilho (lei 4) ----------------------------------- */
	.aqua-expand-select__list {
		display: flex;
		flex-direction: column;
		gap: var(--aqua-space-1);
		padding: 0 var(--aqua-space-1) var(--aqua-space-1);
	}
	.aqua-expand-select[open] > .aqua-expand-select__list {
		transform-origin: 50% 0%;
		animation: aqua-entrar var(--aqua-t-base) var(--aqua-ease-out) both;
	}

	/* ---- a opcao: um label com o radio e o texto ---------------------------------------- */
	.aqua-expand-select__option {
		display: flex;
		align-items: center;
		gap: var(--aqua-space-3);
		padding: var(--aqua-space-2) var(--aqua-space-3);
		border: 1px solid transparent;
		border-radius: var(--aqua-radius-xs);
		cursor: pointer;
		transition:
			border-radius var(--aqua-t-base) var(--aqua-ease-out),
			background-color var(--aqua-t-rapido) var(--aqua-ease-out),
			border-color var(--aqua-t-rapido) var(--aqua-ease-out);
	}
	.aqua-expand-select__option:hover { background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-hover)); }
	.aqua-expand-select__option:hover .aqua-radio__input:not(:disabled) {
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-hover));
		transform: translateY(-1px);
	}
	.aqua-expand-select__text { display: flex; flex-direction: column; min-width: 0; }
	.aqua-expand-select__label { font-size: var(--aqua-fs-md); line-height: var(--aqua-lh-base); color: var(--aqua-text); }
	.aqua-expand-select__hint { font-size: var(--aqua-fs-sm); line-height: var(--aqua-lh-base); color: var(--aqua-text-muted); }

	/* ---- a Gota, como melhoria progressiva: sem :has(), o ponto do radio ainda marca ---- */
	.aqua-expand-select__option:has(:checked),
	.aqua-expand-select__option:has(:checked):hover {
		border-color: transparent;
		background-color: var(--aqua-selecao-bg);
		box-shadow: var(--aqua-selecao-sombra);
	}
}

/* ==== 34-select.css ==== */
/* 34-select.css - aqua-select, o select que flutua; e aqua-opcoes, a lista que
   select, combobox, filter-select e column-picker repartem.

   Gota: a OPCAO ESCOLHIDA, como o chip e o expand-select. O gatilho e campo e
   e quieto; a opcao com aria-selected recebe o canto da Gota (gota-bl), fundo
   accent 10% e borda accent 45% - a selecao do §13. NAO ha check: a Gota mais
   o selecionado ja marcam a escolha, e aria-selected diz ao leitor de tela. O
   check accent do OCEON existe porque la a selecao nao tem forma propria;
   aqui seriam dois marcadores para uma informacao.

   A ideia com nome: UMA FORMA DE LISTA, NAO QUATRO. aqua-opcoes e para os
   quatro campos que flutuam o que a caixa de campo (24-input.css) e para os
   que se digitam: vidro-2, radius-lg, a sombra que so o vidro tem, space-1 de
   gap e de padding, e o item num canto CONCENTRICO com o da lista. O OCEON
   desenha a lista tres vezes; a Aqua desenha uma e as folhas 35, 36 e 37 a
   repetem por texto, nunca por copia.

   O CANTO DO ITEM E CONCENTRICO, e isto mudou em 2026-09-23. Ate essa data
   ele era radius-xs, 11px, dentro de uma lista de radius-lg, 25px, com
   space-1 de recuo: o canto certo e 25 menos 4, ou seja 21px, e o item ficava
   10px quadrado demais. Dois circulos so parecem encaixados quando o de
   dentro tem o raio do de fora MENOS a distancia entre eles; com qualquer
   outro numero o olho ve duas curvas a brigar, e foi assim que o dono o
   descreveu: "o arredondamento fica imperfeito e nao fica nada moderno". O
   raio sai agora de --aqua-opcoes-raio-item, calculado na lista, para nao
   haver um numero a copiar em cada folha que a repete.

   O mecanismo e o flutuante do §10 (aqua-ui.js): a lista sai para o body
   enquanto aberta, e por isso:
   - a lista esconde por regra explicita ([hidden] { display: none }): o
     atributo perde para o display da camada;
   - tamanho da lista e modificador DA LISTA (aqua-opcoes--sm), nunca
     descendente do select: aberta, ela nao e descendente de nada;
   - o padding de space-1 e o que deixa o anel de foco do item (2px + 2px de
     offset) caber dentro do overflow: auto sem ser cortado.

   Decisoes, para ninguem "corrigir":
   - o gatilho e a caixa de campo da 4a, e e clicavel como a summary do
     expand-select: hover alpha-hover e sobe 1px, press adensa sem fechar
     canto (nao tem Gota), foco clareia com o anel da base. Aberto, clareia e
     o caret gira 180 graus.
   - __value e placeholder em text-muted ate data-aqua-escolhido (escrito
     pelo JS), depois a escolha em text. O valor real vai no __hidden, um
     <input type="hidden">, que e o que o formulario envia.
   - a largura e do layout: inline-block por padrao, --block estica. Um
     select com largura propria de conteudo pula quando a escolha muda.
   - item ativo por teclado sem foco (data-aqua-ativo, o aria-activedescendant
     do combobox) tem o mesmo fundo do hover e clareia: e o "onde estou" sem
     roubar o foco da busca.
   - __vazio e a linha de nada encontrado: texto, sem hover, sem cursor. */
@layer aqua.componente {
	/* ---- a lista: uma forma para os quatro que flutuam ---------------------------- */
	.aqua-opcoes {
		/* O recuo e o raio da lista sao as duas metades do canto do item: ele nasce do primeiro
		   subtraido ao segundo, e por isso os tres vivem juntos. Mudar o raio da lista sem mexer
		   em mais nada continua a dar um item encaixado. */
		--aqua-opcoes-recuo: var(--aqua-space-1);
		--aqua-opcoes-raio-item: calc(var(--aqua-radius-lg) - var(--aqua-opcoes-recuo));
		display: flex;
		flex-direction: column;
		gap: var(--aqua-space-1);
		min-width: 0;
		max-height: calc(var(--aqua-space-12) * 6);
		padding: var(--aqua-opcoes-recuo);
		overflow-y: auto;
		border: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border));
		border-radius: var(--aqua-radius-lg);
		background: var(--aqua-vidro-2-bg);
		-webkit-backdrop-filter: var(--aqua-vidro-2-filtro);
		backdrop-filter: var(--aqua-vidro-2-filtro);
		box-shadow:
			inset 0 1px 0 rgb(var(--aqua-white-rgb) / 7%),
			0 1px 2px rgb(var(--aqua-black-rgb) / 20%),
			0 12px 32px -12px rgb(var(--aqua-black-rgb) / 40%);
		color: var(--aqua-text);
	}
	.aqua-opcoes[hidden] { display: none; }

	.aqua-opcoes__item {
		display: flex;
		align-items: center;
		gap: var(--aqua-space-3);
		flex: none;
		width: 100%;
		padding: var(--aqua-space-2) var(--aqua-space-3);
		border: 1px solid transparent;
		border-radius: var(--aqua-opcoes-raio-item);
		background: none;
		color: var(--aqua-text);
		font-size: var(--aqua-fs-md);
		line-height: var(--aqua-lh-base);
		text-align: left;
		cursor: pointer;
		transition:
			transform var(--aqua-t-toque) var(--aqua-ease-out),
			border-radius var(--aqua-t-base) var(--aqua-ease-out),
			backdrop-filter var(--aqua-t-toque) var(--aqua-ease-out),
			background-color var(--aqua-t-rapido) var(--aqua-ease-out),
			border-color var(--aqua-t-rapido) var(--aqua-ease-out),
			filter var(--aqua-t-rapido) var(--aqua-ease-out);
	}
	.aqua-opcoes__item[hidden] { display: none; }
	.aqua-opcoes__item:hover,
	.aqua-opcoes__item[data-aqua-ativo] { background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-hover)); }
	.aqua-opcoes__item:hover { transform: translateY(-1px); }
	.aqua-opcoes__item:focus-visible,
	.aqua-opcoes__item[data-aqua-ativo] { filter: brightness(1.06); }
	.aqua-opcoes__item:active {
		transform: translateY(-1px) scale(0.97);
		border-radius: var(--aqua-radius-btn-fechado);
		background-color: rgb(var(--aqua-surface-rgb) / var(--aqua-press-tint));
		-webkit-backdrop-filter: var(--aqua-press-filtro);
		backdrop-filter: var(--aqua-press-filtro);
	}
	.aqua-opcoes__item:disabled,
	.aqua-opcoes__item[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; filter: none; }

	/* A escolhida: a Gota migra para ca. Sob o mouse continua escolhida. */
	.aqua-opcoes__item[aria-selected="true"],
	.aqua-opcoes__item[aria-selected="true"]:hover,
	.aqua-opcoes__item[aria-selected="true"][data-aqua-ativo] {
		border-color: transparent;
		background-color: var(--aqua-selecao-bg);
		box-shadow: var(--aqua-selecao-sombra);
	}
	.aqua-opcoes__item[aria-selected="true"]:active { border-radius: var(--aqua-radius-btn-fechado); }

	.aqua-opcoes__icon { flex: none; width: 1.15em; height: 1.15em; color: var(--aqua-text-muted); }
	.aqua-opcoes__item[aria-selected="true"] .aqua-opcoes__icon { color: var(--aqua-text); }
	.aqua-opcoes__text { display: flex; flex-direction: column; min-width: 0; }
	.aqua-opcoes__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--aqua-text); }
	.aqua-opcoes__hint { font-size: var(--aqua-fs-sm); line-height: var(--aqua-lh-base); color: var(--aqua-text-muted); }
	.aqua-opcoes__vazio {
		padding: var(--aqua-space-2) var(--aqua-space-3);
		font-size: var(--aqua-fs-sm);
		line-height: var(--aqua-lh-base);
		color: var(--aqua-text-muted);
	}
	.aqua-opcoes__vazio[hidden] { display: none; }

	.aqua-opcoes--sm .aqua-opcoes__item { padding: var(--aqua-space-1) var(--aqua-space-3); font-size: var(--aqua-fs-sm); }

	/* ---- o que a lista ganhou na Fase 5, para servir de menu e de paleta ---------- */
	/* O separador e uma linha fina que nao encosta nas bordas: a largura sai
	   do proprio elemento, sem margem, e o gap da lista da o ar em volta. */
	.aqua-opcoes__separator {
		flex: none;
		align-self: center;
		width: calc(100% - 2 * var(--aqua-space-2));
		height: 1px;
		margin: 0;
		border: 0;
		background: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border));
	}
	/* Tom so em acao (§1): o item de menu e acao, e --danger e o unico tom. */
	.aqua-opcoes__item--danger,
	.aqua-opcoes__item--danger .aqua-opcoes__icon,
	.aqua-opcoes__item--danger .aqua-opcoes__label { color: var(--aqua-danger); }

	/* Rotulo de grupo (paleta): fs-sm 500 text-muted, sem caixa alta (proibicao 1). */
	.aqua-opcoes__group {
		flex: none;
		padding: var(--aqua-space-2) var(--aqua-space-3) var(--aqua-space-1);
		font-size: var(--aqua-fs-sm);
		font-weight: 500;
		line-height: var(--aqua-lh-base);
		color: var(--aqua-text-muted);
	}
	.aqua-opcoes__group[hidden] { display: none; }
	/* O atalho do item (paleta): o <kbd> da base, empurrado para a direita. */
	.aqua-opcoes__kbd { flex: none; margin-left: auto; }
	/* ---- o select: um gatilho que e caixa de campo, e a lista acima ---------------- */
	.aqua-select { display: inline-block; vertical-align: middle; min-width: 0; }
	.aqua-select--block { display: block; width: 100%; }

	.aqua-select__trigger {
		display: flex;
		align-items: center;
		gap: var(--aqua-space-2);
		width: 100%;
		min-width: 0;
		padding: var(--aqua-space-2) var(--aqua-space-4);
		border: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border-strong));
		border-radius: var(--aqua-radius-md);
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-rest));
		color: var(--aqua-text);
		font-size: var(--aqua-fs-md);
		line-height: var(--aqua-lh-base);
		text-align: left;
		cursor: pointer;
		transition:
			transform var(--aqua-t-toque) var(--aqua-ease-out),
			backdrop-filter var(--aqua-t-toque) var(--aqua-ease-out),
			background-color var(--aqua-t-rapido) var(--aqua-ease-out),
			border-color var(--aqua-t-rapido) var(--aqua-ease-out),
			filter var(--aqua-t-rapido) var(--aqua-ease-out);
	}
	.aqua-select__trigger:hover {
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-hover));
		transform: translateY(-1px);
	}
	.aqua-select__trigger:focus-visible,
	.aqua-select__trigger[aria-expanded="true"] { filter: brightness(1.06); }
	.aqua-select__trigger[aria-expanded="true"] { background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-hover)); }
	.aqua-select__trigger:active {
		transform: translateY(-1px) scale(0.97);
		background-color: rgb(var(--aqua-surface-rgb) / var(--aqua-press-tint));
		-webkit-backdrop-filter: var(--aqua-press-filtro);
		backdrop-filter: var(--aqua-press-filtro);
	}
	.aqua-select__trigger[aria-invalid="true"],
	.aqua-select__trigger[aria-invalid="true"]:focus-visible { border-color: rgb(var(--aqua-danger-rgb) / 60%); }
	.aqua-select__trigger:disabled,
	.aqua-select__trigger[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; filter: none; }

	.aqua-select__icon { flex: none; width: 1.15em; height: 1.15em; color: var(--aqua-text-muted); }
	.aqua-select__value {
		flex: 1 1 auto;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: var(--aqua-text-muted);
	}
	.aqua-select[data-aqua-escolhido] .aqua-select__value { color: var(--aqua-text); }
	.aqua-select__caret {
		flex: none;
		width: 1em;
		height: 1em;
		color: var(--aqua-text-muted);
		transition: transform var(--aqua-t-base) var(--aqua-ease-out);
	}
	.aqua-select__trigger[aria-expanded="true"] .aqua-select__caret { transform: rotate(180deg); }

	/* ---- tamanho: os degraus do input ---------------------------------------------- */
	.aqua-select--sm .aqua-select__trigger { padding: var(--aqua-space-1) var(--aqua-space-3); font-size: var(--aqua-fs-sm); }
}

/* ==== 35-combobox.css ==== */
/* 35-combobox.css - aqua-combobox. O select com busca.

   Gota: a OPCAO ESCOLHIDA, a mesma do select (34-select.css). O gatilho e
   campo e e quieto; a busca dentro do painel e o aqua-search da 4a, chao
   quieto; so a opcao com aria-selected carrega o canto da Gota.

   A ideia com nome: A BUSCA MORA NA LISTA. Nao e um campo que vira lista ao
   digitar (o combobox de formulario, que confunde "o que escrevi" com "o que
   escolhi"): e o select, com uma busca dentro do painel para achar a opcao
   quando sao muitas. O gatilho continua mostrando so a escolha, e o
   formulario recebe so o valor do hidden. O foco vai para a busca ao abrir e
   fica nela: as opcoes nao recebem foco, o teclado as percorre por
   aria-activedescendant (data-aqua-ativo e o "onde estou" visivel).

   O painel repete por texto a lista do 34-select.css: vidro-2, radius-lg, a
   sombra do vidro, space-1 de padding e de gap. A lista aqua-opcoes dentro
   dele PERDE o proprio vidro: o painel e o vidro, e vidro dentro de vidro do
   mesmo nivel e o que o §6 proibe compor. A busca em --sm dentro do painel
   tem radius-md (18px) a 4px do canto de 24px do painel: concentrica.

   Decisoes, para ninguem "corrigir":
   - filtra por rotulo E por dica, sem acento e sem caixa: "fuzil" acha
     "Carbine Rifle" se a dica disser fuzil. Quando nada casa, __vazio
     aparece; nunca uma lista em branco.
   - Home e End vao as pontas da lista SO com a busca vazia; com texto, movem
     o cursor, como em todo campo. Roubar Home e End de quem edita a busca e
     bug de acessibilidade, nao atalho.
   - Esc fecha e devolve o foco ao gatilho (o flutuante); ao fechar, a busca
     esvazia e o filtro se desfaz, para a proxima abertura mostrar tudo.
   - o gatilho tem os estados da summary do expand-select: hover sobe 1px,
     press adensa sem fechar canto, foco clareia com o anel, aberto clareia e
     o caret gira. Invalido e disabled sao atributos do gatilho. */
@layer aqua.componente {
	.aqua-combobox { display: inline-block; vertical-align: middle; min-width: 0; }
	.aqua-combobox--block { display: block; width: 100%; }

	/* ---- o gatilho: a caixa de campo, clicavel ------------------------------------ */
	.aqua-combobox__trigger {
		display: flex;
		align-items: center;
		gap: var(--aqua-space-2);
		width: 100%;
		min-width: 0;
		padding: var(--aqua-space-2) var(--aqua-space-4);
		border: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border-strong));
		border-radius: var(--aqua-radius-md);
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-rest));
		color: var(--aqua-text);
		font-size: var(--aqua-fs-md);
		line-height: var(--aqua-lh-base);
		text-align: left;
		cursor: pointer;
		transition:
			transform var(--aqua-t-toque) var(--aqua-ease-out),
			backdrop-filter var(--aqua-t-toque) var(--aqua-ease-out),
			background-color var(--aqua-t-rapido) var(--aqua-ease-out),
			border-color var(--aqua-t-rapido) var(--aqua-ease-out),
			filter var(--aqua-t-rapido) var(--aqua-ease-out);
	}
	.aqua-combobox__trigger:hover {
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-hover));
		transform: translateY(-1px);
	}
	.aqua-combobox__trigger:focus-visible,
	.aqua-combobox__trigger[aria-expanded="true"] { filter: brightness(1.06); }
	.aqua-combobox__trigger[aria-expanded="true"] { background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-hover)); }
	.aqua-combobox__trigger:active {
		transform: translateY(-1px) scale(0.97);
		background-color: rgb(var(--aqua-surface-rgb) / var(--aqua-press-tint));
		-webkit-backdrop-filter: var(--aqua-press-filtro);
		backdrop-filter: var(--aqua-press-filtro);
	}
	.aqua-combobox__trigger[aria-invalid="true"],
	.aqua-combobox__trigger[aria-invalid="true"]:focus-visible { border-color: rgb(var(--aqua-danger-rgb) / 60%); }
	.aqua-combobox__trigger:disabled,
	.aqua-combobox__trigger[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; filter: none; }

	.aqua-combobox__icon { flex: none; width: 1.15em; height: 1.15em; color: var(--aqua-text-muted); }
	.aqua-combobox__value {
		flex: 1 1 auto;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: var(--aqua-text-muted);
	}
	.aqua-combobox[data-aqua-escolhido] .aqua-combobox__value { color: var(--aqua-text); }
	.aqua-combobox__caret {
		flex: none;
		width: 1em;
		height: 1em;
		color: var(--aqua-text-muted);
		transition: transform var(--aqua-t-base) var(--aqua-ease-out);
	}
	.aqua-combobox__trigger[aria-expanded="true"] .aqua-combobox__caret { transform: rotate(180deg); }

	/* ---- o painel: a busca em cima, a lista embaixo, um vidro so ---------------------- */
	.aqua-combobox__panel {
		display: flex;
		flex-direction: column;
		gap: var(--aqua-space-1);
		min-width: 0;
		padding: var(--aqua-space-1);
		border: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border));
		border-radius: var(--aqua-radius-lg);
		background: var(--aqua-vidro-2-bg);
		-webkit-backdrop-filter: var(--aqua-vidro-2-filtro);
		backdrop-filter: var(--aqua-vidro-2-filtro);
		box-shadow:
			inset 0 1px 0 rgb(var(--aqua-white-rgb) / 7%),
			0 1px 2px rgb(var(--aqua-black-rgb) / 20%),
			0 12px 32px -12px rgb(var(--aqua-black-rgb) / 40%);
		color: var(--aqua-text);
	}
	.aqua-combobox__panel[hidden] { display: none; }
	.aqua-combobox__panel > .aqua-search { flex: none; }
	/* A lista dentro do painel perde o proprio vidro: o painel e o vidro. */
	.aqua-combobox__panel > .aqua-opcoes {
		flex: 1 1 auto;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		box-shadow: none;
	}

	/* ---- tamanho: os degraus do input; a lista e a busca levam o proprio --sm ---------- */
	.aqua-combobox--sm .aqua-combobox__trigger { padding: var(--aqua-space-1) var(--aqua-space-3); font-size: var(--aqua-fs-sm); }
}

/* ==== 36-filter-select.css ==== */
/* 36-filter-select.css - aqua-filter-select. O select de uma barra de filtros.

   Gota: HERDADA do select (34-select.css): a opcao escolhida a carrega. O
   gatilho continua sem assinatura.

   A ideia com nome: O FILTRO ATIVO ACENDE. Numa barra de filtros a pergunta
   nao e "o que este campo vale", e "quais filtros estao agindo". Por isso,
   quando ha escolha (data-aqua-escolhido, escrito pelo JS do select), o
   gatilho inteiro recebe o selecionado do §4 - fundo accent 10%, borda
   accent 45% - e o icone vai a accent. O select comum nao faz isso: um campo
   de formulario preenchido nao e um estado, um filtro agindo e.

   E uma CASCA sobre o aqua-select: o HTML leva as duas classes
   (aqua-select aqua-filter-select), o JS e o do select, a lista e a
   aqua-opcoes com --sm. Zero JS proprio. O OFilterSelect e isso mesmo: 37
   linhas, um OSelect size=sm com um icone a esquerda. A contagem que a
   evidencia do inventario prometia nao existia la; aqui ela entra como
   parte OPCIONAL (__contagem, um aqua-badge--count), porque numa barra de
   filtros ela e util - filtros ativos ou resultados, quem decide e a
   aplicacao - e some por [hidden] quando nao ha o que contar.

   Decisoes, para ninguem "corrigir":
   - o tamanho pequeno e da casca, nao um --sm a mais: filtro e sempre
     pequeno, e a lista leva o proprio aqua-opcoes--sm porque flutua.
   - a contagem fica entre o valor e o caret, em fs-xs mono: le-se como
     numero, nao como parte do rotulo. */
@layer aqua.componente {
	.aqua-filter-select .aqua-select__trigger {
		gap: var(--aqua-space-2);
		padding: var(--aqua-space-1) var(--aqua-space-3);
		font-size: var(--aqua-fs-sm);
		font-weight: 500;
	}

	/* ---- o filtro ativo acende: o selecionado do §4 no gatilho inteiro -------------- */
	.aqua-filter-select[data-aqua-escolhido] .aqua-select__trigger,
	.aqua-filter-select[data-aqua-escolhido] .aqua-select__trigger:hover {
		color: var(--aqua-escolha-fg);
		border-color: transparent;
		background-color: var(--aqua-escolha-bg);
	}
	.aqua-filter-select[data-aqua-escolhido] .aqua-select__trigger:hover { filter: brightness(0.94); }
	.aqua-filter-select[data-aqua-escolhido] .aqua-select__icon,
	.aqua-filter-select[data-aqua-escolhido] .aqua-select__value,
	.aqua-filter-select[data-aqua-escolhido] .aqua-select__caret { color: var(--aqua-escolha-fg); }

	/* ---- a contagem: opcional, entre o valor e o caret ------------------------------- */
	.aqua-filter-select__contagem { flex: none; }
	.aqua-filter-select__contagem[hidden] { display: none; }
}

/* ==== 37-column-picker.css ==== */
/* 37-column-picker.css - aqua-column-picker. O catalogo em duas colunas.

   Gota: a OPCAO ESCOLHIDA, como no select (34-select.css). O grupo ativo do
   trilho marca por fundo e borda, SEM a Gota: o trilho filtra, nao escolhe.
   Entre o grupo aceso a esquerda e a opcao escolhida a direita, a unica
   diferenca de forma e o canto afiado - e e isso que diz qual dos dois e a
   escolha.

   A ideia com nome: O CATALOGO ABRE NO GRUPO DA ESCOLHA. Lido no
   OColumnPicker real: um painel com trilho de grupos a esquerda e as opcoes
   do grupo a direita, contagem por grupo. Nao e uma escolha de colunas
   visiveis de tabela, como a evidencia do inventario dizia desde a
   auditoria; a task corrigiu a linha. O que a Aqua acrescenta: ao abrir, o
   grupo que contem a escolha atual e o que esta aberto, entao quem volta ao
   catalogo ve onde estava.

   O painel repete por texto a lista do 34-select.css: vidro-2, radius-lg, a
   sombra do vidro, space-1 de padding. Tem largura PROPRIA (space-12 vezes
   9), entao usa largura: "auto" do flutuante. As listas dentro dele perdem o
   proprio vidro, como no combobox: o painel e o vidro.

   Semantica: os grupos sao role=tab num tablist vertical, cada um
   controlando a lista (role=listbox) do seu grupo. Setas para cima e para
   baixo trocam de grupo; seta para a direita entra na lista; seta para a
   esquerda volta ao grupo. E o padrao tabs mais o padrao listbox, um ao lado
   do outro, sem inventar teclado.

   Decisoes, para ninguem "corrigir":
   - a contagem por grupo e escrita pelo JS a partir das opcoes reais: um
     numero escrito a mao mente na segunda semana.
   - o trilho tem uma linha fina a direita (alpha-border), nao uma segunda
     superficie: sao duas colunas do mesmo vidro.
   - o gatilho tem os estados da summary do expand-select: hover sobe 1px,
     press adensa, foco clareia com o anel, aberto clareia e o caret gira. */
@layer aqua.componente {
	.aqua-column-picker { display: inline-block; vertical-align: middle; min-width: 0; }
	.aqua-column-picker--block { display: block; width: 100%; }

	/* ---- o gatilho: a caixa de campo, clicavel ------------------------------------ */
	.aqua-column-picker__trigger {
		display: flex;
		align-items: center;
		gap: var(--aqua-space-2);
		width: 100%;
		min-width: 0;
		padding: var(--aqua-space-2) var(--aqua-space-4);
		border: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border-strong));
		border-radius: var(--aqua-radius-md);
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-rest));
		color: var(--aqua-text);
		font-size: var(--aqua-fs-md);
		line-height: var(--aqua-lh-base);
		text-align: left;
		cursor: pointer;
		transition:
			transform var(--aqua-t-toque) var(--aqua-ease-out),
			backdrop-filter var(--aqua-t-toque) var(--aqua-ease-out),
			background-color var(--aqua-t-rapido) var(--aqua-ease-out),
			border-color var(--aqua-t-rapido) var(--aqua-ease-out),
			filter var(--aqua-t-rapido) var(--aqua-ease-out);
	}
	.aqua-column-picker__trigger:hover {
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-hover));
		transform: translateY(-1px);
	}
	.aqua-column-picker__trigger:focus-visible,
	.aqua-column-picker__trigger[aria-expanded="true"] { filter: brightness(1.06); }
	.aqua-column-picker__trigger[aria-expanded="true"] { background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-hover)); }
	.aqua-column-picker__trigger:active {
		transform: translateY(-1px) scale(0.97);
		background-color: rgb(var(--aqua-surface-rgb) / var(--aqua-press-tint));
		-webkit-backdrop-filter: var(--aqua-press-filtro);
		backdrop-filter: var(--aqua-press-filtro);
	}
	.aqua-column-picker__trigger[aria-invalid="true"],
	.aqua-column-picker__trigger[aria-invalid="true"]:focus-visible { border-color: rgb(var(--aqua-danger-rgb) / 60%); }
	.aqua-column-picker__trigger:disabled,
	.aqua-column-picker__trigger[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; filter: none; }

	.aqua-column-picker__icon { flex: none; width: 1.15em; height: 1.15em; color: var(--aqua-text-muted); }
	.aqua-column-picker__value {
		flex: 1 1 auto;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: var(--aqua-text-muted);
	}
	.aqua-column-picker[data-aqua-escolhido] .aqua-column-picker__value { color: var(--aqua-text); }
	.aqua-column-picker__caret {
		flex: none;
		width: 1em;
		height: 1em;
		color: var(--aqua-text-muted);
		transition: transform var(--aqua-t-base) var(--aqua-ease-out);
	}
	.aqua-column-picker__trigger[aria-expanded="true"] .aqua-column-picker__caret { transform: rotate(180deg); }

	/* ---- o painel: duas colunas do mesmo vidro ------------------------------------ */
	.aqua-column-picker__panel {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		width: calc(var(--aqua-space-12) * 9);
		max-width: 100vw;
		min-width: 0;
		border: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border));
		border-radius: var(--aqua-radius-lg);
		background: var(--aqua-vidro-2-bg);
		-webkit-backdrop-filter: var(--aqua-vidro-2-filtro);
		backdrop-filter: var(--aqua-vidro-2-filtro);
		box-shadow:
			inset 0 1px 0 rgb(var(--aqua-white-rgb) / 7%),
			0 1px 2px rgb(var(--aqua-black-rgb) / 20%),
			0 12px 32px -12px rgb(var(--aqua-black-rgb) / 40%);
		color: var(--aqua-text);
	}
	.aqua-column-picker__panel[hidden] { display: none; }

	/* ---- o trilho de grupos: filtra, nao escolhe ------------------------------------ */
	.aqua-column-picker__groups {
		display: flex;
		flex-direction: column;
		gap: var(--aqua-space-1);
		min-width: calc(var(--aqua-space-12) * 3);
		max-height: calc(var(--aqua-space-12) * 6);
		padding: var(--aqua-space-1);
		overflow-y: auto;
		border-right: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border));
	}
	.aqua-column-picker__group {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--aqua-space-2);
		flex: none;
		padding: var(--aqua-space-2) var(--aqua-space-3);
		border: 1px solid transparent;
		border-radius: var(--aqua-radius-xs);
		background: none;
		color: var(--aqua-text-muted);
		font-size: var(--aqua-fs-sm);
		font-weight: 500;
		line-height: var(--aqua-lh-base);
		text-align: left;
		white-space: nowrap;
		cursor: pointer;
		transition:
			transform var(--aqua-t-toque) var(--aqua-ease-out),
			backdrop-filter var(--aqua-t-toque) var(--aqua-ease-out),
			background-color var(--aqua-t-rapido) var(--aqua-ease-out),
			border-color var(--aqua-t-rapido) var(--aqua-ease-out),
			color var(--aqua-t-rapido) var(--aqua-ease-out),
			filter var(--aqua-t-rapido) var(--aqua-ease-out);
	}
	.aqua-column-picker__group:hover {
		color: var(--aqua-text);
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-hover));
		transform: translateY(-1px);
	}
	.aqua-column-picker__group:focus-visible { filter: brightness(1.06); }
	.aqua-column-picker__group:active {
		transform: translateY(-1px) scale(0.97);
		background-color: rgb(var(--aqua-surface-rgb) / var(--aqua-press-tint));
		-webkit-backdrop-filter: var(--aqua-press-filtro);
		backdrop-filter: var(--aqua-press-filtro);
	}
	.aqua-column-picker__group:disabled,
	.aqua-column-picker__group[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; filter: none; }
	/* O grupo ativo: o selecionado do §4, sem a Gota. */
	.aqua-column-picker__group[aria-selected="true"],
	.aqua-column-picker__group[aria-selected="true"]:hover {
		color: var(--aqua-text);
		border-color: transparent;
		background-color: var(--aqua-selecao-bg);
		box-shadow: var(--aqua-selecao-sombra);
	}
	.aqua-column-picker__count { flex: none; }

	/* ---- as listas: a aqua-opcoes do grupo aberto, sem vidro proprio ------------------ */
	.aqua-column-picker__lists { display: flex; flex-direction: column; min-width: 0; padding: var(--aqua-space-1); }
	.aqua-column-picker__lists > .aqua-opcoes {
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		box-shadow: none;
	}
}

/* ==== 38-slider.css ==== */
/* 38-slider.css - aqua-slider. O valor continuo.

   Gota: A ALCA E UMA GOTA QUE VIRA O CANTO PARA A PAREDE MAIS PROXIMA, a
   mesma lei do interruptor e do segmented, aplicada a valor continuo. Na
   metade de baixo da escala o canto afiado e o inferior-esquerdo (gota-bl):
   a alca olha para o minimo, de onde veio. Na metade de cima e o
   inferior-direito (gota-br): olha para o maximo, para onde vai. A virada
   acontece em t-base, e ao arrastar o canto fecha (gota-ponta-fechada), como
   o press de todo mundo. Tem 20px: cabe no limite do §13.

   A ideia com nome: TRILHO FINO, VALOR AO LADO. O trilho e uma linha de
   space-2 em radius-full, preenchida em accent a esquerda da alca; o valor
   vai num <output> com a cara do aqua-badge--count, ao lado, nunca dentro.
   A barra grossa de 52px com o numero dentro e a ideia do OCEON ("Faixa"),
   com nome; copiar ideia com nome e o que a 4a recusou tres vezes.

   E um <input type="range"> com appearance none: arrastar, teclado (setas,
   Home, End, PageUp, PageDown), aria-valuenow, toque e envio de formulario
   vem do navegador. O OCEON reimplementa isso em 250 linhas com pointer
   capture; aqui o JS e uma linha, que escreve --aqua-slider-pct a partir de
   value, min e max, e dela o CSS deriva TUDO:
   - o preenchimento do trilho e um gradiente FUNCIONAL (to right, com a
     parada em --aqua-slider-pct), nao a proibicao 6: ele e o valor;
   - o lado da Gota sai de clamp() sobre a mesma porcentagem, sem um segundo
     atributo. clamp(ponta, (pct - 49.999) * 100000px, raio) e ponta ate 50 e
     raio dali em diante: uma funcao degrau em CSS puro, e border-radius
     transiciona a virada em t-base.
   A parada do gradiente e o centro da alca, nao pct% do trilho: a alca anda
   de alca/2 ate largura - alca/2, e o preenchimento acompanha.

   Decisoes, para ninguem "corrigir":
   - a alca e solida em accent, como a acao primaria: hover clareia
     (brightness 1.08), sobe 1px e CRESCE 6%; press escurece um degrau,
     comprime a 0.92 e fecha o canto. Foco e o anel da base em volta do
     controle inteiro, como o range nativo faz, mais o mesmo crescimento da
     alca: o componente nao redefine o anel.
   - o preenchimento NAO desliza quando o valor muda. Nao e esquecimento: a
     alca de um <input type="range"> e pintada pelo navegador a partir do
     value e nao aceita transicao, entao um fill que glisasse chegaria depois
     dela, e a seta do teclado mostraria a barra correndo atras do proprio
     ponto. Quem quiser os dois juntos tem de abandonar o range nativo, e com
     ele o arraste, o toque e o teclado de graca - troca que a 4a recusou.
   - o trilho e campo: hover so sobe o fundo (alpha-hover), sem transform.
   - largura e do layout: space-12 vezes 4 por padrao, --block estica. --sm
     tem alca de 16px sobre trilho de space-1.
   - so os pseudo-elementos webkit: o piso e o CEF, e o browser da loja e
     Chromium. Em Firefox a alca fica a nativa; funciona, so nao e Gota.
   - valor escrito por JS (o console do atelie faz isso) nao dispara input:
     chame AquaUI.slider(el) depois, como o console chama.
   - --bare (2026-09-14, Fase 9): trilho transparente, sem borda e sem o
     preenchimento em accent, para quem PINTA O PROPRIO TRILHO e quer so a
     alca: o aqua-color-picker (87) poe um canvas de matiz e outro de alfa
     por baixo de um range do kit, e ganha arraste, teclado, aria e a Gota
     sem uma linha nova. E uma regra so, no pseudo-elemento do trilho; a
     alca, os estados e --sm continuam os mesmos. */
@layer aqua.componente {
	.aqua-slider {
		--aqua-slider-pct: 0;
		--aqua-slider-ponta: var(--aqua-gota-ponta);
		--aqua-slider-alca: calc(var(--aqua-space-4) + var(--aqua-space-1));
		--aqua-slider-trilho: var(--aqua-space-2);
		--aqua-slider-fundo: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-rest));
		-webkit-appearance: none;
		appearance: none;
		display: inline-block;
		vertical-align: middle;
		width: calc(var(--aqua-space-12) * 4);
		height: var(--aqua-slider-alca);
		margin: 0;
		padding: 0;
		background: none;
		cursor: pointer;
	}
	.aqua-slider--block { display: block; width: 100%; }

	/* ---- o trilho: uma linha, preenchida ate o centro da alca -------------------------- */
	.aqua-slider::-webkit-slider-runnable-track {
		box-sizing: border-box;
		height: var(--aqua-slider-trilho);
		border: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border-strong));
		border-radius: var(--aqua-radius-full);
		background:
			linear-gradient(to right, var(--aqua-accent) calc(var(--aqua-slider-alca) / 2 + (100% - var(--aqua-slider-alca)) * var(--aqua-slider-pct) / 100), transparent 0),
			var(--aqua-slider-fundo);
		transition: background-color var(--aqua-t-rapido) var(--aqua-ease-out);
	}

	/* ---- a alca: a Gota que vira o canto para a parede mais proxima -------------------- */
	.aqua-slider::-webkit-slider-thumb {
		-webkit-appearance: none;
		appearance: none;
		box-sizing: border-box;
		width: var(--aqua-slider-alca);
		height: var(--aqua-slider-alca);
		margin-top: calc((var(--aqua-slider-trilho) - var(--aqua-slider-alca)) / 2);
		border: 1px solid rgb(var(--aqua-accent-rgb) / 45%);
		border-radius:
			var(--aqua-gota-raio)
			var(--aqua-gota-raio)
			clamp(var(--aqua-slider-ponta), (50 - var(--aqua-slider-pct)) * 100000px, var(--aqua-gota-raio))
			clamp(var(--aqua-slider-ponta), (var(--aqua-slider-pct) - 49.999) * 100000px, var(--aqua-gota-raio));
		background-color: var(--aqua-accent);
		cursor: grab;
		transition:
			transform var(--aqua-t-rapido) var(--aqua-ease-out),
			border-radius var(--aqua-t-base) var(--aqua-ease-out),
			filter var(--aqua-t-rapido) var(--aqua-ease-out);
	}

	/* ---- os cinco estados: o trilho e campo, a alca e acao ----------------------------- */
	/* A alca RESPIRA ao ser usada (2026-09-15, a pedido do dono): cresce 6% ao
	   receber o ponteiro ou o foco, e comprime a 0.92 ao ser agarrada. O
	   crescimento anda em t-rapido, que e a duracao da lei 2 (hover), e a
	   compressao volta a t-toque pela lei 1 (press) - por isso o :active
	   reescreve so a DURACAO, e nao a transicao inteira. Era translateY(-1px)
	   sem crescer, com press a 0.90: o toque lia como clique, nao como pegar. */
	.aqua-slider:hover { --aqua-slider-fundo: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-hover)); }
	.aqua-slider:hover::-webkit-slider-thumb { transform: translateY(-1px) scale(1.06); filter: brightness(1.08); }
	.aqua-slider:focus-visible::-webkit-slider-thumb { transform: translateY(-1px) scale(1.06); filter: brightness(1.06); }
	.aqua-slider:active { --aqua-slider-ponta: var(--aqua-gota-ponta-fechada); }
	.aqua-slider:active::-webkit-slider-thumb {
		transform: translateY(-1px) scale(0.92);
		filter: brightness(0.96);
		cursor: grabbing;
		transition-duration: var(--aqua-t-toque), var(--aqua-t-base), var(--aqua-t-rapido);
	}
	/* O trilho clareia enquanto a alca esta agarrada: o valor esta vivo. E filter,
	   nao cor nova - o preenchimento continua sendo o mesmo accent. */
	.aqua-slider:active::-webkit-slider-runnable-track { filter: brightness(1.06); }
	.aqua-slider:disabled { opacity: 0.5; cursor: not-allowed; --aqua-slider-fundo: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-rest)); --aqua-slider-ponta: var(--aqua-gota-ponta); }
	.aqua-slider:disabled::-webkit-slider-thumb { transform: none; filter: none; cursor: not-allowed; }

	/* ---- tamanho: alca de 16 sobre trilho de 4 ------------------------------------------ */
	.aqua-slider--sm {
		--aqua-slider-alca: var(--aqua-space-4);
		--aqua-slider-trilho: var(--aqua-space-1);
		width: calc(var(--aqua-space-12) * 3);
	}
	.aqua-slider--sm.aqua-slider--block { width: 100%; }

	/* ---- --bare: so a alca; o trilho e de quem o pinta (color-picker, 2026-09-14) ------ */
	.aqua-slider--bare::-webkit-slider-runnable-track { border-color: transparent; background: none; }
}

/* ==== 39-step-slider.css ==== */
/* 39-step-slider.css - aqua-step-slider. O valor em passos, com a regua.

   Gota: A MESMA ALCA DO SLIDER (38-slider.css): vira o canto para a parede
   mais proxima e fecha ao arrastar. O step-slider nao tem forma propria; tem
   uma regua.

   A ideia com nome: A REGUA CONTA O QUE JA PASSOU. Sob o trilho, uma marca por
   parada, com rotulo. A marca ja passada fica em accent, a atual em text, as
   que faltam em text-muted: o olho le "estou em Alta, passei Baixa e Media"
   sem ler numero. E o mesmo <input type="range"> com step: o navegador prende
   o valor as paradas, as setas andam uma parada, e o formulario recebe o
   numero. O rotulo da parada atual vira aria-valuetext, entao o leitor de
   tela diz "Alta" em vez de "2".

   As marcas sao posicionadas pela MESMA conta do preenchimento do trilho: a
   alca anda de alca/2 ate largura - alca/2, e a marca de N% fica no centro
   da alca quando o valor e N%. Cada marca leva --aqua-marca (a porcentagem
   da parada), escrita pelo aqua-ui.js a partir de data-aqua-valor, min e
   max; ninguem calcula porcentagem a mao.

   Onde o plano e o disco divergiram: o plano dizia "zero JS proprio". A
   marca passada em accent e a atual em text sao cores discretas, e CSS nao
   escolhe cor por calc() sem color-mix(), que o piso 103 nao tem. O JS do
   step-slider tem uma funcao: escreve a porcentagem de cada marca e marca
   data-aqua-passada e data-aqua-atual. Relatado, nao escondido.

   Decisoes, para ninguem "corrigir":
   - a marca e um tracinho de 2 por 4 (geometria de glifo, como o check) mais
     o rotulo em fs-sm: o tracinho segue a cor do rotulo, entao a regua e uma
     coisa so.
   - --sm passa para o slider de dentro (alca 16, trilho 4) e para o rotulo
     (fs-xs): um modificador na raiz, nao dois.
   - largura e do layout: inline-block por padrao com a largura do slider,
     --block estica. O slider de dentro e sempre em bloco, com 100%. */
@layer aqua.componente {
	.aqua-step-slider {
		--aqua-slider-alca: calc(var(--aqua-space-4) + var(--aqua-space-1));
		display: inline-flex;
		flex-direction: column;
		gap: var(--aqua-space-1);
		width: calc(var(--aqua-space-12) * 4);
		min-width: 0;
		vertical-align: middle;
	}
	.aqua-step-slider--block { display: flex; width: 100%; }
	.aqua-step-slider > .aqua-slider { display: block; width: 100%; }

	/* ---- a regua: uma marca por parada, no centro da alca ------------------------------ */
	.aqua-step-slider__marks {
		position: relative;
		height: calc(var(--aqua-fs-sm) * var(--aqua-lh-base) + var(--aqua-space-1) + var(--aqua-space-1));
	}
	.aqua-step-slider__mark {
		position: absolute;
		top: 0;
		left: calc(var(--aqua-slider-alca) / 2 + (100% - var(--aqua-slider-alca)) * var(--aqua-marca, 0) / 100);
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--aqua-space-1);
		transform: translateX(-50%);
		font-size: var(--aqua-fs-sm);
		line-height: var(--aqua-lh-base);
		color: var(--aqua-text-muted);
		white-space: nowrap;
		transition: color var(--aqua-t-rapido) var(--aqua-ease-out);
	}
	.aqua-step-slider__mark::before {
		content: "";
		width: 2px;
		height: var(--aqua-space-1);
		border-radius: var(--aqua-radius-full);
		background-color: currentColor;
	}
	.aqua-step-slider__mark[data-aqua-passada] { color: var(--aqua-accent); }
	.aqua-step-slider__mark[data-aqua-atual] { color: var(--aqua-text); font-weight: 500; }

	/* ---- desabilitado: a regua esmaece com o slider (irmao, sem :has) ------------------- */
	.aqua-step-slider > .aqua-slider:disabled + .aqua-step-slider__marks { opacity: 0.5; }

	/* ---- tamanho: passa para o slider de dentro e para o rotulo -------------------------- */
	.aqua-step-slider--sm { --aqua-slider-alca: var(--aqua-space-4); width: calc(var(--aqua-space-12) * 3); }
	.aqua-step-slider--sm.aqua-step-slider--block { width: 100%; }
	.aqua-step-slider--sm > .aqua-slider { --aqua-slider-alca: var(--aqua-space-4); --aqua-slider-trilho: var(--aqua-space-1); }
	.aqua-step-slider--sm .aqua-step-slider__mark { font-size: var(--aqua-fs-xs); }
	.aqua-step-slider--sm .aqua-step-slider__marks { height: calc(var(--aqua-fs-xs) * var(--aqua-lh-base) + var(--aqua-space-1) + var(--aqua-space-1)); }
}

/* ==== 40-range-slider.css ==== */
/* 40-range-slider.css - aqua-range-slider. A faixa entre duas alcas.

   Gota: CADA ALCA OLHA PARA FORA DA FAIXA, parada: a da esquerda com o canto
   afiado embaixo a esquerda (gota-bl), a da direita embaixo a direita
   (gota-br). Elas emolduram a faixa em vez de virarem com o valor, porque
   aqui e o PAR que informa: a faixa esta entre os dois cantos. Ao arrastar,
   o canto fecha (gota-ponta-fechada), como no slider.

   A ideia com nome: DOIS RANGES, UM TRILHO. Sao dois <input type="range">
   sobrepostos, o classico: cada um e um aqua-slider (38-slider.css) com o
   trilho apagado, e o trilho e desenhado UMA vez pelo wrapper, com a faixa
   accent entre --aqua-range-lo e --aqua-range-hi (porcentagens escritas pelo
   aqua-ui.js). Os inputs nao recebem ponteiro; as alcas recebem. Assim as
   duas sao agarraveis mesmo sobrepostas, e clicar no trilho nao pula o valor
   - numa faixa, pular e ambiguo (qual alca?).

   O unico mecanismo real dos tres sliders: o JS impede o cruzamento. Cada
   alca respeita um passo de folga da outra, como o ORangeSlider faz; o
   teclado e o formulario continuam sendo do navegador.

   Decisoes, para ninguem "corrigir":
   - a alca da direita fica por cima (z-index): quando as duas encostam na
     folga, e a de cima que se agarra primeiro, e a folga garante que a de
     baixo nunca some inteira.
   - foco e o anel da base em volta do controle, um por input; os dois
     controles ocupam a mesma caixa, entao o anel e o mesmo para os dois e o
     leitor de tela diz qual e pelo aria-label.
   - desabilitado: os dois inputs com disabled; o trilho esmaece por :has(),
     como melhoria (§9): sem :has() as alcas esmaecem e o trilho fica.
   - largura e do layout, --block estica, --sm tem alca de 16 sobre trilho
     de 4, como o slider. */
@layer aqua.componente {
	.aqua-range-slider {
		--aqua-range-lo: 0;
		--aqua-range-hi: 100;
		--aqua-slider-alca: calc(var(--aqua-space-4) + var(--aqua-space-1));
		--aqua-slider-trilho: var(--aqua-space-2);
		position: relative;
		display: inline-grid;
		width: calc(var(--aqua-space-12) * 4);
		min-width: 0;
		height: var(--aqua-slider-alca);
		vertical-align: middle;
	}
	.aqua-range-slider--block { display: grid; width: 100%; }

	/* ---- o trilho: um so, do wrapper, com a faixa entre as duas alcas ------------------ */
	.aqua-range-slider::before {
		content: "";
		position: absolute;
		top: 50%;
		right: 0;
		left: 0;
		box-sizing: border-box;
		height: var(--aqua-slider-trilho);
		border: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border-strong));
		border-radius: var(--aqua-radius-full);
		background:
			linear-gradient(to right,
				transparent calc(var(--aqua-slider-alca) / 2 + (100% - var(--aqua-slider-alca)) * var(--aqua-range-lo) / 100),
				var(--aqua-accent) 0,
				var(--aqua-accent) calc(var(--aqua-slider-alca) / 2 + (100% - var(--aqua-slider-alca)) * var(--aqua-range-hi) / 100),
				transparent 0),
			rgb(var(--aqua-text-rgb) / var(--aqua-alpha-rest));
		transform: translateY(-50%);
		transition: background-color var(--aqua-t-rapido) var(--aqua-ease-out);
	}
	.aqua-range-slider:hover::before { background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-hover)); }
	.aqua-range-slider:has(.aqua-slider:disabled)::before { opacity: 0.5; }

	/* ---- os dois inputs: mesma caixa, trilho apagado, so a alca recebe ponteiro --------- */
	.aqua-range-slider__input {
		grid-area: 1 / 1;
		width: 100%;
		pointer-events: none;
	}
	.aqua-range-slider__input:last-of-type { z-index: 1; }
	.aqua-range-slider__input::-webkit-slider-runnable-track {
		border: 0;
		background: none;
	}
	.aqua-range-slider__input::-webkit-slider-thumb { pointer-events: auto; }
	.aqua-range-slider__input:hover { --aqua-slider-fundo: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-rest)); }

	/* ---- a Gota, parada: cada alca olha para fora da faixa ------------------------------ */
	.aqua-range-slider__input:first-of-type::-webkit-slider-thumb { border-radius: var(--aqua-gota-bl); }
	.aqua-range-slider__input:last-of-type::-webkit-slider-thumb { border-radius: var(--aqua-gota-br); }
	.aqua-range-slider__input:first-of-type:active::-webkit-slider-thumb { border-radius: var(--aqua-gota-fechado); }
	.aqua-range-slider__input:last-of-type:active::-webkit-slider-thumb { border-radius: var(--aqua-gota-raio) var(--aqua-gota-raio) var(--aqua-gota-ponta-fechada) var(--aqua-gota-raio); }

	/* ---- tamanho ------------------------------------------------------------------------ */
	.aqua-range-slider--sm {
		--aqua-slider-alca: var(--aqua-space-4);
		--aqua-slider-trilho: var(--aqua-space-1);
		width: calc(var(--aqua-space-12) * 3);
	}
	.aqua-range-slider--sm.aqua-range-slider--block { width: 100%; }
	.aqua-range-slider--sm > .aqua-slider { --aqua-slider-alca: var(--aqua-space-4); --aqua-slider-trilho: var(--aqua-space-1); }
}

/* ==== 41-tabs.css ==== */
/* 41-tabs.css - aqua-tabs. As abas que trocam de painel.

   POSICAO: A ABA ATIVA. Botoes soltos sobre uma linha fina que os separa do
   painel; a aba ativa recebe a marca de POSICAO do ADR 0036: o degrau de
   superficie (--aqua-selecao-bg), o fio de luz de 1px na aresta de cima e a
   sombra curta (--aqua-selecao-sombra). Sem borda, sem accent, sem risco.
   E a mesma marca do nav-item, da pagination e do stepper, e nao por
   economia: a pergunta "onde eu estou" tem UMA resposta no kit inteiro, e
   duas respostas para ela e o que faz uma tela parecer montada por partes.

   Ate 2026-09-28 a ativa levava `inset 0 -2px 0 var(--aqua-text)`, um risco
   BRANCO, e este arquivo era o ULTIMO do kit fora da lei do 0036: os outros
   19 ja consumiam os dois tokens. O dono nomeou o defeito olhando a central,
   "esse tab esta horrivel e nada a ver com modernismo". Nao reponha o risco.

   A ideia com nome: ABAS NAO REPETEM O INDICADOR DO SEGMENTED. O indicador
   que desliza dentro de um trilho ja e a expressao do aqua-segmented no
   §13; dois componentes com a mesma assinatura tiram o sentido de haver
   assinatura. Aqui nao ha trilho nem indicador: ha botoes soltos, uma linha
   e um painel. O que distingue os dois e o papel, e ele esta no ARIA e no
   teclado: segmented ESCOLHE (aria-pressed, um valor), tabs NAVEGA
   (role=tablist, aria-selected, um painel por aba).

   Uma variante, nao dez: o OTabs tem line, pill, segmented, vertical,
   divided, elastica, segmento, trilho, fichas e palco, em 832 linhas. A
   Aqua tem uma, mais --block. Menu de variantes e o que parece gerado.

   Teclado do padrao tabs, no aqua-ui.js: setas movem E ativam, com volta;
   Home e End vao as pontas; so a aba ativa fica na ordem de tabulacao
   (tabindex 0, as outras -1), e o painel leva tabindex 0 para o Tab seguinte
   cair nele. O painel inativo esconde por regra explicita: o atributo hidden
   perde para o display da camada.

   Decisoes, para ninguem "corrigir":
   - trocar de painel NAO anima. A lei 4 e para o que abre a partir de um
     gatilho; trocar de tela e a proibicao 5 (o atelie faz o mesmo).
   - a aba e clicavel por inteiro (§4): hover sobe o fundo e levanta 1px,
     press adensa e fecha o canto, foco clareia com o anel, disabled esmaece.
   - icone e contagem sao opcionais dentro da aba: __icon em 1.15em e um
     aqua-badge--count solto, que ja tem a forma certa.
   - --block estica as abas por igual, para o painel de NUI em que a tira
     ocupa a largura toda. */
@layer aqua.componente {
	.aqua-tabs {
		display: flex;
		flex-direction: column;
		gap: var(--aqua-space-4);
		min-width: 0;
	}

	/* ---- a tira: botoes soltos sobre uma linha fina ---------------------------------- */
	.aqua-tabs__list {
		display: flex;
		flex-wrap: wrap;
		gap: var(--aqua-space-1);
		padding-bottom: var(--aqua-space-1);
		border-bottom: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border));
	}
	.aqua-tabs__tab {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--aqua-space-2);
		padding: var(--aqua-space-2) var(--aqua-space-3);
		border: 1px solid transparent;
		border-radius: var(--aqua-radius-xs);
		background: none;
		color: var(--aqua-text-muted);
		font-size: var(--aqua-fs-md);
		font-weight: 500;
		line-height: var(--aqua-lh-base);
		white-space: nowrap;
		cursor: pointer;
		transition:
			transform var(--aqua-t-toque) var(--aqua-ease-out),
			border-radius var(--aqua-t-base) var(--aqua-ease-out),
			backdrop-filter var(--aqua-t-toque) var(--aqua-ease-out),
			background-color var(--aqua-t-rapido) var(--aqua-ease-out),
			border-color var(--aqua-t-rapido) var(--aqua-ease-out),
			box-shadow var(--aqua-t-base) var(--aqua-ease-out),
			color var(--aqua-t-rapido) var(--aqua-ease-out),
			filter var(--aqua-t-rapido) var(--aqua-ease-out);
	}
	.aqua-tabs__icon { flex: none; width: 1.15em; height: 1.15em; }

	/* ---- os cinco estados, mais a ativa ------------------------------------------------ */
	.aqua-tabs__tab:hover {
		color: var(--aqua-text);
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-hover));
		transform: translateY(-1px);
	}
	.aqua-tabs__tab:focus-visible { filter: brightness(1.06); }
	.aqua-tabs__tab:active {
		transform: translateY(-1px) scale(0.97);
		border-radius: var(--aqua-radius-btn-fechado);
		background-color: rgb(var(--aqua-surface-rgb) / var(--aqua-press-tint));
		-webkit-backdrop-filter: var(--aqua-press-filtro);
		backdrop-filter: var(--aqua-press-filtro);
	}
	.aqua-tabs__tab:disabled,
	.aqua-tabs__tab[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; filter: none; }

	/* A ativa: a marca de posicao do 0036, a mesma do nav-item. */
	.aqua-tabs__tab[aria-selected="true"],
	.aqua-tabs__tab[aria-selected="true"]:hover {
		color: var(--aqua-text);
		border-color: transparent;
		background-color: var(--aqua-selecao-bg);
		box-shadow: var(--aqua-selecao-sombra);
	}
	.aqua-tabs__tab[aria-selected="true"] .aqua-tabs__icon { color: var(--aqua-text); }
	.aqua-tabs__tab[aria-selected="true"]:active { border-radius: var(--aqua-radius-btn-fechado); }

	/* ---- o painel: esconde por regra, nao so pelo atributo ------------------------------ */
	.aqua-tabs__panel { min-width: 0; }
	.aqua-tabs__panel[hidden] { display: none; }

	/* ---- em bloco: as abas dividem a largura por igual ----------------------------------- */
	.aqua-tabs--block .aqua-tabs__list { flex-wrap: nowrap; }
	.aqua-tabs--block .aqua-tabs__tab { flex: 1 1 0; min-width: 0; }
}

/* ==== 42-select-card.css ==== */
/* 42-select-card.css - aqua-select-card. O cartao que e uma opcao.

   Gota: O CARTAO ESCOLHIDO, como o §13 prometeu na 4a ao deixar o radio
   simples quieto: a escolha ganha a Gota no expand-select e aqui, que sao
   radios de linha e de cartao. Por :has(:checked), como MELHORIA PROGRESSIVA
   (§9): apague a regra e o ponto do radio dentro do cartao continua marcando
   a escolha. O cartao escolhido recebe o canto da Gota (gota-bl), a borda
   accent 45% e o brilho do selecionado, e o icone vai a accent.

   A ideia com nome: E COMPOSICAO, NAO COMPONENTE NOVO. O HTML leva
   aqua-card aqua-card--interactive aqua-card--compact (14-card.css) num
   <label>, um .aqua-radio__input (30-radio.css) ou .aqua-checkbox__input
   (29-checkbox.css) dentro, e esta folha so acrescenta o layout de icone,
   titulo e descricao e a regra da Gota. Zero JS: o <input> faz a escolha, o
   formulario envia, o leitor de tela ja sabe. Radio ou caixa e o tipo do
   input, nao um modificador: --multi nao existe porque nao teria CSS.

   O "Assento" do OSelectCard nao entra: afundar, desenhar o anel por
   strokeDashoffset, o squash do icone e o ponto que estica em pilula sao
   quatro molas, e a Aqua nao tem mola (§7). Os cinco estados sao os do card
   interativo: hover sobe 1px, press adensa e fecha o canto, foco clareia com
   o anel (no input, que e o focavel), disabled esmaece.

   Decisoes, para ninguem "corrigir":
   - o grupo e um fieldset zerado em grade, como o aqua-radio-group: colunas
     de space-12 vezes 4 no minimo, gap space-3. A legend e .aqua-label.
   - o foco fica no input: o anel da base aparece no radio, nao no cartao.
     Cartao inteiro com anel seria o unico caso de anel em superficie.
   - desabilitado por :has(:disabled) tambem e melhoria: sem :has(), o
     input esmaece sozinho e o cartao nao reage ao clique. */
@layer aqua.componente {
	.aqua-select-card-group {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(calc(var(--aqua-space-12) * 4), 1fr));
		gap: var(--aqua-space-3);
		min-width: 0;
		margin: 0;
		padding: 0;
		border: 0;
	}
	.aqua-select-card-group > legend { padding: 0 0 var(--aqua-space-2); }

	/* ---- o cartao: o card interativo, deitado ------------------------------------------ */
	.aqua-select-card {
		flex-direction: row;
		align-items: flex-start;
		gap: var(--aqua-space-3);
		padding: var(--aqua-space-4);
	}
	.aqua-select-card__input { flex: none; margin-top: 1px; }
	.aqua-select-card__icon {
		flex: none;
		width: var(--aqua-fs-xl);
		height: var(--aqua-fs-xl);
		color: var(--aqua-text-muted);
		transition: color var(--aqua-t-rapido) var(--aqua-ease-out);
	}
	.aqua-select-card__text { display: flex; flex-direction: column; gap: var(--aqua-space-1); min-width: 0; }
	.aqua-select-card__title { font-size: var(--aqua-fs-md); font-weight: 600; line-height: var(--aqua-lh-base); color: var(--aqua-text); }
	.aqua-select-card__desc { font-size: var(--aqua-fs-sm); line-height: var(--aqua-lh-base); color: var(--aqua-text-muted); }

	/* ---- escolhido: a Gota migra para o cartao, como melhoria progressiva ------------------ */
	.aqua-select-card:has(:checked),
	.aqua-select-card:has(:checked):hover {
		border-color: transparent;
		filter: brightness(1.06);
	}
	.aqua-select-card:has(:checked) .aqua-select-card__icon { color: var(--aqua-text); }
	.aqua-select-card:has(:checked):active { border-radius: var(--aqua-radius-btn-fechado); }

	/* ---- desabilitado: o input diz, o cartao segue -------------------------------------- */
	.aqua-select-card:has(:disabled),
	.aqua-select-card:has(:disabled):hover { opacity: 0.5; cursor: not-allowed; transform: none; filter: none; }
}

/* ==== 43-inline-edit.css ==== */
/* 43-inline-edit.css - aqua-inline-edit. O texto que vira campo.

   Gota: NENHUMA em repouso. Editando, e o aqua-input (24-input.css), que e
   o chao quieto: a Gota e do que se escolhe ou se aciona, nunca do que se
   digita (§13).

   A ideia com nome: O TEXTO JA TEM A CAIXA, SO NAO A MOSTRA. Em repouso, o
   valor e um <button> com o MESMO padding e o mesmo raio do aqua-input, com
   borda e fundo transparentes: ao clicar, o input aparece no mesmo lugar e
   com o mesmo tamanho, e o texto nao pula. Um aqua-icon-btn de lapis aparece
   ao lado no hover e no foco, para dizer que aquilo se edita; ele e so para
   o mouse (aria-hidden, fora da ordem de tabulacao), porque o texto ja e o
   controle. Enter salva, Esc cancela e volta ao valor anterior, sair salva.
   Com maxlength, o contador da 4a (data-aqua-contador) aparece enquanto se
   edita, em vez de uma regua nova.

   Tres coisas do OInlineEdit nao entram: o eyebrow em caixa alta e a
   proibicao 1; o flash de confirmacao e movimento sem lei (o §7 tem quatro,
   e nenhuma e flash); a regua propria ja existe como data-aqua-contador.

   Decisoes, para ninguem "corrigir":
   - o texto em repouso e clicavel (§4): hover sobe o fundo a alpha-hover,
     mostra a borda fina e levanta 1px; press adensa sem fechar canto (nao
     tem Gota); foco clareia com o anel da base; disabled esmaece.
   - vazio, o texto mostra o placeholder do input em text-muted
     (data-aqua-vazio, escrito pelo JS): um inline-edit vazio que some e
     impossivel de achar.
   - o nome acessivel do botao e o do input mais o valor, escrito pelo JS: o
     leitor de tela ouve "Nome do servidor: Aqua Base, editar", nao so
     "Aqua Base, botao".
   - largura e do layout: inline-flex por padrao, --block estica. O input de
     dentro tem um minimo (space-12 vezes 3) para nao nascer de um texto
     curto. */
@layer aqua.componente {
	.aqua-inline-edit {
		display: inline-flex;
		align-items: center;
		gap: var(--aqua-space-1);
		min-width: 0;
		max-width: 100%;
		vertical-align: middle;
	}
	.aqua-inline-edit--block { display: flex; }

	/* ---- o texto em repouso: a caixa do input, transparente ---------------------------- */
	.aqua-inline-edit__text {
		min-width: 0;
		padding: var(--aqua-space-2) var(--aqua-space-4);
		border: 1px solid transparent;
		border-radius: var(--aqua-radius-md);
		background: none;
		color: var(--aqua-text);
		font-size: var(--aqua-fs-md);
		line-height: var(--aqua-lh-base);
		text-align: left;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		cursor: pointer;
		transition:
			transform var(--aqua-t-toque) var(--aqua-ease-out),
			backdrop-filter var(--aqua-t-toque) var(--aqua-ease-out),
			background-color var(--aqua-t-rapido) var(--aqua-ease-out),
			border-color var(--aqua-t-rapido) var(--aqua-ease-out),
			color var(--aqua-t-rapido) var(--aqua-ease-out),
			filter var(--aqua-t-rapido) var(--aqua-ease-out);
	}
	.aqua-inline-edit__text:hover {
		border-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border));
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-hover));
		transform: translateY(-1px);
	}
	.aqua-inline-edit__text:focus-visible { filter: brightness(1.06); }
	.aqua-inline-edit__text:active {
		transform: translateY(-1px) scale(0.97);
		background-color: rgb(var(--aqua-surface-rgb) / var(--aqua-press-tint));
		-webkit-backdrop-filter: var(--aqua-press-filtro);
		backdrop-filter: var(--aqua-press-filtro);
	}
	.aqua-inline-edit__text:disabled,
	.aqua-inline-edit__text[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; filter: none; }
	.aqua-inline-edit[data-aqua-vazio] .aqua-inline-edit__text { color: var(--aqua-text-muted); }

	/* ---- o lapis: so para o mouse, aparece no hover e no foco -------------------------- */
	.aqua-inline-edit__edit { visibility: hidden; }
	.aqua-inline-edit:hover .aqua-inline-edit__edit,
	.aqua-inline-edit:focus-within .aqua-inline-edit__edit { visibility: visible; }

	/* ---- editando: o texto e o lapis somem, o input e o contador aparecem -------------- */
	.aqua-inline-edit[data-aqua-editando] .aqua-inline-edit__text,
	.aqua-inline-edit[data-aqua-editando] .aqua-inline-edit__edit { display: none; }
	.aqua-inline-edit__input { flex: 1 1 auto; width: auto; min-width: calc(var(--aqua-space-12) * 3); }
	.aqua-inline-edit__input[hidden] { display: none; }
	.aqua-inline-edit__count { flex: none; }
	.aqua-inline-edit__count[hidden] { display: none; }
}

/* ==== 44-setting-section.css ==== */
/* 44-setting-section.css - aqua-setting-section. O bloco de configuracao.

   Gota: NENHUMA. E layout: quem tem forma sao os controles que ele empilha.

   A ideia com nome: UM CABECALHO QUE EXPLICA, LINHAS QUE DECIDEM. O cabecalho
   tem icone, titulo, descricao e uma acao a direita; o corpo empilha linhas,
   e cada linha E um aqua-field--inline da 4a (32-field.css), que ja existe
   justamente para isso: texto a esquerda (rotulo sobre dica), controle a
   direita. Esta folha so da a moldura (vidro-1, sem sombra, §5) e as linhas
   finas entre as linhas. Zero JS.

   O OSettingSection recolhe; aqui nao: recolher e o accordion da Fase 5, o
   generico de abrir e fechar. Uma secao de configuracao que some atras de um
   clique e uma configuracao que ninguem acha.

   Decisoes, para ninguem "corrigir":
   - vidro-1, sem sombra: e uma superficie sobre a pagina, nao um card que
     flutua. Sombra e do vidro-2 e 3 (§5).
   - o icone do cabecalho vai em accent: e o unico ponto de cor da moldura,
     e diz de que assunto e a secao antes de o titulo ser lido.
   - as linhas se separam por linha fina (alpha-border), nunca por fundo
     alternado: fundo alternado e tabela, e isto e formulario.
   - padding do cabecalho e das linhas em space-4 vertical e space-6
     horizontal: e o padding de card (§2), com o texto respirando mais para
     os lados.
   - --compact reduz o padding para space-3 e space-4, para o painel de NUI
     em que cabem menos pixels. E o unico modificador. */
@layer aqua.componente {
	.aqua-setting-section {
		display: flex;
		flex-direction: column;
		min-width: 0;
		border: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border));
		border-radius: var(--aqua-radius-lg);
		background: var(--aqua-vidro-1-bg);
		-webkit-backdrop-filter: var(--aqua-vidro-1-filtro);
		backdrop-filter: var(--aqua-vidro-1-filtro);
		box-shadow: inset 0 1px 0 rgb(var(--aqua-white-rgb) / 7%);
		color: var(--aqua-text);
	}

	/* ---- o cabecalho: icone, titulo, descricao e a acao ------------------------------- */
	.aqua-setting-section__header {
		display: flex;
		align-items: flex-start;
		gap: var(--aqua-space-3);
		padding: var(--aqua-space-4) var(--aqua-space-6);
		border-bottom: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border));
	}
	.aqua-setting-section__icon {
		flex: none;
		width: var(--aqua-fs-xl);
		height: var(--aqua-fs-xl);
		margin-top: 2px;
		color: var(--aqua-accent);
	}
	.aqua-setting-section__text { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--aqua-space-1); min-width: 0; }
	.aqua-setting-section__title { font-size: var(--aqua-fs-lg); font-weight: 600; line-height: var(--aqua-lh-tight); letter-spacing: -0.01em; color: var(--aqua-text); }
	.aqua-setting-section__desc { font-size: var(--aqua-fs-sm); line-height: var(--aqua-lh-base); color: var(--aqua-text-muted); }
	.aqua-setting-section__action { display: flex; flex: none; align-items: center; gap: var(--aqua-space-2); margin-left: auto; }

	/* ---- o corpo: linhas separadas por linha fina --------------------------------------- */
	.aqua-setting-section__body { display: flex; flex-direction: column; min-width: 0; }
	.aqua-setting-section__row { padding: var(--aqua-space-4) var(--aqua-space-6); }
	.aqua-setting-section__row + .aqua-setting-section__row { border-top: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border)); }

	/* ---- compacto: para o painel de NUI ---------------------------------------------- */
	.aqua-setting-section--compact .aqua-setting-section__header,
	.aqua-setting-section--compact .aqua-setting-section__row { padding: var(--aqua-space-3) var(--aqua-space-4); }
}

/* ==== 45-modal.css ==== */
/* 45-modal.css - aqua-modal; e aqua-dialog, a forma que os cinco que cobrem a
   tela repartem (modal, sheet, drawer, command, confirm-dialog).

   Gota: NENHUMA. O modal e superficie, e superficie e quieta (§13): o que
   carrega a assinatura e o botao primario do rodape, como em toda tela. Um
   painel de 480px que citasse a Gota passaria do limite de 24px do §13 sem
   dizer nada.

   A ideia com nome: UMA FORMA DE DIALOGO, NAO CINCO. aqua-dialog e para os
   cinco que cobrem a tela o que aqua-opcoes (34-select.css) foi para os
   quatro que flutuam: o <dialog> em tela cheia e transparente, o scrim no
   ::before, o painel vidro-3 em radius-xl com cabecalho, corpo e rodape, e o
   fechar. sheet, drawer, command e confirm-dialog levam as duas classes
   (aqua-dialog aqua-sheet) e mudam so onde o painel se prende. O OCEON
   escreve o modal quatro vezes.

   O mecanismo e o <dialog> nativo com showModal() (aqua-ui.js, §10): foco
   preso, o resto inerte, Esc e a camada de topo vem da plataforma, medida
   presente pela sonda. Por isso:
   - .aqua-dialog:not([open]) { display: none } e OBRIGATORIO: o UA esconde o
     dialog fechado com display none, e o display: flex daqui venceria e
     abriria todos os dialogos da pagina de uma vez. E o [hidden] da 4a, para
     o dialog.
   - z-index e irrelevante na camada de topo; z-modal fica escrito para quem
     abrir por show() em vez de showModal(), que o kit nao faz.

   UM VEU SO (§10). O ::backdrop e transparente em todo modo: o m103 nao
   herda custom property nele (var(--aqua-veu-bg) ali computa como
   transparente, sem erro), e em nui-veu ele seria um segundo veu por cima do
   .aqua-veu de 70% que os numeros de contraste assumem. O scrim e o ::before
   do proprio <dialog>, lendo --aqua-veu-bg (40% no browser, o scrim estetico
   do modal); em nui-veu ele some; em nui-hud o token ja e transparente.

   Decisoes, para ninguem "corrigir":
   - o painel entra por aqua-entrar em t-lento (§7: modal e sheet sao lentos)
     com transform-origin em --aqua-origem, que o JS escreve do gatilho. A
     regra e do componente e nao a .aqua-entra utilitaria, que e t-base; a
     saida e a .aqua-sai utilitaria (t-rapido: o olho nao acompanha o que vai
     embora), que vence esta por camada.
   - o scrim entra por aqua-veu-entrar e sai pela mesma animacao ao contrario
     sob data-aqua-saindo: so opacidade, o veu nao escala.
   - html[data-aqua-dialogo] trava a rolagem da pagina atras do modal.
   - o painel recebe foco por script, para o leitor de tela ler o titulo
     antes de qualquer controle; ele nao e um controle e nao carrega anel:
     outline 0 e data-aqua-sem-anel, a excecao declarada, como a do campo
     composto (§4).
   - o corpo rola por dentro (min-height 0, overflow auto); o painel nunca
     passa da altura da tela.
   - --lg leva o painel a 720px, e o dono e o dashboard, que abre tabela em
     modal. Nao ha --sm: o confirm-dialog e o pequeno. */
@layer aqua.componente {
	/* ---- o dialogo: tela cheia, transparente, o scrim no ::before ------------------ */
	.aqua-dialog {
		position: fixed;
		inset: 0;
		z-index: var(--aqua-z-modal);
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		max-width: none;
		max-height: none;
		margin: 0;
		padding: var(--aqua-space-4);
		border: 0;
		background: transparent;
		color: var(--aqua-text);
		overflow: hidden;
	}
	.aqua-dialog:not([open]) { display: none; }
	.aqua-dialog::backdrop { background: transparent; }
	.aqua-dialog::before {
		content: "";
		position: absolute;
		inset: 0;
		background: var(--aqua-veu-bg);
		animation: aqua-veu-entrar var(--aqua-t-base) var(--aqua-ease-out) both;
	}
	.aqua-dialog[data-aqua-saindo]::before { animation: aqua-veu-entrar var(--aqua-t-rapido) var(--aqua-ease-in-out) reverse both; }
	/* Um veu so: em nui-veu o .aqua-veu ja e o veu. */
	.aqua-nui-veu .aqua-dialog::before { display: none; }
	html[data-aqua-dialogo] { overflow: hidden; }

	/* ---- o painel: vidro-3, radius-xl, e entra do gatilho em t-lento ---------------- */
	.aqua-dialog__panel {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: var(--aqua-space-6);
		width: min(100%, 480px);
		max-height: 100%;
		padding: var(--aqua-space-8);
		border: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border));
		border-radius: var(--aqua-radius-xl);
		background: var(--aqua-vidro-3-bg);
		-webkit-backdrop-filter: var(--aqua-vidro-3-filtro);
		backdrop-filter: var(--aqua-vidro-3-filtro);
		box-shadow:
			inset 0 1px 0 rgb(var(--aqua-white-rgb) / 7%),
			0 1px 2px rgb(var(--aqua-black-rgb) / 20%),
			0 12px 32px -12px rgb(var(--aqua-black-rgb) / 40%);
		color: var(--aqua-text);
		transform-origin: var(--aqua-origem, 50% 50%);
		animation: aqua-entrar var(--aqua-t-lento) var(--aqua-ease-out) both;
	}
	.aqua-dialog__panel:focus-visible { outline: 0; }

	/* ---- cabecalho, corpo, rodape ------------------------------------------------- */
	.aqua-dialog__header { display: flex; align-items: flex-start; gap: var(--aqua-space-4); }
	.aqua-dialog__title {
		flex: 1 1 auto;
		min-width: 0;
		font-size: var(--aqua-fs-xl);
		font-weight: 600;
		line-height: var(--aqua-lh-tight);
		letter-spacing: -0.01em;
	}
	.aqua-dialog__close { flex: none; }
	.aqua-dialog__body {
		display: flex;
		flex-direction: column;
		gap: var(--aqua-space-3);
		min-height: 0;
		overflow: auto;
	}
	.aqua-dialog__footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--aqua-space-2); }

	/* ---- tamanho: --lg para a tabela do dashboard --------------------------------- */
	.aqua-modal--lg .aqua-dialog__panel { width: min(100%, 720px); }
}

/* ==== 46-sheet.css ==== */
/* 46-sheet.css - aqua-sheet. O dialogo que se prende ao rodape.

   Gota: NENHUMA. Superficie, como o modal (45-modal.css): a assinatura fica
   nas acoes que o sheet carrega.

   E o aqua-dialog com o painel preso a borda de baixo: o container alinha ao
   rodape e perde o respiro embaixo; o painel repete por texto o do modal
   (vidro-3, a sombra, o cabecalho, o corpo que rola, o rodape) e muda so a
   forma: largura ate 640px, radius-xl so nos dois cantos de cima, altura ate
   calc(100% - space-12), para nunca cobrir a tela inteira.

   A ideia com nome: VEM DA BORDA, NAO DO BOTAO. data-aqua-borda="baixo" no
   <dialog> faz o JS escrever --aqua-origem em 50% 100%, e o painel entra pela
   lei 4 (aqua-entrar em t-lento, a regra do 45-modal.css) crescendo do
   rodape. Nao desliza 100% como o sheet do iOS: deslizar e a coreografia de
   outro sistema, e a da Aqua e a lei 4. Nao tem alca: sem arrastar
   (coreografia sem lei, §7), a alca e decoracao.

   Decisoes, para ninguem "corrigir":
   - a altura maxima deixa space-12 de tela a mostra em cima: o sheet e uma
     folha sobre a tela, nao uma segunda tela. Conteudo maior rola no corpo.
   - o painel nao tem borda embaixo: a lamina encosta na tela.
   - os lados mantem o respiro de space-4 do dialogo, mesmo em tela estreita:
     os cantos de cima continuam visiveis, e e isso que diz "folha" e nao
     "pagina". */
@layer aqua.componente {
	.aqua-sheet { align-items: flex-end; padding-bottom: 0; }
	.aqua-sheet .aqua-dialog__panel {
		width: min(100%, 640px);
		max-height: calc(100% - var(--aqua-space-12));
		border-bottom: 0;
		border-radius: var(--aqua-radius-xl) var(--aqua-radius-xl) 0 0;
		transform-origin: var(--aqua-origem, 50% 100%);
	}
}

/* ==== 47-drawer.css ==== */
/* 47-drawer.css - aqua-drawer. O dialogo que se prende a lateral.

   Gota: NENHUMA. Superficie, como o modal e o sheet.

   E o aqua-dialog com o painel preso a direita (ou a esquerda, com --start):
   o container alinha ao fim e perde o respiro todo; o painel repete por
   texto o do modal (45-modal.css) e muda a forma: altura toda, largura ate
   400px (e nunca mais que a tela menos space-8, para sobrar tela ao lado),
   radius-xl so nos dois cantos de dentro. data-aqua-borda="direita" (ou
   "esquerda") faz o JS escrever a origem na borda: vem da lateral, nao do
   botao, pela lei 4 em t-lento.

   --start prende a esquerda. O dono e o rail de navegacao de uma NUI em tela
   estreita, que empilha aqua-nav-item dentro (55-nav-item.css).

   Decisoes, para ninguem "corrigir":
   - o painel nao tem borda no lado que encosta na tela: a lamina e a tela.
   - o corpo rola por dentro; o cabecalho e o rodape ficam no lugar. */
@layer aqua.componente {
	.aqua-drawer { justify-content: flex-end; padding: 0; }
	.aqua-drawer .aqua-dialog__panel {
		width: min(calc(100% - var(--aqua-space-8)), 400px);
		height: 100%;
		max-height: none;
		border-right: 0;
		border-radius: var(--aqua-radius-xl) 0 0 var(--aqua-radius-xl);
		transform-origin: var(--aqua-origem, 100% 50%);
	}

	/* ---- --start: preso a esquerda, os cantos viram ---------------------------------- */
	.aqua-drawer--start { justify-content: flex-start; }
	.aqua-drawer--start .aqua-dialog__panel {
		border-right: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border));
		border-left: 0;
		border-radius: 0 var(--aqua-radius-xl) var(--aqua-radius-xl) 0;
		transform-origin: var(--aqua-origem, 0% 50%);
	}
}

/* ==== 48-dropdown.css ==== */
/* 48-dropdown.css - aqua-dropdown. O menu que age, sobre a lista que ja existe.

   Gota: NENHUMA em repouso. O item de menu AGE, nao e escolhido: nao ha
   aria-selected, logo nao ha Gota parada; ao toque o canto fecha
   (gota-fechado), que e o que o aqua-opcoes__item:active ja faz. A
   diferenca para o select fica no ARIA (role=menu, role=menuitem), como a
   das abas para o segmented (41-tabs.css): mesma lista, papel diferente.

   A ideia com nome: O MENU E A LISTA. aqua-dropdown e a aqua-opcoes
   (34-select.css) com role=menu sob um aqua-btn ou aqua-icon-btn com
   aria-haspopup=menu: nao existe uma segunda lista para menus. O que a lista
   ganhou para servir de menu mora no 34-select.css: __separator (uma linha
   fina) e o tom --danger no item (tom so em acao, §1, e o item e acao). O
   ODropdownMenu do OCEON desenha a propria lista via portal; aqui e uma.

   O mecanismo e o flutuante do §10 (aqua-ui.js), com largura: "auto" (a
   largura e do conteudo, com um minimo para o menu curto nao virar pingo),
   alinhado ao inicio do gatilho ou ao fim (data-aqua-alinhar="fim" no
   gatilho: o botao de reticencias no canto direito de um card), e com saida
   por .aqua-sai. Teclado do padrao menu, no aqua-ui.js: Enter, espaco e seta
   para baixo abrem no primeiro item, seta para cima abre no ultimo; setas
   com volta; Home, End, letra; Enter e espaco ativam; Esc devolve o foco;
   Tab fecha.

   Decisoes, para ninguem "corrigir":
   - a folha e curta de proposito: forma de lista e da lista. Repetir o vidro
     aqui seria a segunda lista que a ideia proibe. */
@layer aqua.componente {
	.aqua-dropdown { min-width: 200px; }
	.aqua-dropdown[hidden] { display: none; }
}

/* ==== 49-context-menu.css ==== */
/* 49-context-menu.css - aqua-context-menu. O mesmo menu, aberto num ponto.

   Gota: a do dropdown (48-dropdown.css): nenhuma em repouso, o canto fecha
   ao toque. O item de menu age, nao e escolhido.

   A ideia com nome: O MENU NAO SABE ONDE NASCEU. E a aqua-opcoes com
   role=menu, a mesma do dropdown; o que muda e a ancora. contextmenu numa
   area com data-aqua-context-menu="#id" abre no ponteiro: o flutuante do §10
   aceita um retangulo de 0x0 como ancora. Shift+F10 e a tecla de menu abrem
   no retangulo da area, com o primeiro item focado, pelo padrao ARIA. Esc e
   Tab devolvem o foco ao elemento clicado (o "foco" do flutuante), e ativar
   dispara aqua-context-menu com { valor, rotulo, alvo } nele. O OContextMenu
   do OCEON e outro componente com outra lista; aqui e a mesma lista e o mesmo
   teclado do dropdown, no aqua-ui.js.

   A folha e uma linha, a largura minima: existe para a prova 5 e para este
   cabecalho registrar a decisao. */
@layer aqua.componente {
	.aqua-context-menu { min-width: 200px; }
	.aqua-context-menu[hidden] { display: none; }
}

/* ==== 50-popover.css ==== */
/* 50-popover.css - aqua-popover. O dialogo que nao prende.

   Gota: NENHUMA. Superficie: vidro-2, como o card e o dropdown (§5). O que
   carrega a assinatura e a acao que o popover traz, se trouxer.

   A ideia com nome: UM CARD QUE FLUTUA E RECEBE O FOCO. Nao e o tooltip
   (que so mostra) nem o modal (que prende): e conteudo que se abre a partir
   de um gatilho, com o foco dentro, e fecha com Esc, clicando fora ou ao
   tabular para fora. role=dialog sem showModal(): o resto da pagina
   continua vivo, e e isso que o distingue do modal. O "tooltip rico" do
   OCEON e isto.

   O mecanismo e o flutuante do §10 (aqua-ui.js): largura auto, alinhado ao
   inicio ou ao fim (data-aqua-alinhar no gatilho), embaixo ou em cima
   (data-aqua-lado), com saida por .aqua-sai. O JS escreve aria-controls e
   aria-expanded no gatilho, move o foco para o primeiro focavel do painel
   (ou para o proprio painel, tabindex -1) ao abrir, e devolve ao gatilho ao
   fechar. Tab depois do ultimo focavel (ou Shift+Tab antes do primeiro)
   fecha e deixa o Tab seguir do gatilho.

   Decisoes, para ninguem "corrigir":
   - largura ate 320px: e um paragrafo e uma acao, nao um formulario. Quem
     precisa de mais abre um sheet.
   - o titulo e fs-lg 600; o texto e text-muted em fs-sm, porque e apoio; as
     acoes alinham a direita, como no rodape do modal.
   - o painel focado por script nao carrega anel (data-aqua-sem-anel, a
     excecao do §10), como o painel do dialogo. */
@layer aqua.componente {
	.aqua-popover {
		display: flex;
		flex-direction: column;
		gap: var(--aqua-space-2);
		width: max-content;
		max-width: 320px;
		padding: var(--aqua-space-4);
		border: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border));
		border-radius: var(--aqua-radius-lg);
		background: var(--aqua-vidro-2-bg);
		-webkit-backdrop-filter: var(--aqua-vidro-2-filtro);
		backdrop-filter: var(--aqua-vidro-2-filtro);
		box-shadow:
			inset 0 1px 0 rgb(var(--aqua-white-rgb) / 7%),
			0 1px 2px rgb(var(--aqua-black-rgb) / 20%),
			0 12px 32px -12px rgb(var(--aqua-black-rgb) / 40%);
		color: var(--aqua-text);
	}
	.aqua-popover[hidden] { display: none; }
	.aqua-popover:focus-visible { outline: 0; }

	.aqua-popover__title {
		font-size: var(--aqua-fs-lg);
		font-weight: 600;
		line-height: var(--aqua-lh-tight);
		letter-spacing: -0.01em;
	}
	.aqua-popover__text { font-size: var(--aqua-fs-sm); line-height: var(--aqua-lh-base); color: var(--aqua-text-muted); }
	.aqua-popover__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--aqua-space-2); padding-top: var(--aqua-space-1); }
}

/* ==== 51-tooltip.css ==== */
/* 51-tooltip.css - aqua-tooltip. A Gota que aponta.

   Gota: A GOTA QUE APONTA. Decisao visual da Fase 5. Em cima do gatilho
   (data-aqua-lado="cima", o lado preferido) o tooltip e uma Gota com o canto
   afiado embaixo a esquerda, gota-bl, virado para o gatilho; quando o
   flutuante o vira para baixo, o canto afiado e o de cima a esquerda,
   gota-tl, virado para o gatilho de novo. Sem seta: o canto e a seta, e a
   silhueta e a marca. O canto NAO anima: e parado por lado (§13, e o
   criterio 6 da fase). E uma expressao nova, e entra no §13.

   A ideia com nome: a mesma. O tooltip do mercado e uma caixa preta de canto
   uniforme com uma seta triangular colada; aqui a forma que ja pertence ao
   sistema faz o trabalho da seta, e o tooltip se le como da mesma familia
   do botao que ele explica.

   E vidro-2 (§5), borda alpha-border, fs-sm em text, padding space-1
   space-3 (texto em linha, §2), largura ate 280px, so a sombra de contato:
   e pequeno, e a sombra longa e para o que tem altura. Esconde por regra
   explicita. O mecanismo e o flutuante (aqua-ui.js): alinhado ao centro,
   prefere cima, largura auto, saida por .aqua-sai; aparece depois de
   2 x t-lento sob o ponteiro ou na hora com o foco; some ao sair, ao perder
   o foco, ao clicar no gatilho e com Esc. data-aqua-tooltip="texto" monta o
   elemento sozinho, por textContent, no body; data-aqua-tooltip="#id" usa o
   elemento escrito.

   Decisoes, para ninguem "corrigir":
   - role=tooltip e aria-describedby no gatilho, escritos pelo JS ao montar.
   - text, nao text-muted: e a unica informacao do elemento, nao apoio.
   - nao recebe ponteiro (pointer-events none): o tooltip nunca segura o
     ponteiro, e passar o mouse para ele e sair do gatilho o fecha. */
@layer aqua.componente {
	.aqua-tooltip {
		width: max-content;
		max-width: 280px;
		padding: var(--aqua-space-1) var(--aqua-space-3);
		border: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border));
		border-radius: var(--aqua-gota-bl);
		background: var(--aqua-vidro-2-bg);
		-webkit-backdrop-filter: var(--aqua-vidro-2-filtro);
		backdrop-filter: var(--aqua-vidro-2-filtro);
		box-shadow:
			inset 0 1px 0 rgb(var(--aqua-white-rgb) / 7%),
			0 1px 2px rgb(var(--aqua-black-rgb) / 20%);
		color: var(--aqua-text);
		font-size: var(--aqua-fs-sm);
		line-height: var(--aqua-lh-base);
		pointer-events: none;
	}
	.aqua-tooltip[hidden] { display: none; }
	/* Virado para baixo pelo flutuante, o canto afiado sobe: continua apontando. */
	.aqua-tooltip[data-aqua-lado="baixo"] { border-radius: var(--aqua-gota-tl); }
}

/* ==== 52-toast.css ==== */
/* 52-toast.css - aqua-toasts, a pilha; e aqua-toast, o aviso.

   Gota: NENHUMA. Notificacao e mensagem, nao escolha: o toast e o fundo
   quieto (§13), e o aqua-btn--sm de acao que a aplicacao puser dentro e o
   que carrega a assinatura.

   A ideia com nome: A PILHA NO CANTO QUE PAUSA SOB O PONTEIRO. A pilha
   (.aqua-toasts, role=status e aria-live=polite, presente antes do primeiro
   toast para o leitor de tela anunciar o que entra) flutua presa ao canto
   inferior direito pelo flutuante do §10, com uma ancora de funcao que segue
   o resize, em z-toast, com Esc e clicar fora desligados: a pilha nao e um
   painel que se fecha, e uma regiao. Cada toast entra por .aqua-entra a
   partir do canto (a origem que o flutuante escreve na pilha e o toast
   herda) e sai por .aqua-sai antes de ser removido; o mais novo entra
   embaixo, mais perto do canto. O tempo (5 s por padrao, data-aqua-duracao
   em ms, 0 fixa) PAUSA sob o ponteiro e com foco dentro, e retoma ao sair.

   Tom e um ponto, como no badge (15-badge.css): --success, --warning,
   --danger, --info e --accent, os cinco tons do badge. O sexto tom do
   ONotify e o arrastar-para-fechar ficam de fora: tom e ponto, e arrastar e
   coreografia sem lei (§7). Fechar e um aqua-icon-btn--ghost --sm.

   Decisoes, para ninguem "corrigir":
   - vidro-2 com a sombra do vidro, radius-lg, space-3 space-4: e um card
     pequeno, nao um banner.
   - o texto e text em fs-sm, com o titulo em 500: mensagem e corpo, nao
     metadado; text-muted na unica informacao do elemento seria apoio sem
     nada para apoiar.
   - a pilha nao recebe ponteiro; cada toast recebe. O canto da tela
     continua clicavel entre os toasts.
   - 5 s nao e token: e tempo de ler duas linhas, nao um gesto (§7).
   - a margem negativa no fechar e do toast sobre o proprio filho (layout,
     como no joined-bar): o botao fantasma encosta no padding sem o toast
     crescer. */
@layer aqua.componente {
	/* ---- a pilha: regiao viva, presa ao canto pelo flutuante ------------------------ */
	.aqua-toasts {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: var(--aqua-space-2);
		width: max-content;
		max-width: 360px;
		pointer-events: none;
	}
	.aqua-toasts[hidden] { display: none; }

	/* ---- o toast: um card pequeno de vidro-2 ---------------------------------------- */
	.aqua-toast {
		display: flex;
		align-items: flex-start;
		gap: var(--aqua-space-3);
		max-width: 100%;
		padding: var(--aqua-space-3) var(--aqua-space-4);
		border: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border));
		border-radius: var(--aqua-radius-lg);
		background: var(--aqua-vidro-2-bg);
		-webkit-backdrop-filter: var(--aqua-vidro-2-filtro);
		backdrop-filter: var(--aqua-vidro-2-filtro);
		box-shadow:
			inset 0 1px 0 rgb(var(--aqua-white-rgb) / 7%),
			0 1px 2px rgb(var(--aqua-black-rgb) / 20%),
			0 12px 32px -12px rgb(var(--aqua-black-rgb) / 40%);
		color: var(--aqua-text);
		font-size: var(--aqua-fs-sm);
		line-height: var(--aqua-lh-base);
		pointer-events: auto;
		transform-origin: var(--aqua-origem, 100% 100%);
	}
	.aqua-toast[hidden] { display: none; }
	.aqua-toast__text { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
	.aqua-toast__title { font-weight: 500; }
	.aqua-toast__action { flex: none; align-self: center; }
	.aqua-toast__close { flex: none; margin: calc(-1 * var(--aqua-space-1)) calc(-1 * var(--aqua-space-2)) calc(-1 * var(--aqua-space-1)) 0; }

	/* ---- tom: um ponto, como no badge ----------------------------------------------- */
	.aqua-toast--success::before,
	.aqua-toast--warning::before,
	.aqua-toast--danger::before,
	.aqua-toast--info::before,
	.aqua-toast--accent::before {
		content: "";
		flex: none;
		width: 0.5em;
		height: 0.5em;
		margin-top: 0.5em;
		border-radius: var(--aqua-radius-full);
	}
	.aqua-toast--success::before { background: var(--aqua-success); }
	.aqua-toast--warning::before { background: var(--aqua-warning); }
	.aqua-toast--danger::before { background: var(--aqua-danger); }
	.aqua-toast--info::before { background: var(--aqua-info); }
	.aqua-toast--accent::before { background: var(--aqua-accent); }
}

/* ==== 53-command.css ==== */
/* 53-command.css - aqua-command. O painel do combobox num dialogo.

   Gota: NO ITEM ATIVO. Decisao visual da Fase 5. O data-aqua-ativo da paleta
   (o cursor, aria-activedescendant) recebe o canto da Gota, o fundo accent
   10% e a borda 45%: e a expressao "selecao" do §13 aplicada ao cursor,
   porque aqui nao existe escolha que a carregue e o item ativo e o unico
   que vai ser acionado. No combobox (35-combobox.css) o ativo continua sem
   Gota, porque la a escolha a tem. A regra e uma so: a Gota vai ao que vai
   ser acionado. Entra no §13.

   A ideia com nome: O PAINEL DO COMBOBOX NUM DIALOGO. aqua-dialog
   aqua-command e o <dialog> preso ao topo (3 x space-12), largura ate 560px;
   o painel repete por texto o do modal (45-modal.css) com o padding da
   lista (space-1) em vez do de texto, porque e o painel do combobox: um
   aqua-search em cima (--lg: a busca e a peca, e e o que o olho procura ao
   abrir) e a aqua-opcoes embaixo, que perde o proprio vidro como no
   combobox. A lista ganhou __group e __kbd no 34-select.css. O JS
   (aqua-ui.js) e o do combobox repetido para o dialogo: filtra por rotulo
   e dica sem acento, esconde grupo sem item, __vazio quando nada casa,
   setas e Home/End por aria-activedescendant, Enter executa e dispara
   aqua-command com { valor, rotulo } e fecha com esse returnValue; Esc e o
   do dialogo.

   Decisoes, para ninguem "corrigir":
   - sem atalho global: a tecla e da aplicacao, e a NUI disputa teclas com o
     jogo. data-aqua-abrir num botao, ou AquaUI.abrirDialogo, abrem.
   - a lista para em 7 x space-12 e o resto rola por dentro: a paleta nunca
     desce ate o rodape da tela.
   - hover continua sendo hover (o fundo do item); so o cursor tem a Gota. */
@layer aqua.componente {
	.aqua-command { align-items: flex-start; padding-top: calc(3 * var(--aqua-space-12)); }
	.aqua-command .aqua-dialog__panel {
		gap: var(--aqua-space-1);
		width: min(100%, 560px);
		padding: var(--aqua-space-1);
	}
	.aqua-command .aqua-search { flex: none; }

	/* A lista dentro do painel perde o proprio vidro: o painel e o vidro. */
	.aqua-command .aqua-opcoes {
		flex: 1 1 auto;
		max-height: calc(var(--aqua-space-12) * 7);
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		box-shadow: none;
	}

	/* ---- a Gota no cursor: o item ativo e o unico que vai ser acionado -------------- */
	.aqua-command .aqua-opcoes__item[data-aqua-ativo] {
		border-color: transparent;
		background-color: var(--aqua-selecao-bg);
		box-shadow: var(--aqua-selecao-sombra);
	}
	.aqua-command .aqua-opcoes__item[data-aqua-ativo] .aqua-opcoes__icon { color: var(--aqua-text); }
}

/* ==== 54-confirm-dialog.css ==== */
/* 54-confirm-dialog.css - aqua-confirm-dialog. O modal pequeno que responde.

   Gota: NENHUMA. Superficie, como o modal (45-modal.css): a acao que
   confirma e quem a carrega.

   E o aqua-dialog com o painel pequeno: largura ate 400px, space-6 de
   padding, gap space-3, em coluna. Icone opcional (__icon, fs-2xl) em
   text-muted, ou em danger com --danger; titulo em fs-lg; texto (__text) em
   text-muted; o rodape e o do dialogo. --danger e o unico modificador, e o
   dono e toda acao destrutiva do painel (banir, excluir, reiniciar). Nao ha
   --success: confirmar nao e celebrar.

   A ideia com nome: A PERGUNTA CURTA COM O SEGURO EM FOCO. O foco inicial
   vai ao [autofocus], e a demo o poe na acao segura (Cancelar) quando e
   --danger e na principal quando nao e; Esc e o cancel do dialogo. A
   resposta volta em AquaUI.confirmar (Promise<boolean>) e no evento
   aqua-dialogo com { motivo, valor }: returnValue "confirmar" ou "". E o
   generico do OCostWarningDialog, que nao e portado. Zero JS proprio. */
@layer aqua.componente {
	.aqua-confirm-dialog .aqua-dialog__panel {
		gap: var(--aqua-space-3);
		width: min(100%, 400px);
		padding: var(--aqua-space-6);
	}
	.aqua-confirm-dialog__icon { display: block; width: var(--aqua-fs-2xl); height: var(--aqua-fs-2xl); color: var(--aqua-text-muted); }
	.aqua-confirm-dialog--danger .aqua-confirm-dialog__icon { color: var(--aqua-danger); }
	.aqua-confirm-dialog .aqua-dialog__title { font-size: var(--aqua-fs-lg); }
	.aqua-confirm-dialog__text { color: var(--aqua-text-muted); }
	.aqua-confirm-dialog .aqua-dialog__footer { padding-top: var(--aqua-space-3); }
}

/* ==== 55-nav-item.css ==== */
/* 55-nav-item.css - aqua-nav-item. O item do rail, promovido a componente.

   Gota: A SELECAO. O item com aria-current recebe o canto da Gota (gota-bl),
   o fundo accent 10%, a borda accent 45%, o texto em text e o icone em
   accent, com border-radius transicionando em t-base para a migracao ser
   vista: e a expressao "selecao" do §13, que o rail do atelie mostrava desde
   a 3b como cromo proprio. Agora e do kit, e o rail e o primeiro consumidor,
   como o console foi do segmented e do slider.

   A ideia com nome: O ITEM DE NAVEGACAO E UM CLICAVEL COMPLETO. <a> ou
   <button>, com __icon, __label (com reticencias) e __count (fs-xs mono
   text-muted). radius-sm, fs-sm 500, text-muted em repouso; os cinco
   estados do §4 por inteiro: hover text mais alpha-hover e sobe 1px; press
   adensa e fecha o canto (gota-fechado); foco clareia com o anel;
   disabled e aria-disabled esmaecem. a.aqua-nav-item restaura a cor e apaga
   o sublinhado que a base da a todo link, nos dois estados, porque aqui o
   link e um item, nao um texto.

   --sm para o rail denso de NUI (space-1 space-2). A largura e do rail
   (width 100%): o item nao decide quanto ocupa.

   Decisoes, para ninguem "corrigir":
   - a contagem e mono tabular para 9 e 10 nao mudarem de largura, como o
     badge--count; nao e badge porque nao tem borda: e um numero ao lado.
   - o atual sob o mouse continua atual: o par com :hover impede o hover de
     repouso de vencer o selecionado.
   - o consumidor NAO acrescenta aqua-clicavel: a utilitaria vence a
     componente por camada e escreveria o selecionado por cima deste. */
@layer aqua.componente {
	.aqua-nav-item {
		display: flex;
		align-items: center;
		gap: var(--aqua-space-2);
		width: 100%;
		min-width: 0;
		padding: var(--aqua-space-2) var(--aqua-space-3);
		border: 1px solid transparent;
		border-radius: var(--aqua-radius-sm);
		background: none;
		color: var(--aqua-text-muted);
		font-size: var(--aqua-fs-sm);
		font-weight: 500;
		line-height: var(--aqua-lh-base);
		text-align: left;
		text-decoration: none;
		cursor: pointer;
		transition:
			transform var(--aqua-t-toque) var(--aqua-ease-out),
			border-radius var(--aqua-t-base) var(--aqua-ease-out),
			backdrop-filter var(--aqua-t-toque) var(--aqua-ease-out),
			background-color var(--aqua-t-rapido) var(--aqua-ease-out),
			border-color var(--aqua-t-rapido) var(--aqua-ease-out),
			color var(--aqua-t-rapido) var(--aqua-ease-out),
			filter var(--aqua-t-rapido) var(--aqua-ease-out);
	}
	.aqua-nav-item__icon { flex: none; width: 1.15em; height: 1.15em; }
	.aqua-nav-item__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.aqua-nav-item__count {
		flex: none;
		font-family: var(--aqua-font-mono);
		font-variant-numeric: tabular-nums;
		font-size: var(--aqua-fs-xs);
		color: var(--aqua-text-muted);
	}

	/* ---- os cinco estados ------------------------------------------------------------ */
	.aqua-nav-item:hover {
		color: var(--aqua-text);
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-hover));
		text-decoration: none;
		transform: translateY(-1px);
	}
	.aqua-nav-item:focus-visible { filter: brightness(1.06); }
	.aqua-nav-item:active {
		transform: translateY(-1px) scale(0.97);
		border-radius: var(--aqua-radius-btn-fechado);
		background-color: rgb(var(--aqua-surface-rgb) / var(--aqua-press-tint));
		-webkit-backdrop-filter: var(--aqua-press-filtro);
		backdrop-filter: var(--aqua-press-filtro);
	}
	.aqua-nav-item:disabled,
	.aqua-nav-item[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; transform: none; filter: none; }

	/* ---- o atual: a Gota migra para ca -------------------------------------------------- */
	.aqua-nav-item[aria-current],
	.aqua-nav-item[aria-current]:hover {
		color: var(--aqua-text);
		border-color: transparent;
		background-color: var(--aqua-selecao-bg);
		box-shadow: var(--aqua-selecao-sombra);
	}
	.aqua-nav-item[aria-current] .aqua-nav-item__icon { color: var(--aqua-text); }
	.aqua-nav-item[aria-current]:active { border-radius: var(--aqua-radius-btn-fechado); }

	/* ---- --sm: o rail denso de NUI ------------------------------------------------------ */
	.aqua-nav-item--sm { padding: var(--aqua-space-1) var(--aqua-space-2); }
}

/* ==== 56-nav-group.css ==== */
/* 56-nav-group.css - aqua-nav-group. O details que empilha itens, sem JS.

   Gota: NENHUMA. O item dentro (55-nav-item.css) a carrega. O grupo e o
   rotulo que abre e fecha: nao escolhe, organiza.

   A ideia com nome: O <DETAILS> DO EXPAND-SELECT, SEM RADIO. A <summary> e o
   rotulo do grupo (o .aqua-label como esta: fs-sm 500 text-muted, SEM caixa
   alta, proibicao 1) com o caret que gira em [open]; a lista empilha
   aqua-nav-item com space-1 de gap e entra por aqua-entrar em t-base a
   partir do topo (lei 4), como a lista do expand-select. Abre e fecha
   sozinho: zero JS.

   O grupo fechado que contem o item atual acende o rotulo em text, por
   :has([aria-current]), como melhoria progressiva (§9): apague a regra e o
   grupo continua abrindo e o item continua marcado.

   Decisoes, para ninguem "corrigir":
   - a summary e clicavel por inteiro (§4): hover text mais alpha-hover, mas
     SEM subir 1px, porque subir e o gesto de item, e um rotulo de secao que
     sobe le como item; press adensa; foco clareia com o anel; o marcador
     nativo some. details nao tem disabled: aria-disabled na summary.
   - o caret e text-muted e gira 180 graus em t-base, como em todo gatilho
     que abre do kit. */
@layer aqua.componente {
	.aqua-nav-group { display: block; min-width: 0; }

	/* ---- o gatilho: a summary, o rotulo do grupo --------------------------------------- */
	.aqua-nav-group__trigger {
		display: flex;
		align-items: center;
		gap: var(--aqua-space-2);
		padding: var(--aqua-space-1) var(--aqua-space-3);
		border-radius: var(--aqua-radius-sm);
		list-style: none;
		color: var(--aqua-text-muted);
		font-size: var(--aqua-fs-sm);
		font-weight: 500;
		line-height: var(--aqua-lh-base);
		cursor: pointer;
		transition:
			backdrop-filter var(--aqua-t-toque) var(--aqua-ease-out),
			background-color var(--aqua-t-rapido) var(--aqua-ease-out),
			color var(--aqua-t-rapido) var(--aqua-ease-out),
			filter var(--aqua-t-rapido) var(--aqua-ease-out);
	}
	.aqua-nav-group__trigger::-webkit-details-marker { display: none; }
	.aqua-nav-group__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.aqua-nav-group__caret { flex: none; width: 1em; height: 1em; transition: transform var(--aqua-t-base) var(--aqua-ease-out); }
	.aqua-nav-group[open] > .aqua-nav-group__trigger .aqua-nav-group__caret { transform: rotate(180deg); }
	.aqua-nav-group__trigger:hover { color: var(--aqua-text); background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-hover)); }
	.aqua-nav-group__trigger:focus-visible { filter: brightness(1.06); }
	.aqua-nav-group__trigger:active {
		background-color: rgb(var(--aqua-surface-rgb) / var(--aqua-press-tint));
		-webkit-backdrop-filter: var(--aqua-press-filtro);
		backdrop-filter: var(--aqua-press-filtro);
	}
	.aqua-nav-group__trigger[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; filter: none; }

	/* ---- a lista: entra do topo (lei 4) ------------------------------------------------- */
	.aqua-nav-group__list { display: flex; flex-direction: column; gap: var(--aqua-space-1); padding-top: var(--aqua-space-1); }
	.aqua-nav-group[open] > .aqua-nav-group__list {
		transform-origin: 50% 0%;
		animation: aqua-entrar var(--aqua-t-base) var(--aqua-ease-out) both;
	}

	/* ---- fechado com o atual dentro: o rotulo acende. Melhoria progressiva (§9) ------ */
	.aqua-nav-group:not([open]):has([aria-current]) > .aqua-nav-group__trigger { color: var(--aqua-text); }
}

/* ==== 57-breadcrumb.css ==== */
/* 57-breadcrumb.css - aqua-breadcrumb. O caminho com o traco desenhado.

   Gota: NENHUMA. Um caminho nao e uma escolha: o atual (aria-current) e onde
   se esta, e marca por peso e cor, sem caixa que carregue o canto.

   A ideia com nome: O SEPARADOR E DESENHADO, NAO ESCRITO. Cada item depois do
   primeiro leva um ::before que e um quadrado de 0.4em com borda direita e
   inferior de 1px em text-muted, girado para tras: um chevron sem glifo, sem
   icone no markup, sem ponto do meio (proibicao 2) e sem barra. O consumidor
   escreve <nav><ol><li> e mais nada.

   O link e text-muted fs-sm 500; hover e text com sublinhado (aqui o
   sublinhado da base FICA: o crumb e texto, nao caixa, e o sublinhado e o
   hover honesto de texto); foco com o anel, sem subir 1px (texto em linha
   nao sobe); o atual e text 500. Zero JS.

   Decisoes, para ninguem "corrigir":
   - o raio minimo no link e para o anel desenhado contornar um canto e nao
     um retangulo de texto: calc(radius-xs / 2), a unica derivacao permitida
     abaixo de xs (§5). */
@layer aqua.componente {
	.aqua-breadcrumb { display: block; min-width: 0; }
	.aqua-breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aqua-space-2); }
	.aqua-breadcrumb__item {
		display: flex;
		align-items: center;
		gap: var(--aqua-space-2);
		min-width: 0;
		font-size: var(--aqua-fs-sm);
		font-weight: 500;
		line-height: var(--aqua-lh-base);
		color: var(--aqua-text-muted);
	}
	/* ---- o separador: um chevron de borda, girado ---------------------------------- */
	.aqua-breadcrumb__item + .aqua-breadcrumb__item::before {
		content: "";
		flex: none;
		width: 0.4em;
		height: 0.4em;
		border-right: 1px solid var(--aqua-text-muted);
		border-bottom: 1px solid var(--aqua-text-muted);
		transform: rotate(-45deg);
	}
	.aqua-breadcrumb__item[aria-current] { color: var(--aqua-text); }

	/* ---- o link: texto, com o hover honesto de texto -------------------------------- */
	.aqua-breadcrumb__link {
		color: var(--aqua-text-muted);
		text-decoration: none;
		border-radius: calc(var(--aqua-radius-xs) / 2);
		transition: color var(--aqua-t-rapido) var(--aqua-ease-out);
	}
	.aqua-breadcrumb__link:hover { color: var(--aqua-text); text-decoration: underline; text-underline-offset: 0.15em; }
	.aqua-breadcrumb__link:focus-visible { filter: brightness(1.06); }
	.aqua-breadcrumb__link:active { color: var(--aqua-text); }
}

/* ==== 58-pagination.css ==== */
/* 58-pagination.css - aqua-pagination. A pagina atual e a escolha.

   Gota: A SELECAO. A pagina atual (aria-current="page") recebe o canto da
   Gota (gota-bl), o fundo accent 10%, a borda 45% e text, com border-radius
   em t-base: a assinatura migra ao paginar, como no chip e no nav-item.

   A ideia com nome: NUMEROS SOLTOS, UMA ESCOLHA. Nao ha barra nem trilho: os
   numeros sao alvos de 32px em radius-xs, mono tabular (9 e 10 com a mesma
   largura), text-muted em repouso, com os cinco estados do §4; anterior e
   proxima sao aqua-icon-btn --sm --ghost, o alvo de icone que o kit ja tem;
   __gap e as reticencias em text-muted, sem hover. O JS (aqua-ui.js) move
   aria-current ao clicar numa pagina, leva a vizinha em anterior e proxima,
   desabilita as setas nas pontas e dispara aqua-pagination com { pagina }.
   Renderizar as paginas certas e da aplicacao; o kit move a marca.

   Decisoes, para ninguem "corrigir":
   - fs-sm 500 no numero: e um controle denso de tabela, nao um titulo.
   - nao ha --sm: o alvo de 32px ja e o minimo tocavel.
   - a atual sob o mouse continua atual: o par com :hover. */
@layer aqua.componente {
	.aqua-pagination { display: inline-flex; align-items: center; gap: var(--aqua-space-1); }

	/* ---- o numero: alvo de 32px, mono tabular ----------------------------------------- */
	.aqua-pagination__page {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: var(--aqua-space-8);
		padding: var(--aqua-space-1) var(--aqua-space-2);
		border: 1px solid transparent;
		border-radius: var(--aqua-radius-xs);
		background: none;
		color: var(--aqua-text-muted);
		font-family: var(--aqua-font-mono);
		font-variant-numeric: tabular-nums;
		font-size: var(--aqua-fs-sm);
		font-weight: 500;
		line-height: var(--aqua-lh-base);
		cursor: pointer;
		transition:
			transform var(--aqua-t-toque) var(--aqua-ease-out),
			border-radius var(--aqua-t-base) var(--aqua-ease-out),
			backdrop-filter var(--aqua-t-toque) var(--aqua-ease-out),
			background-color var(--aqua-t-rapido) var(--aqua-ease-out),
			border-color var(--aqua-t-rapido) var(--aqua-ease-out),
			color var(--aqua-t-rapido) var(--aqua-ease-out),
			filter var(--aqua-t-rapido) var(--aqua-ease-out);
	}
	.aqua-pagination__page:hover {
		color: var(--aqua-text);
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-hover));
		transform: translateY(-1px);
	}
	.aqua-pagination__page:focus-visible { filter: brightness(1.06); }
	.aqua-pagination__page:active {
		transform: translateY(-1px) scale(0.97);
		border-radius: var(--aqua-radius-btn-fechado);
		background-color: rgb(var(--aqua-surface-rgb) / var(--aqua-press-tint));
		-webkit-backdrop-filter: var(--aqua-press-filtro);
		backdrop-filter: var(--aqua-press-filtro);
	}
	.aqua-pagination__page:disabled,
	.aqua-pagination__page[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; filter: none; }

	/* ---- a atual: a Gota migra para ca -------------------------------------------------- */
	.aqua-pagination__page[aria-current],
	.aqua-pagination__page[aria-current]:hover {
		color: var(--aqua-text);
		border-color: transparent;
		background-color: var(--aqua-selecao-bg);
		box-shadow: var(--aqua-selecao-sombra);
	}
	.aqua-pagination__page[aria-current]:active { border-radius: var(--aqua-radius-btn-fechado); }

	/* ---- as reticencias: texto, sem hover ----------------------------------------------- */
	.aqua-pagination__gap {
		display: inline-flex;
		justify-content: center;
		min-width: var(--aqua-space-8);
		color: var(--aqua-text-muted);
		font-family: var(--aqua-font-mono);
		font-size: var(--aqua-fs-sm);
		line-height: var(--aqua-lh-base);
	}
}

/* ==== 59-stepper.css ==== */
/* 59-stepper.css - aqua-stepper. O passo atual e uma Gota que anda com o progresso.

   Gota: O PASSO ATUAL. Decisao visual da Fase 5. O marcador do passo com
   aria-current="step" E a Gota (gota-bl), com fundo accent solido e o numero
   em on-accent (8.07, medido); o passo feito (data-aqua-feito) relaxa em
   circulo accent 10% com borda 45% e o check desenhado com borda; o futuro e
   um circulo com borda alpha-border-strong e o numero em text-muted. Ao
   avancar, o feito relaxa e a Gota migra para o proximo: a assinatura anda
   com o progresso, como a selecao anda com a escolha. O marcador tem 24px
   (space-6), dentro do limite do §13, e o canto transiciona em t-base.
   Entra no §13.

   A ideia com nome: a mesma. O default do mercado e circulos numerados com
   a linha preenchida; aqui so o atual tem forma propria, e e a forma da
   marca.

   A linha entre marcadores sao dois segmentos por passo (::before ate o
   marcador, ::after do marcador em diante), 1px em alpha-border; o caminho
   ja andado (os dois segmentos do feito e o segmento de chegada do atual) e
   accent 45%. O numero e sequencia de verdade, entao a proibicao 4 nao se
   aplica, e e 1, nao 01. --vertical empilha, com a linha descendo do
   marcador; o dono e o checkout da loja em tela estreita e o tour (Fase 7).
   Zero JS: o estado e atributo, e quem avanca e a aplicacao.

   Decisoes, para ninguem "corrigir":
   - o check e desenhado com borda (o traco do separador do breadcrumb,
     girado ao contrario), no ::before do marcador; o numero do feito some
     por cor transparente, sem trocar o texto.
   - o numero do marcador e fs-xs, permitido pelo §3 porque o marcador e um
     badge de 24px; a dica e fs-sm.
   - o stepper nao e clicavel: navegar entre passos e decisao da aplicacao
     (um checkout nao deixa pular para o pagamento). Sem hover, sem press. */
@layer aqua.componente {
	.aqua-stepper { display: flex; align-items: flex-start; min-width: 0; }
	.aqua-stepper__step {
		position: relative;
		display: flex;
		flex: 1 1 0;
		flex-direction: column;
		align-items: center;
		gap: var(--aqua-space-2);
		min-width: 0;
		padding: 0 var(--aqua-space-1);
		text-align: center;
	}

	/* ---- a linha: dois segmentos por passo, e o caminho andado em accent ----------- */
	.aqua-stepper__step::before,
	.aqua-stepper__step::after {
		content: "";
		position: absolute;
		top: calc(var(--aqua-space-6) / 2);
		height: 1px;
		background: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border));
	}
	.aqua-stepper__step::before { left: 0; right: calc(50% + var(--aqua-space-6) / 2 + var(--aqua-space-1)); }
	.aqua-stepper__step::after { left: calc(50% + var(--aqua-space-6) / 2 + var(--aqua-space-1)); right: 0; }
	.aqua-stepper__step:first-child::before,
	.aqua-stepper__step:last-child::after { display: none; }
	.aqua-stepper__step[data-aqua-feito]::before,
	.aqua-stepper__step[data-aqua-feito]::after,
	.aqua-stepper__step[aria-current="step"]::before { background: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border-strong)); }

	/* ---- o marcador: circulo, e a Gota no atual ------------------------------------- */
	.aqua-stepper__marker {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: none;
		width: var(--aqua-space-6);
		height: var(--aqua-space-6);
		border: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border-strong));
		border-radius: var(--aqua-radius-full);
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-rest));
		color: var(--aqua-text-muted);
		font-family: var(--aqua-font-mono);
		font-variant-numeric: tabular-nums;
		font-size: var(--aqua-fs-xs);
		font-weight: 500;
		line-height: 1;
		transition:
			border-radius var(--aqua-t-base) var(--aqua-ease-out),
			background-color var(--aqua-t-base) var(--aqua-ease-out),
			border-color var(--aqua-t-base) var(--aqua-ease-out),
			color var(--aqua-t-base) var(--aqua-ease-out);
	}
	.aqua-stepper__step[data-aqua-feito] .aqua-stepper__marker {
		border-color: transparent;
		background-color: var(--aqua-selecao-bg);
		box-shadow: var(--aqua-selecao-sombra);
		color: transparent;
	}
	/* o check desenhado: um L de borda, girado */
	.aqua-stepper__step[data-aqua-feito] .aqua-stepper__marker::before {
		content: "";
		position: absolute;
		width: 0.4em;
		height: 0.75em;
		margin-top: -0.2em;
		border-right: calc(var(--aqua-space-1) / 2) solid var(--aqua-text);
		border-bottom: calc(var(--aqua-space-1) / 2) solid var(--aqua-text);
		transform: rotate(45deg);
	}
	.aqua-stepper__step[aria-current="step"] .aqua-stepper__marker {
		border-color: transparent;
		background-color: var(--aqua-escolha-bg);
		color: var(--aqua-escolha-fg);
	}

	/* ---- o texto ----------------------------------------------------------------- */
	.aqua-stepper__text { display: flex; flex-direction: column; min-width: 0; }
	.aqua-stepper__label { font-size: var(--aqua-fs-sm); font-weight: 500; line-height: var(--aqua-lh-base); color: var(--aqua-text-muted); }
	.aqua-stepper__step[data-aqua-feito] .aqua-stepper__label { font-weight: 400; color: var(--aqua-text); }
	.aqua-stepper__step[aria-current="step"] .aqua-stepper__label { color: var(--aqua-text); }
	.aqua-stepper__hint { font-size: var(--aqua-fs-sm); line-height: var(--aqua-lh-base); color: var(--aqua-text-muted); }

	/* ---- --vertical: empilha, a linha desce do marcador --------------------------------- */
	.aqua-stepper--vertical { flex-direction: column; gap: var(--aqua-space-4); }
	.aqua-stepper--vertical .aqua-stepper__step {
		flex: none;
		flex-direction: row;
		align-items: flex-start;
		gap: var(--aqua-space-3);
		padding: 0;
		text-align: left;
	}
	.aqua-stepper--vertical .aqua-stepper__step::before { display: none; }
	.aqua-stepper--vertical .aqua-stepper__step::after {
		top: calc(var(--aqua-space-6) + var(--aqua-space-1));
		right: auto;
		bottom: calc(var(--aqua-space-1) - var(--aqua-space-4));
		left: calc(var(--aqua-space-6) / 2);
		width: 1px;
		height: auto;
	}
	.aqua-stepper--vertical .aqua-stepper__step:last-child::after { display: none; }
}

/* ==== 60-accordion.css ==== */
/* 60-accordion.css - aqua-accordion. O details do expand-select, sem radio.

   Gota: NENHUMA. A sanfona abre conteudo, nao escolhe: e chao quieto.

   A ideia com nome: ITENS SEPARADOS POR UMA LINHA, NAO CAIXAS EMPILHADAS.
   Cada item e um <details> (aqua-accordion__item); a <summary> e o gatilho,
   clicavel por inteiro (§4): space-3 space-2, radius-xs, titulo fs-md 500 em
   text, hover alpha-hover e sobe 1px, press adensa e fecha o canto, foco com
   o anel, aria-disabled esmaece; o marcador nativo some e o caret gira em
   [open]. O corpo entra por aqua-entrar em t-base do topo (lei 4) e tem
   space-3 embaixo. Uma linha fina de alpha-border separa os itens, de ponta
   a ponta. Sem vidro proprio: e conteudo dentro de uma superficie que ja
   existe; caixa dentro de caixa e o que o OSettingSection recolhivel faz.

   Abre e fecha sozinho. data-aqua-exclusivo no bloco (aqua-ui.js) fecha os
   irmaos ao abrir um, ouvindo toggle em captura, porque toggle nao borbulha.

   Decisoes, para ninguem "corrigir":
   - o titulo nao muda de cor ao abrir: o caret e o estado, e o conteudo e a
     resposta. Acender o titulo seria dizer duas vezes.
   - o padding lateral da summary e do corpo e o mesmo (space-2): a linha vai
     de ponta a ponta e o texto do corpo alinha com o titulo. */
@layer aqua.componente {
	.aqua-accordion { display: flex; flex-direction: column; min-width: 0; }
	.aqua-accordion__item { display: block; min-width: 0; }
	.aqua-accordion__item + .aqua-accordion__item { border-top: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border)); }

	/* ---- o gatilho: a summary, clicavel por inteiro -------------------------------------- */
	.aqua-accordion__trigger {
		display: flex;
		align-items: center;
		gap: var(--aqua-space-3);
		padding: var(--aqua-space-3) var(--aqua-space-2);
		border: 1px solid transparent;
		border-radius: var(--aqua-radius-xs);
		list-style: none;
		color: var(--aqua-text);
		font-size: var(--aqua-fs-md);
		font-weight: 500;
		line-height: var(--aqua-lh-base);
		cursor: pointer;
		transition:
			transform var(--aqua-t-toque) var(--aqua-ease-out),
			border-radius var(--aqua-t-toque) var(--aqua-ease-out),
			backdrop-filter var(--aqua-t-toque) var(--aqua-ease-out),
			background-color var(--aqua-t-rapido) var(--aqua-ease-out),
			filter var(--aqua-t-rapido) var(--aqua-ease-out);
	}
	.aqua-accordion__trigger::-webkit-details-marker { display: none; }
	.aqua-accordion__title { flex: 1 1 auto; min-width: 0; }
	.aqua-accordion__caret { flex: none; width: 1em; height: 1em; color: var(--aqua-text-muted); transition: transform var(--aqua-t-base) var(--aqua-ease-out); }
	.aqua-accordion__item[open] > .aqua-accordion__trigger .aqua-accordion__caret { transform: rotate(180deg); }
	.aqua-accordion__trigger:hover {
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-hover));
		transform: translateY(-1px);
	}
	.aqua-accordion__trigger:focus-visible { filter: brightness(1.06); }
	.aqua-accordion__trigger:active {
		transform: translateY(-1px) scale(0.97);
		border-radius: var(--aqua-radius-btn-fechado);
		background-color: rgb(var(--aqua-surface-rgb) / var(--aqua-press-tint));
		-webkit-backdrop-filter: var(--aqua-press-filtro);
		backdrop-filter: var(--aqua-press-filtro);
	}
	.aqua-accordion__trigger[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; transform: none; filter: none; }

	/* ---- o corpo: entra do topo (lei 4) --------------------------------------------------- */
	.aqua-accordion__body { padding: 0 var(--aqua-space-2) var(--aqua-space-3); }
	.aqua-accordion__item[open] > .aqua-accordion__body {
		transform-origin: 50% 0%;
		animation: aqua-entrar var(--aqua-t-base) var(--aqua-ease-out) both;
	}
}

/* ==== 61-filter-bar.css ==== */
/* 61-filter-bar.css - aqua-filter-bar. A barra que a demo do filter-select ja mostrava.

   Gota: NENHUMA. E layout. Os filtros dentro dela acendem (o filter-select
   com escolha, 36-filter-select.css) e recebem a Gota (o chip pressionado,
   12-chip.css).

   A ideia com nome: UMA LINHA QUE COMPOE O QUE JA EXISTE. Busca (aqua-search
   --sm), filter-select, chips num __group, e um __end que empurra para a
   direita o Limpar (aqua-btn --ghost --sm com data-aqua-limpar-filtros).
   Gap space-2, alinhada ao centro, quebra de linha quando aperta. Sem vidro:
   a barra mora numa superficie que ja existe (a pagina, um card, um painel).
   O OFilterBar e isto, com a busca e os chips proprios; aqui sao os do kit.

   O Limpar so aparece quando ha filtro agindo, por :has() como melhoria
   progressiva (§9): um select com data-aqua-escolhido, um chip com
   aria-pressed=true ou uma busca com texto. A regra e escrita como
   :not(:has(...)) escondendo, e nao como :has() mostrando: sem :has() a regra
   inteira e descartada e o botao fica sempre visivel, e ainda limpa. O JS
   (aqua-ui.js) desfaz tudo: esvazia a busca, despressiona os chips, zera os
   selects e dispara aqua-filter-bar com { motivo: "limpar" }; e da ao chip da
   barra a alternancia de aria-pressed ao clicar, porque aqui o chip e filtro.

   Decisoes, para ninguem "corrigir":
   - o __end usa margin-left: auto, margem de layout do container sobre o
     filho (como o joined-bar), nao margem do componente.
   - o Limpar e ghost e pequeno: e a acao que desfaz, nao a que faz. */
@layer aqua.componente {
	.aqua-filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aqua-space-2); min-width: 0; }
	.aqua-filter-bar__group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aqua-space-1); }
	.aqua-filter-bar__end { display: flex; align-items: center; gap: var(--aqua-space-2); margin-left: auto; }

	/* ---- o Limpar some quando nada age. Melhoria progressiva (§9). --------------------- */
	.aqua-filter-bar:not(:has([data-aqua-escolhido], [aria-pressed="true"], .aqua-search__input:not(:placeholder-shown))) .aqua-filter-bar__clear { visibility: hidden; }
}

/* ==== 62-progress.css ==== */
/* 62-progress.css - aqua-progress. O quanto ja foi.

   Gota: A CABECA E UMA GOTA QUE PUXA O RASTRO; ANDA AO TRANSFERIR E ASSENTA
   AO TERMINAR. E a linha "progresso (Fase 6)" do CONVENCOES §13, escrita em
   2026-09-03 e cumprida aqui. O trilho e a linha fina do slider; o rastro e
   accent do inicio ate a cabeca; a cabeca e uma Gota de space-4 (16px, o
   tamanho do spinner) em accent. Enquanto o valor nao chegou ao maximo, a
   cabeca PERCORRE (aqua-gota-percorre: o canto afiado anda pelos quatro
   cantos e a massa inclina 1px atras), a mesma espera do spinner e do botao
   que espera - o sistema tem uma espera so. Ao chegar ao maximo
   (data-aqua-completo, escrito pelo JS) a animacao para e a cabeca ASSENTA:
   o canto vira para a parede da direita (gota-br), como o interruptor ligado
   chega com o canto virado para a parede em que se apoia. Cabe no limite do
   §13: 16px.

   Sem aria-valuenow e indeterminado: o rastro some e a cabeca vai e volta
   pelo trilho (aqua-progress-anda, alternate), percorrendo ao mesmo tempo.
   Nao e a faixa varrendo com gradiente (o shimmer que a prova 7 reprova):
   e a mesma Gota, sem saber onde vai parar.

   O <progress> nativo nao deixa desenhar a cabeca, entao o mecanismo e o do
   slider: um <div role="progressbar"> com aria-valuemin, aria-valuemax e
   aria-valuenow, e o JS escreve --aqua-progress-pct; dai o CSS deriva a
   largura do rastro e o lugar da cabeca. Escrever aria-valuenow basta: o
   observador do aqua-ui.js segue o atributo, como segue data-aqua-icon.

   Decisoes, para ninguem "corrigir":
   - o rastro e um gradiente? Nao: e um elemento (__fill) com largura
     calculada, e a parada e o CENTRO da cabeca, nao pct% do trilho - a
     cabeca anda de 0 a largura menos cabeca, e o rastro acompanha.
   - as duas animacoes do indeterminado nao brigam: percorre escreve
     border-radius e transform, anda escreve left. Animar left faz layout,
     e num elemento absoluto de 16px isso e nada.
   - left e width transicionam em t-base: quando o valor muda, a cabeca e
     VISTA andando e puxando o rastro; sem a transicao ela teleporta.
   - um tom so, accent. Falha e um aqua-alert de tom danger, nao uma barra
     vermelha: o progress tem um papel, e cor de sinal e ponto (§5).
   - __label e __value sao opcionais; o valor vem de aria-valuetext quando
     a aplicacao o escreve ("3 de 8 mapas"), senao e a porcentagem.
   - --sm (cabeca space-3, trilho space-1) e para a linha de arquivo do
     file-picker, que mostra o envio de cada arquivo.
   - sob prefers-reduced-motion a base congela o quadro 0: sobra a Gota
     parada no lugar do valor, que ainda diz quanto ja foi. */
@layer aqua.componente {
	.aqua-progress {
		--aqua-progress-pct: 0;
		--aqua-progress-cabeca: var(--aqua-space-4);
		--aqua-progress-trilho: var(--aqua-space-2);
		display: flex;
		flex-direction: column;
		gap: var(--aqua-space-1);
		min-width: 0;
	}

	/* ---- rotulo e valor, opcionais ------------------------------------------------- */
	.aqua-progress__header {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--aqua-space-3);
		font-size: var(--aqua-fs-sm);
		line-height: var(--aqua-lh-base);
	}
	.aqua-progress__label {
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-weight: 500;
		color: var(--aqua-text-muted);
	}
	.aqua-progress__value {
		flex: none;
		font-family: var(--aqua-font-mono);
		font-variant-numeric: tabular-nums;
		color: var(--aqua-text);
	}

	/* ---- o trilho: a linha fina do slider, centrada na altura da cabeca ------------- */
	.aqua-progress__track {
		position: relative;
		height: var(--aqua-progress-cabeca);
	}
	.aqua-progress__track::before {
		content: "";
		position: absolute;
		inset: calc((var(--aqua-progress-cabeca) - var(--aqua-progress-trilho)) / 2) 0;
		border: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border-strong));
		border-radius: var(--aqua-radius-full);
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-rest));
	}

	/* ---- o rastro: accent ate o centro da cabeca ------------------------------------- */
	.aqua-progress__fill {
		position: absolute;
		top: calc((var(--aqua-progress-cabeca) - var(--aqua-progress-trilho)) / 2);
		bottom: calc((var(--aqua-progress-cabeca) - var(--aqua-progress-trilho)) / 2);
		left: 0;
		width: calc(var(--aqua-progress-cabeca) / 2 + (100% - var(--aqua-progress-cabeca)) * var(--aqua-progress-pct) / 100);
		border-radius: var(--aqua-radius-full);
		background-color: var(--aqua-accent);
		transition: width var(--aqua-t-base) var(--aqua-ease-out);
	}

	/* ---- a cabeca: a Gota que percorre enquanto transfere ---------------------------- */
	.aqua-progress__head {
		position: absolute;
		top: 0;
		left: calc((100% - var(--aqua-progress-cabeca)) * var(--aqua-progress-pct) / 100);
		width: var(--aqua-progress-cabeca);
		height: var(--aqua-progress-cabeca);
		border-radius: var(--aqua-gota-bl);
		background-color: var(--aqua-accent);
		animation: aqua-gota-percorre calc(var(--aqua-t-lento) * 4) var(--aqua-ease-in-out) infinite;
		transition:
			left var(--aqua-t-base) var(--aqua-ease-out),
			border-radius var(--aqua-t-base) var(--aqua-ease-out);
	}

	/* Assentada: ao chegar ao maximo a cabeca para e vira o canto para a parede
	   da direita, em que se apoia. */
	.aqua-progress[data-aqua-completo] .aqua-progress__head {
		animation: none;
		border-radius: var(--aqua-gota-br);
	}

	/* Indeterminado: sem rastro; a cabeca vai e volta pelo trilho, percorrendo. */
	.aqua-progress:not([aria-valuenow]) .aqua-progress__fill { display: none; }
	.aqua-progress:not([aria-valuenow]) .aqua-progress__head {
		animation:
			aqua-gota-percorre calc(var(--aqua-t-lento) * 4) var(--aqua-ease-in-out) infinite,
			aqua-progress-anda calc(var(--aqua-t-lento) * 6) var(--aqua-ease-in-out) infinite alternate;
	}

	/* ---- tamanho: a linha de arquivo -------------------------------------------------- */
	.aqua-progress--sm {
		--aqua-progress-cabeca: var(--aqua-space-3);
		--aqua-progress-trilho: var(--aqua-space-1);
	}
}

/* Fora de camada, como os do 02-movimento: keyframes nao cascateiam. */
@keyframes aqua-progress-anda {
	from { left: 0; }
	to   { left: calc(100% - var(--aqua-progress-cabeca)); }
}

/* ==== 63-empty.css ==== */
/* 63-empty.css - aqua-empty. O que falta, dito com um rosto e uma acao.

   Gota: O ICONE MORA NUMA GOTA EM REPOUSO. O vazio e a tela mais vista de um
   servidor recem-instalado (nenhum jogador, nenhum ticket, nenhum backup), e
   o default de todo kit e uma ilustracao cinza com "sem dados". Aqui nao ha
   ilustracao: o icone do que falta mora numa Gota parada de space-12 (48px),
   como o avatar --square recorta a foto e o fab e a Gota em repouso
   (CONVENCOES §13). E citacao, nao movimento, e nao compete com a acao que
   resolve o vazio: o botao primario, que carrega a Gota de verdade.

   A ideia com nome: O VAZIO TEM UM ROSTO, NAO UMA ILUSTRACAO. O rosto e o
   icone do que falta (ticket, jogador, backup), o titulo diz o que nao ha, o
   texto diz o que vai aparecer aqui, e a acao faz aparecer. Tudo opcional
   menos o titulo.

   Decisoes, para ninguem "corrigir":
   - sem vidro, sem borda, sem fundo: o empty MORA em alguma coisa - um
     aqua-card, um td com colspan da tabela, um painel - e o chao e dessa
     coisa. Vidro dentro de vidro do mesmo nivel e o que o §6 proibe compor.
   - sem modificador: o aqua-opcoes__vazio ja cobre a lista curta, e uma
     segunda forma de vazio para "dentro de algo pequeno" seria variante sem
     dono (criterio 2 do plano).
   - o texto para em 40ch: mais que isso e paragrafo, e vazio nao e lugar de
     paragrafo. Centrado, porque e um estado da superficie, nao conteudo.
   - o icone e text-muted sobre alpha-rest, o mesmo par do avatar com icone;
     o titulo e fs-lg 600, o titulo de card. Nenhum tamanho novo. */
@layer aqua.componente {
	.aqua-empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--aqua-space-2);
		padding: var(--aqua-space-8) var(--aqua-space-4);
		text-align: center;
		color: var(--aqua-text);
	}

	/* ---- o rosto: a Gota em repouso, com o icone do que falta ------------------------ */
	.aqua-empty__icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: none;
		width: var(--aqua-space-12);
		height: var(--aqua-space-12);
		border: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border));
		border-radius: var(--aqua-gota-bl);
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-rest));
		color: var(--aqua-text-muted);
	}
	.aqua-empty__icon > [data-aqua-icon],
	.aqua-empty__icon > svg { width: var(--aqua-fs-2xl); height: var(--aqua-fs-2xl); }

	/* ---- o que nao ha, o que vai aparecer, e o que faz aparecer -------------------------- */
	.aqua-empty__title {
		padding-top: var(--aqua-space-1);
		font-size: var(--aqua-fs-lg);
		font-weight: 600;
		line-height: var(--aqua-lh-tight);
		letter-spacing: -0.01em;
		color: var(--aqua-text);
	}
	.aqua-empty__text {
		max-width: 40ch;
		font-size: var(--aqua-fs-sm);
		line-height: var(--aqua-lh-base);
		color: var(--aqua-text-muted);
	}
	.aqua-empty__actions {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--aqua-space-2);
		padding-top: var(--aqua-space-2);
	}
}

/* ==== 64-alert.css ==== */
/* 64-alert.css - aqua-alert. O aviso que fica na pagina.

   Gota: NENHUMA. O alert e mensagem, como o toast (52-toast.css), e e o chao
   quieto do §13: a acao dentro dele (aqua-btn--sm) e o que carrega a Gota.

   A ideia com nome: O IRMAO EM LINHA DO TOAST. O toast so cobre o que flutua
   e some sozinho; o alert cobre o que FICA - o aviso no topo do formulario, a
   linha acima da tabela, o erro que espera ser lido. Os dois falam a mesma
   lingua: tom e um ponto (os cinco tons do badge, 15-badge.css), o texto e
   corpo em text com o titulo em 500, fechar e um aqua-icon-btn--ghost --sm.
   Sem gradiente, sem fundo colorido, sem icone em circulo: o banner colorido
   de todo kit grita antes de dizer, e um dashboard com tres deles e uma
   arvore de Natal.

   Decisoes, para ninguem "corrigir":
   - vidro-1 SEM sombra (§5: vidro-1 nunca tem), radius-md: e uma linha que
     mora dentro de um card ou de um painel, um nivel abaixo do que a
     contem. O toast e vidro-2 com sombra porque flutua; o alert nao flutua.
   - role e da aplicacao, e o kit nao escreve nenhum: alert quando
     interrompe (o leitor de tela le na hora: o backup falhou), status
     quando informa (le quando der: o servidor reinicia as 06:00). E a
     diferenca entre gritar e avisar, e so quem escreve a mensagem sabe.
   - fs-sm em text, titulo 500: mensagem e corpo, nao metadado, e
     text-muted na unica informacao do elemento seria apoio sem nada para
     apoiar (a mesma decisao do toast).
   - o unico comportamento e o fechar: data-aqua-fechar-alert dispara
     aqua-alert com { motivo }, poe .aqua-sai e remove o elemento. Entrar e
     da aplicacao (.aqua-entra quando o alert aparece depois de uma acao);
     um alert que ja esta no HTML nao entra: ele ja estava la.
   - a margem negativa no fechar e do alert sobre o proprio filho (layout,
     como no toast): o botao fantasma encosta no padding sem o alert
     crescer. */
@layer aqua.componente {
	.aqua-alert {
		display: flex;
		align-items: flex-start;
		gap: var(--aqua-space-3);
		padding: var(--aqua-space-3) var(--aqua-space-4);
		border: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border));
		border-radius: var(--aqua-radius-md);
		background: var(--aqua-vidro-1-bg);
		-webkit-backdrop-filter: var(--aqua-vidro-1-filtro);
		backdrop-filter: var(--aqua-vidro-1-filtro);
		box-shadow: inset 0 1px 0 rgb(var(--aqua-white-rgb) / 7%);
		color: var(--aqua-text);
		font-size: var(--aqua-fs-sm);
		line-height: var(--aqua-lh-base);
	}
	.aqua-alert[hidden] { display: none; }
	.aqua-alert__text { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
	.aqua-alert__title { font-weight: 500; }
	.aqua-alert__action { flex: none; align-self: center; }
	.aqua-alert__close { flex: none; margin: calc(-1 * var(--aqua-space-1)) calc(-1 * var(--aqua-space-2)) calc(-1 * var(--aqua-space-1)) 0; }

	/* ---- tom: um ponto, como no badge e no toast ---------------------------------------- */
	.aqua-alert--success::before,
	.aqua-alert--warning::before,
	.aqua-alert--danger::before,
	.aqua-alert--info::before,
	.aqua-alert--accent::before {
		content: "";
		flex: none;
		width: 0.5em;
		height: 0.5em;
		margin-top: 0.5em;
		border-radius: var(--aqua-radius-full);
	}
	.aqua-alert--success::before { background: var(--aqua-success); }
	.aqua-alert--warning::before { background: var(--aqua-warning); }
	.aqua-alert--danger::before { background: var(--aqua-danger); }
	.aqua-alert--info::before { background: var(--aqua-info); }
	.aqua-alert--accent::before { background: var(--aqua-accent); }
}

/* ==== 65-scroll-area.css ==== */
/* 65-scroll-area.css - aqua-scroll-area. A caixa que rola por dentro.

   Gota: NENHUMA. E uma caixa que rola; a assinatura fica no que esta dentro.

   A ideia com nome: A BARRA E A DO KIT, E A SOMBRA DIZ "TEM MAIS". A sonda
   mediu ::-webkit-scrollbar presente e scrollbar-width ausente no CEF
   (CONVENCOES §9), e o 00-base.css ja desenha a barra para toda a pagina.
   Este componente e so a caixa: overflow auto, min-height 0 (para caber num
   pai flex sem estourar), overscroll-behavior contain (chegar ao fim nao
   rola a pagina por tras) e a barra que ja existe. A barra em JS do
   OScrollArea nao entra: seria uma segunda barra por cima da que a
   plataforma ja tem.

   A sombra de borda e melhoria progressiva (§9): o aqua-ui.js escreve
   data-aqua-mais com os lados em que ainda ha conteudo ("cima", "baixo",
   "esquerda", "direita", separados por espaco) a cada rolagem, e cada lado
   liga uma custom property de 0 a 1 que desloca UMA das quatro sombras
   internas. Sem o JS o atributo nunca existe, as quatro ficam com
   deslocamento 0 (invisiveis) e a caixa rola igual. Apague o atributo e nada
   quebra: e assim que se prova.

   Decisoes, para ninguem "corrigir":
   - a sombra e INTERNA (inset) e pintada sob o conteudo: a linha de tabela
     e transparente e a linha de lista e vidro-1, e nos dois ela le
     atraves. Um pseudo-elemento por cima daria so dois lados; a tabela
     larga precisa de esquerda e direita.
   - space-3 de desfoque e o mesmo de espalhamento negativo: a sombra
     comeca na borda e some em 12px, sem vazar para fora da caixa.
   - a altura e a largura maxima sao do LAYOUT (inline ou classe do
     consumidor), nunca do componente: uma caixa que traz altura propria
     nao cabe em lugar nenhum.
   - tabindex="0" e aria-label sao do consumidor, quando a caixa rola sem
     conteudo focavel dentro: sem foco o teclado nao a alcanca, e o kit nao
     sabe se ha botao la dentro.
   - --x rola so na horizontal (a tabela larga); o padrao rola nos dois
     eixos, e o navegador so mostra a barra que precisa. */
@layer aqua.componente {
	.aqua-scroll-area {
		--aqua-scroll-cima: 0;
		--aqua-scroll-baixo: 0;
		--aqua-scroll-esquerda: 0;
		--aqua-scroll-direita: 0;
		position: relative;
		min-height: 0;
		min-width: 0;
		overflow: auto;
		overscroll-behavior: contain;
		box-shadow:
			inset 0 calc(var(--aqua-scroll-cima) * var(--aqua-space-3)) var(--aqua-space-3) calc(-1 * var(--aqua-space-3)) rgb(var(--aqua-black-rgb) / 35%),
			inset 0 calc(-1 * var(--aqua-scroll-baixo) * var(--aqua-space-3)) var(--aqua-space-3) calc(-1 * var(--aqua-space-3)) rgb(var(--aqua-black-rgb) / 35%),
			inset calc(var(--aqua-scroll-esquerda) * var(--aqua-space-3)) 0 var(--aqua-space-3) calc(-1 * var(--aqua-space-3)) rgb(var(--aqua-black-rgb) / 35%),
			inset calc(-1 * var(--aqua-scroll-direita) * var(--aqua-space-3)) 0 var(--aqua-space-3) calc(-1 * var(--aqua-space-3)) rgb(var(--aqua-black-rgb) / 35%);
		transition: box-shadow var(--aqua-t-rapido) var(--aqua-ease-out);
	}
	/* ---- a variante horizontal, e o overscroll dela ------------------------------------
	   O overscroll-behavior da caixa base e contain, e esta bem: numa caixa que rola na
	   vertical, chegar ao fim nao deve arrastar a pagina por tras.

	   Aqui NAO esta bem, e e preciso desfaze-lo no eixo Y. Esta variante desliga o scroll
	   vertical (overflow-y: hidden), entao o "fim" vertical e imediato - e contain quer
	   dizer "nao passes o gesto ao pai". O resultado e uma caixa que engole a roda do rato
	   e nao rola nada: quem tem o cursor sobre ela nao consegue rolar a pagina.

	   MEDIDO em 2026-09-15, com o aqua-manager numa viewport de 1920x1080: na seccao Recursos
	   a tabela ocupa 979 dos 1231 px da pagina e o container de scroll tinha 556 px por
	   rolar. Com o cursor sobre a tabela, a roda nao fazia nada; tirando o cursor para a
	   margem, rolava. O dono reportou-o como "o scroll nao funciona em algumas paginas", e
	   "algumas" era a pista: so mordia onde havia esta variante.

	   Contain fica no eixo que ESTA caixa rola, e auto no que ela nao rola. */
	.aqua-scroll-area--x {
		overflow-x: auto;
		overflow-y: hidden;
		overscroll-behavior-x: contain;
		overscroll-behavior-y: auto;
	}

	/* ---- "tem mais": cada lado acende a propria sombra ---------------------------------- */
	.aqua-scroll-area[data-aqua-mais~="cima"] { --aqua-scroll-cima: 1; }
	.aqua-scroll-area[data-aqua-mais~="baixo"] { --aqua-scroll-baixo: 1; }
	.aqua-scroll-area[data-aqua-mais~="esquerda"] { --aqua-scroll-esquerda: 1; }
	.aqua-scroll-area[data-aqua-mais~="direita"] { --aqua-scroll-direita: 1; }
}

/* ==== 66-table.css ==== */
/* 66-table.css - aqua-table. A tabela: linhas, nao caixas.

   Gota: A COLUNA ORDENADA E A ESCOLHA. Entre os cabecalhos, o que ordena e o
   escolhido, exatamente como a aba ativa entre as abas (41-tabs.css): o
   botao __sort do th com aria-sort diferente de none recebe o canto da Gota
   (gota-bl), o fundo accent 10%, a borda 45% e text, com border-radius em
   t-base, e a assinatura MIGRA quando outra coluna e clicada. E a resposta a
   "onde a Gota vai numa tabela": no cabecalho, nunca na linha. A linha
   selecionada (aria-selected na tr) marca por fundo e borda, como o trilho
   do column-picker: uma linha de 800px passa do limite de 24px do §13, e o
   que lista ou filtra marca por fundo.

   A ideia com nome: A TABELA E LINHAS, NAO CAIXAS. Sem zebra, sem borda
   vertical, sem cabecalho em caixa alta: uma linha fina separa as linhas
   (alpha-border), uma um pouco mais forte fecha o cabecalho
   (alpha-border-strong), e o cabecalho e fs-sm 500 text-muted, o mesmo
   rotulo do field. Numero vai a direita em mono tabular (__num), para 9 e
   120 alinharem pela unidade. E <table> de verdade, com thead, th[scope] e
   tbody: o leitor de tela le coluna e linha, e o JS so reordena o que esta.

   Decisoes, para ninguem "corrigir":
   - as celulas sao alcancadas por combinador FILHO (.aqua-table > thead >
     tr > th): nao e descendente solto, e a propria tabela, e uma tabela
     dentro de uma celula nao e alcancada. Classe em cada td seria ruido em
     128 linhas.
   - a linha sob o ponteiro sobe o fundo para alpha-rest, sem translateY:
     e apoio de leitura numa grade, e uma linha que sobe descola da grade
     (a mesma razao da breadcrumb e do grupo de navegacao).
   - o __sort e um botao que ENCHE a celula: padding space-1 space-2 com
     margem negativa igual (a margem e do th sobre o filho, como o fechar
     do toast), para o alvo de clique ser o cabecalho inteiro. Tem os cinco
     estados por inteiro; o caret so aparece no hover e na coluna ordenada,
     e gira para cima em ascending.
   - __select tem largura de conteudo (1%): a coluna da caixa nao rouba
     espaco das outras.
   - --compact e space-1 space-2 com fs-sm, e o dono e a lista de 128
     jogadores do dashboard. Tabela mais larga que o painel vai dentro de
     aqua-scroll-area--x, que acende a sombra do lado em que ha mais.
   - o corpo vazio recebe o aqua-empty num td com colspan; a tabela nao
     tem estado vazio proprio. */
@layer aqua.componente {
	.aqua-table {
		width: 100%;
		border-collapse: collapse;
		color: var(--aqua-text);
		font-size: var(--aqua-fs-md);
		line-height: var(--aqua-lh-base);
	}

	/* ---- cabecalho e celulas: linhas finas, nada de caixas ------------------------------ */
	.aqua-table > thead > tr > th {
		padding: var(--aqua-space-2) var(--aqua-space-3);
		border-bottom: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border-strong));
		font-size: var(--aqua-fs-sm);
		font-weight: 500;
		line-height: var(--aqua-lh-base);
		color: var(--aqua-text-muted);
		text-align: left;
		vertical-align: bottom;
		white-space: nowrap;
	}
	.aqua-table > tbody > tr > td {
		padding: var(--aqua-space-2) var(--aqua-space-3);
		border-bottom: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border));
		vertical-align: middle;
		transition:
			background-color var(--aqua-t-rapido) var(--aqua-ease-out),
			border-color var(--aqua-t-rapido) var(--aqua-ease-out);
	}
	.aqua-table > tbody > tr:hover > td { background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-rest)); }
	/* Duas classes: vence a regra do th por combinador filho (uma classe e tres elementos). */
	.aqua-table .aqua-table__num { text-align: right; font-family: var(--aqua-font-mono); font-variant-numeric: tabular-nums; }
	.aqua-table__select { width: 1%; }
	.aqua-table__check { vertical-align: middle; }

	/* ---- a linha selecionada: fundo e borda, sem a Gota ---------------------------------- */
	.aqua-table > tbody > tr[aria-selected="true"] > td,
	.aqua-table > tbody > tr[aria-selected="true"]:hover > td {
		background-color: var(--aqua-selecao-bg);
		border-bottom-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border));
	}

	/* ---- o cabecalho ordenavel: um botao que enche a celula, com os cinco estados ---------- */
	.aqua-table__sort {
		display: inline-flex;
		align-items: center;
		gap: var(--aqua-space-1);
		margin: calc(-1 * var(--aqua-space-1)) calc(-1 * var(--aqua-space-2));
		padding: var(--aqua-space-1) var(--aqua-space-2);
		border: 1px solid transparent;
		border-radius: var(--aqua-radius-xs);
		background: none;
		color: inherit;
		font: inherit;
		white-space: nowrap;
		cursor: pointer;
		transition:
			transform var(--aqua-t-toque) var(--aqua-ease-out),
			border-radius var(--aqua-t-base) var(--aqua-ease-out),
			backdrop-filter var(--aqua-t-toque) var(--aqua-ease-out),
			background-color var(--aqua-t-rapido) var(--aqua-ease-out),
			border-color var(--aqua-t-rapido) var(--aqua-ease-out),
			color var(--aqua-t-rapido) var(--aqua-ease-out),
			filter var(--aqua-t-rapido) var(--aqua-ease-out);
	}
	.aqua-table__sort:hover {
		color: var(--aqua-text);
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-hover));
		transform: translateY(-1px);
	}
	.aqua-table__sort:focus-visible { filter: brightness(1.06); }
	.aqua-table__sort:active {
		transform: translateY(-1px) scale(0.97);
		border-radius: var(--aqua-radius-btn-fechado);
		background-color: rgb(var(--aqua-surface-rgb) / var(--aqua-press-tint));
		-webkit-backdrop-filter: var(--aqua-press-filtro);
		backdrop-filter: var(--aqua-press-filtro);
	}
	.aqua-table__sort:disabled,
	.aqua-table__sort[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; filter: none; }

	/* O caret so aparece no hover e na coluna ordenada; em ascending aponta para cima. */
	.aqua-table__caret {
		flex: none;
		width: 1em;
		height: 1em;
		opacity: 0;
		transition:
			opacity var(--aqua-t-rapido) var(--aqua-ease-out),
			transform var(--aqua-t-base) var(--aqua-ease-out);
	}
	.aqua-table__sort:hover .aqua-table__caret { opacity: 1; }

	/* A coluna ordenada e a escolha: a Gota migra para o cabecalho dela. */
	.aqua-table > thead > tr > th[aria-sort="ascending"] > .aqua-table__sort,
	.aqua-table > thead > tr > th[aria-sort="descending"] > .aqua-table__sort,
	.aqua-table > thead > tr > th[aria-sort="ascending"] > .aqua-table__sort:hover,
	.aqua-table > thead > tr > th[aria-sort="descending"] > .aqua-table__sort:hover {
		color: var(--aqua-text);
		border-color: transparent;
		background-color: var(--aqua-selecao-bg);
	}
	.aqua-table > thead > tr > th[aria-sort="ascending"] > .aqua-table__sort:active,
	.aqua-table > thead > tr > th[aria-sort="descending"] > .aqua-table__sort:active { border-radius: var(--aqua-radius-btn-fechado); }
	.aqua-table > thead > tr > th[aria-sort="ascending"] .aqua-table__caret,
	.aqua-table > thead > tr > th[aria-sort="descending"] .aqua-table__caret { opacity: 1; color: var(--aqua-text); }
	.aqua-table > thead > tr > th[aria-sort="ascending"] .aqua-table__caret { transform: rotate(180deg); }

	/* ---- compacta: a lista de 128 jogadores ------------------------------------------------ */
	.aqua-table--compact > thead > tr > th,
	.aqua-table--compact > tbody > tr > td { padding: var(--aqua-space-1) var(--aqua-space-2); font-size: var(--aqua-fs-sm); }
}

/* ==== 67-list.css ==== */
/* 67-list.css - aqua-list. A linha de vidro-1 que o spec V1 prometeu.

   Gota: NENHUMA na linha. A lista e o chao quieto de vidro-1 que o spec V1
   citou como uso do nivel ("linha de lista, chip, campo, item", CONVENCOES
   §5); a caixa marcada ja e a Gota (a selecao da 4a, 29-checkbox.css), e uma
   linha de 600px nao a carrega pelo mesmo motivo da linha de tabela: passa
   do limite do §13, e o que lista marca por fundo. A linha --interactive
   fecha o canto ao toque, como o card: a Gota que o toque revela.

   A ideia com nome: AVATAR OU ICONE, TEXTO E META, ACAO A DIREITA, UMA POR
   LINHA. Nao e nav-item (que navega e carrega a assinatura no atual) nem
   tabela (que compara colunas): e a lista de coisas do servidor - jogadores
   online, tickets, regioes - em que cada linha e uma coisa inteira e a acao
   dela mora na ponta direita.

   Decisoes, para ninguem "corrigir":
   - cada linha e vidro-1 com so o contato interno de 1px, sem sombra (§5),
     radius-md, space-3, e as linhas tem gap space-2 entre si: sao pecas
     soltas, nao uma lista dividida por linhas finas (isso e a tabela).
   - selecionada (data-aqua-selecionado, escrito pelo JS a partir do __check;
     ou aria-current e aria-pressed, quando a linha e link ou botao), a linha
     marca por fundo accent 10% e borda 45%. data-aqua-selecionado e nao
     aria-selected: listitem nao aceita aria-selected, e quem fala com o
     leitor de tela e a caixa marcada.
   - --interactive e a linha que e <a> ou <button> (a lista de tickets do
     dashboard, em que a linha inteira abre o ticket), com o bloco do §4 por
     inteiro: hover engrossa a borda e sobe 1px (a linha tem folga entre
     irmas, ao contrario da linha de tabela), press adensa e fecha o canto
     como o card, foco clareia com o anel, aria-disabled esmaece. A cor e o
     sublinhado que a base da ao <a> sao restaurados, como no nav-item.
   - __meta separa os campos por virgula, ou um elemento por campo: nunca o
     ponto do meio (proibicao 2).
   - __media e text-muted: o avatar traz a propria cor; o icone herda a
     muted. __end e flex none: a acao nunca encolhe. */
@layer aqua.componente {
	.aqua-list {
		display: flex;
		flex-direction: column;
		gap: var(--aqua-space-2);
		min-width: 0;
	}

	/* ---- a linha: vidro-1, contato interno, sem sombra ----------------------------------- */
	.aqua-list__item {
		display: flex;
		align-items: center;
		gap: var(--aqua-space-3);
		width: 100%;
		min-width: 0;
		padding: var(--aqua-space-3);
		border: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border));
		border-radius: var(--aqua-radius-md);
		background: var(--aqua-vidro-1-bg);
		-webkit-backdrop-filter: var(--aqua-vidro-1-filtro);
		backdrop-filter: var(--aqua-vidro-1-filtro);
		box-shadow: inset 0 1px 0 rgb(var(--aqua-white-rgb) / 7%);
		color: var(--aqua-text);
		font-size: var(--aqua-fs-md);
		font-weight: 400;
		line-height: var(--aqua-lh-base);
		text-align: left;
	}
	a.aqua-list__item,
	a.aqua-list__item:hover { color: var(--aqua-text); text-decoration: none; }

	.aqua-list__media {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: none;
		color: var(--aqua-text-muted);
	}
	.aqua-list__media[data-aqua-icon],
	.aqua-list__media > svg { width: var(--aqua-fs-xl); height: var(--aqua-fs-xl); }
	.aqua-list__text { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
	.aqua-list__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--aqua-text); }
	.aqua-list__meta { font-size: var(--aqua-fs-sm); line-height: var(--aqua-lh-base); color: var(--aqua-text-muted); }
	.aqua-list__end { display: inline-flex; flex: none; align-items: center; gap: var(--aqua-space-2); }
	.aqua-list__check { flex: none; }

	/* ---- selecionada: fundo e borda, sem a Gota (a caixa marcada ja e a Gota) ------------- */
	.aqua-list__item[data-aqua-selecionado],
	.aqua-list__item[aria-current],
	.aqua-list__item[aria-pressed="true"] {
		border-color: transparent;
		background: var(--aqua-selecao-bg);
		box-shadow: var(--aqua-selecao-sombra);
	}

	/* ---- a linha que e link ou botao: os cinco estados, e o canto que fecha ao toque ------ */
	.aqua-list__item--interactive {
		cursor: pointer;
		transition:
			transform var(--aqua-t-toque) var(--aqua-ease-out),
			border-radius var(--aqua-t-toque) var(--aqua-ease-out),
			backdrop-filter var(--aqua-t-toque) var(--aqua-ease-out),
			background-color var(--aqua-t-toque) var(--aqua-ease-out),
			border-color var(--aqua-t-rapido) var(--aqua-ease-out),
			color var(--aqua-t-rapido) var(--aqua-ease-out),
			filter var(--aqua-t-rapido) var(--aqua-ease-out);
	}
	.aqua-list__item--interactive:hover {
		border-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border-strong));
		transform: translateY(-1px);
	}
	.aqua-list__item--interactive:focus-visible { filter: brightness(1.06); }
	.aqua-list__item--interactive:active {
		transform: translateY(-1px) scale(0.97);
		border-radius: var(--aqua-radius-btn-fechado);
		background: rgb(var(--aqua-surface-rgb) / var(--aqua-press-tint));
		-webkit-backdrop-filter: var(--aqua-press-filtro);
		backdrop-filter: var(--aqua-press-filtro);
	}
	.aqua-list__item--interactive:disabled,
	.aqua-list__item--interactive[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; filter: none; }
	.aqua-list__item--interactive[aria-current]:hover,
	.aqua-list__item--interactive[aria-pressed="true"]:hover { border-color: transparent; }
}

/* ==== 68-sparkline.css ==== */
/* 68-sparkline.css - aqua-sparkline. A serie curta, em linha.

   Gota: NENHUMA. Um grafico e leitura, como o stat em que ele mora (§13:
   "badge, avatar e stat sao o fundo quieto"). Nada aqui se move.

   A ideia com nome: SO O AGORA E MARCADO. Sem eixos, sem area preenchida,
   sem gradiente, sem minimo nem maximo: uma linha e o ultimo ponto. O dono
   de servidor quer saber onde o ping esta e de onde veio; minimo, maximo e
   area sao para relatorio, e o sparkline nao e relatorio. O OSparkline
   preenche a area com gradiente e marca as pontas; aqui a area e a
   proibicao 6 (gradiente sem funcao), e as pontas sao ruido.

   O <svg> e montado pelo aqua-ui.js por createElementNS a partir de
   data-aqua-valores (regra 11: nada por innerHTML), com viewBox 0 0 100 100
   esticado ao host (preserveAspectRatio none) e a linha em
   vector-effect: non-scaling-stroke, para o traco continuar 1.5px em
   qualquer proporcao. O ultimo ponto NAO esta no svg: e o ::after do host,
   um disco de 0.5em posicionado por --aqua-sparkline-y (escrito pelo JS),
   porque um circulo dentro de um svg esticado viraria elipse.

   Decisoes, para ninguem "corrigir":
   - a cor e a do texto em volta (currentColor): num aqua-muted a linha e
     muted, ao lado de um valor e text. Os cinco tons de sinal (--success,
     --warning, --danger, --info, --accent) trocam a cor, e so eles.
   - o ponto fica centrado na PONTA da linha, metade para fora do host: e
     onde a linha acaba, e a folga de 4% em cima e embaixo garante que ele
     nunca sai da caixa.
   - font-size fs-sm no host so para o em do ponto: o sparkline nao tem
     texto.
   - calc(space-12 * 2) por space-6 e o tamanho ao lado de um stat; --sm
     (space-12 por space-4) e o da celula de tabela (a coluna Ping).
   - role="img" e aria-label sao do consumidor: o leitor de tela le a
     frase, nao o grafico. */
@layer aqua.componente {
	.aqua-sparkline {
		position: relative;
		display: inline-block;
		vertical-align: middle;
		width: calc(var(--aqua-space-12) * 2);
		height: var(--aqua-space-6);
		font-size: var(--aqua-fs-sm);
		line-height: 0;
	}
	.aqua-sparkline > svg { display: block; width: 100%; height: 100%; overflow: visible; }

	/* ---- o agora: o ultimo ponto, na ponta da linha ---------------------------------------- */
	.aqua-sparkline::after {
		content: "";
		position: absolute;
		top: var(--aqua-sparkline-y, 50%);
		right: 0;
		display: none;
		width: 0.5em;
		height: 0.5em;
		border-radius: var(--aqua-radius-full);
		background-color: currentColor;
		transform: translate(50%, -50%);
	}
	.aqua-sparkline[data-aqua-desenhado]::after { display: block; }

	/* ---- tom: os cinco de sinal ------------------------------------------------------------ */
	.aqua-sparkline--success { color: var(--aqua-success); }
	.aqua-sparkline--warning { color: var(--aqua-warning); }
	.aqua-sparkline--danger { color: var(--aqua-danger); }
	.aqua-sparkline--info { color: var(--aqua-info); }
	.aqua-sparkline--accent { color: var(--aqua-accent); }

	/* ---- tamanho: a celula de tabela ------------------------------------------------------- */
	.aqua-sparkline--sm { width: var(--aqua-space-12); height: var(--aqua-space-4); }
}

/* ==== 69-calendar.css ==== */
/* 69-calendar.css - aqua-calendar. A grade do mes.

   Gota: O DIA ESCOLHIDO RECEBE A GOTA. E a selecao do CONVENCOES §13 na
   celula de 32px, a mesma da aba (41-tabs.css) e da pagina (58-pagination):
   gota-bl, fundo accent 10%, borda 45%, text e brightness, com border-radius
   em t-base para a migracao ser vista ao escolher outro dia; ao toque,
   gota-fechado. Hoje NAO e escolha, e onde se esta: marca por um ponto sob o
   numero, o vocabulario do badge. O circulo accent preenchido de todo date
   picker fica de fora.

   A ideia com nome: A GRADE DO PADRAO ARIA, DESENHADA PELO KIT. E uma
   <table role="grid"> com th[scope] dos dias (domingo primeiro, como o
   calendario brasileiro), seis semanas SEMPRE (a altura nao pula entre
   meses) e um <button> por dia em mono tabular, como a pagina da paginacao
   (o dia e a pagina do mes). O aqua-ui.js monta a estrutura por
   createElement a partir de data-aqua-mes, data-aqua-valor, data-aqua-min,
   data-aqua-max e data-aqua-hoje, com os nomes em PT-BR escritos no kit, e
   faz o teclado do padrao grid: setas movem o dia, Home e End vao as pontas
   da semana, PageUp e PageDown trocam o mes (Shift troca o ano), Enter e
   espaco escolhem; um so dia na ordem de tabulacao.

   Decisoes, para ninguem "corrigir":
   - sem vidro proprio: o calendario mora num card ou no painel do
     date-picker, e o chao e deles.
   - o dia e clicavel por inteiro (§4): hover sobe o fundo e levanta 1px,
     press adensa e fecha o canto, foco clareia com o anel, aria-disabled
     (fora de min e max) esmaece. aria-disabled e nao disabled: o teclado
     do grid precisa passar pelo dia que nao se pode escolher, e disabled
     nao recebe foco.
   - dia de outro mes (data-aqua-fora) e text-muted e escolhivel: escolher
     o 31 de agosto leva ao mes de agosto, como se espera.
   - o titulo do mes e fs-md 500 em minusculas ("setembro de 2026"), a
     norma; o dia da semana e fs-sm 500 text-muted, sem caixa alta.
   - border-spacing space-1 e o gap da grade: uma tabela nao tem gap.
   - o ponto de hoje tem space-1 e fica a space-1 do fundo da celula: cabe
     sob o numero sem encostar.

   Modo faixa, acrescentado em 2026-09-14 (Fase 9, para o date-range-picker):
   data-aqua-faixa na raiz declara o modo, e data-aqua-inicio e data-aqua-fim
   (AAAA-MM-DD) dizem as pontas. O kit escreve data-aqua-ponta="inicio|fim"
   nos dias das pontas, com aria-selected na celula (a Gota da selecao, a
   mesma de sempre), e data-aqua-faixa no que fica entre elas, pintado com
   accent 10% e sem borda: e a faixa do range-slider em dias. A ponta do fim
   vira o canto para a direita (gota-br), como a alca direita daquele slider:
   as duas emolduram a faixa em vez de olharem para o mesmo lado. Em modo
   faixa o calendario NAO guarda escolha (data-aqua-valor): ele so dispara
   aqua-calendar, e quem guarda inicio e fim e o composto. O dia de outro mes
   some (visibility) porque dois meses lado a lado repetiriam o dia; o
   teclado ja o pulava. Nada disto muda o calendario de um valor so. */
@layer aqua.componente {
	.aqua-calendar {
		display: inline-flex;
		flex-direction: column;
		gap: var(--aqua-space-2);
		/* Largura propria: num pai flex ou grid, o stretch alargaria a grade. */
		width: max-content;
		color: var(--aqua-text);
	}

	/* ---- o cabecalho: mes anterior, o titulo, proximo mes -------------------------------- */
	.aqua-calendar__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--aqua-space-2);
	}
	.aqua-calendar__title {
		flex: 1 1 auto;
		text-align: center;
		font-size: var(--aqua-fs-md);
		font-weight: 500;
		line-height: var(--aqua-lh-base);
		color: var(--aqua-text);
	}

	/* ---- a grade: seis semanas, celulas de 32px ----------------------------------------- */
	.aqua-calendar__grid {
		border-collapse: separate;
		border-spacing: var(--aqua-space-1);
		margin: calc(-1 * var(--aqua-space-1));
	}
	.aqua-calendar__weekday {
		width: var(--aqua-space-8);
		padding: 0 0 var(--aqua-space-1);
		font-size: var(--aqua-fs-sm);
		font-weight: 500;
		line-height: var(--aqua-lh-base);
		color: var(--aqua-text-muted);
		text-align: center;
	}
	.aqua-calendar__cell { padding: 0; }

	/* ---- o dia: um botao de 32px, com os cinco estados ------------------------------------ */
	.aqua-calendar__day {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: var(--aqua-space-8);
		height: var(--aqua-space-8);
		border: 1px solid transparent;
		border-radius: var(--aqua-radius-xs);
		background: none;
		color: var(--aqua-text);
		font-family: var(--aqua-font-mono);
		font-variant-numeric: tabular-nums;
		font-size: var(--aqua-fs-sm);
		font-weight: 500;
		line-height: 1;
		cursor: pointer;
		transition:
			transform var(--aqua-t-toque) var(--aqua-ease-out),
			border-radius var(--aqua-t-base) var(--aqua-ease-out),
			backdrop-filter var(--aqua-t-toque) var(--aqua-ease-out),
			background-color var(--aqua-t-rapido) var(--aqua-ease-out),
			border-color var(--aqua-t-rapido) var(--aqua-ease-out),
			color var(--aqua-t-rapido) var(--aqua-ease-out),
			filter var(--aqua-t-rapido) var(--aqua-ease-out);
	}
	.aqua-calendar__day:hover {
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-hover));
		transform: translateY(-1px);
	}
	.aqua-calendar__day:focus-visible { filter: brightness(1.06); }
	.aqua-calendar__day:active {
		transform: translateY(-1px) scale(0.97);
		border-radius: var(--aqua-radius-btn-fechado);
		background-color: rgb(var(--aqua-surface-rgb) / var(--aqua-press-tint));
		-webkit-backdrop-filter: var(--aqua-press-filtro);
		backdrop-filter: var(--aqua-press-filtro);
	}
	.aqua-calendar__day:disabled,
	.aqua-calendar__day[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; filter: none; }
	.aqua-calendar__day[data-aqua-fora] { color: var(--aqua-text-muted); }

	/* Hoje: um ponto sob o numero. Nao e escolha, e onde se esta. */
	.aqua-calendar__day[data-aqua-hoje]::after {
		content: "";
		position: absolute;
		bottom: var(--aqua-space-1);
		left: 50%;
		width: var(--aqua-space-1);
		height: var(--aqua-space-1);
		border-radius: var(--aqua-radius-full);
		background-color: var(--aqua-accent);
		transform: translateX(-50%);
	}

	/* O escolhido: a Gota migra para ca. */
	.aqua-calendar__cell[aria-selected="true"] > .aqua-calendar__day,
	.aqua-calendar__cell[aria-selected="true"] > .aqua-calendar__day:hover {
		color: var(--aqua-escolha-fg);
		border-color: transparent;
		background-color: var(--aqua-escolha-bg);
	}
	.aqua-calendar__cell[aria-selected="true"] > .aqua-calendar__day:hover { filter: brightness(0.94); }
	.aqua-calendar__cell[aria-selected="true"] > .aqua-calendar__day:active { border-radius: var(--aqua-radius-btn-fechado); }

	/* ---- modo faixa (2026-09-14): as pontas sao a selecao, o meio e a faixa ---------------- */
	/* O dia entre as pontas so leva o fundo: sem borda e sem Gota, para as duas
	   pontas serem as unicas com forma. A cor entra em t-rapido, a transicao que
	   o dia ja tem: passar o ponteiro faz a faixa crescer dia a dia. */
	.aqua-calendar__day[data-aqua-faixa],
	.aqua-calendar__day[data-aqua-faixa]:hover { background-color: var(--aqua-selecao-bg); }
	/* A ponta do fim olha para a direita, como a alca direita do range-slider;
	   ao toque o canto fecha do lado em que esta. */
	/* ADR 0033: as pontas ja nao viram o canto; as duas sao o mesmo dia invertido. */
	.aqua-calendar__cell[aria-selected="true"] > .aqua-calendar__day[data-aqua-ponta="fim"]:active { border-radius: var(--aqua-radius-xs) var(--aqua-radius-xs) var(--aqua-gota-ponta-fechada) var(--aqua-radius-xs); }
	/* Dois meses lado a lado nao repetem o dia. visibility, e nao display: a
	   grade continua com seis semanas e a altura nao pula. */
	.aqua-calendar[data-aqua-faixa] .aqua-calendar__day[data-aqua-fora] { visibility: hidden; }
	/* O composto que navega dois meses juntos esconde a seta do meio. visibility
	   guarda o lugar, e o titulo continua centrado sobre a grade. */
	.aqua-calendar__prev[hidden],
	.aqua-calendar__next[hidden] { visibility: hidden; }
}

/* ==== 70-date-picker.css ==== */
/* 70-date-picker.css - aqua-date-picker. O campo que abre o calendario.

   Gota: A DO CALENDARIO, NO DIA ESCOLHIDO (69-calendar.css). O gatilho e
   campo e e quieto, como o do select: a Gota aparece no que se escolhe, e
   aqui se escolhe dentro do painel.

   A ideia com nome: O SELECT COM UM CALENDARIO DENTRO. O gatilho e a caixa
   de campo do select (34-select.css), repetida por texto: space-2 space-4,
   fs-md, borda alpha-border-strong, radius-md, fundo alpha-rest, com o
   icone de calendario, o valor e o caret; o painel e vidro-2 com a sombra do
   vidro, radius-lg, space-2 de padding, o calendario (que nao tem vidro) e
   um rodape com Hoje e Limpar. O flutuante do §10 abre e fecha (largura
   auto, saida). O valor real vai no __hidden em AAAA-MM-DD, o que o
   formulario envia; o __value mostra dd/mm/aaaa, o que o dono le.

   Decisoes, para ninguem "corrigir":
   - os estados do gatilho sao os do select: hover sobe 1px, press adensa
     sem fechar canto (nao tem Gota), foco clareia com o anel, aberto
     clareia e o caret gira; aria-invalid e disabled no gatilho.
   - __value e text-muted (placeholder) ate data-aqua-escolhido na raiz,
     escrito pelo JS, e text depois. O placeholder fica guardado para
     voltar no Limpar, como no select.
   - o painel esconde por regra explicita ([hidden]): o atributo perde para
     o display da camada. Aberto, ele esta no body, nao dentro da raiz.
   - --block estica; --sm e o degrau do input, e o dono e a barra de
     filtros do dashboard (De, Ate).
   - sem faixa de datas: um periodo sao dois pickers lado a lado. O
     range-slider existe porque duas alcas num trilho sao uma coisa; dois
     calendarios nao sao. */
@layer aqua.componente {
	.aqua-date-picker { display: inline-block; vertical-align: middle; min-width: 0; }
	.aqua-date-picker--block { display: block; width: 100%; }

	/* ---- o gatilho: a caixa de campo, clicavel ---------------------------------------- */
	.aqua-date-picker__trigger {
		display: flex;
		align-items: center;
		gap: var(--aqua-space-2);
		width: 100%;
		min-width: 0;
		padding: var(--aqua-space-2) var(--aqua-space-4);
		border: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border-strong));
		border-radius: var(--aqua-radius-md);
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-rest));
		color: var(--aqua-text);
		font-size: var(--aqua-fs-md);
		line-height: var(--aqua-lh-base);
		text-align: left;
		cursor: pointer;
		transition:
			transform var(--aqua-t-toque) var(--aqua-ease-out),
			backdrop-filter var(--aqua-t-toque) var(--aqua-ease-out),
			background-color var(--aqua-t-rapido) var(--aqua-ease-out),
			border-color var(--aqua-t-rapido) var(--aqua-ease-out),
			filter var(--aqua-t-rapido) var(--aqua-ease-out);
	}
	.aqua-date-picker__trigger:hover {
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-hover));
		transform: translateY(-1px);
	}
	.aqua-date-picker__trigger:focus-visible,
	.aqua-date-picker__trigger[aria-expanded="true"] { filter: brightness(1.06); }
	.aqua-date-picker__trigger[aria-expanded="true"] { background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-hover)); }
	.aqua-date-picker__trigger:active {
		transform: translateY(-1px) scale(0.97);
		background-color: rgb(var(--aqua-surface-rgb) / var(--aqua-press-tint));
		-webkit-backdrop-filter: var(--aqua-press-filtro);
		backdrop-filter: var(--aqua-press-filtro);
	}
	.aqua-date-picker__trigger[aria-invalid="true"],
	.aqua-date-picker__trigger[aria-invalid="true"]:focus-visible { border-color: rgb(var(--aqua-danger-rgb) / 60%); }
	.aqua-date-picker__trigger:disabled,
	.aqua-date-picker__trigger[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; filter: none; }

	.aqua-date-picker__icon { flex: none; width: 1.15em; height: 1.15em; color: var(--aqua-text-muted); }
	.aqua-date-picker__value {
		flex: 1 1 auto;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: var(--aqua-text-muted);
	}
	.aqua-date-picker[data-aqua-escolhido] .aqua-date-picker__value { color: var(--aqua-text); font-variant-numeric: tabular-nums; }
	.aqua-date-picker__caret {
		flex: none;
		width: 1em;
		height: 1em;
		color: var(--aqua-text-muted);
		transition: transform var(--aqua-t-base) var(--aqua-ease-out);
	}
	.aqua-date-picker__trigger[aria-expanded="true"] .aqua-date-picker__caret { transform: rotate(180deg); }

	/* ---- o painel: vidro-2 com o calendario e o rodape -------------------------------- */
	.aqua-date-picker__panel {
		display: flex;
		flex-direction: column;
		gap: var(--aqua-space-2);
		width: max-content;
		padding: var(--aqua-space-2);
		border: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border));
		border-radius: var(--aqua-radius-lg);
		background: var(--aqua-vidro-2-bg);
		-webkit-backdrop-filter: var(--aqua-vidro-2-filtro);
		backdrop-filter: var(--aqua-vidro-2-filtro);
		box-shadow:
			inset 0 1px 0 rgb(var(--aqua-white-rgb) / 7%),
			0 1px 2px rgb(var(--aqua-black-rgb) / 20%),
			0 12px 32px -12px rgb(var(--aqua-black-rgb) / 40%);
		color: var(--aqua-text);
	}
	.aqua-date-picker__panel[hidden] { display: none; }
	.aqua-date-picker__panel > .aqua-calendar { padding: var(--aqua-space-1); }
	.aqua-date-picker__footer {
		display: flex;
		justify-content: flex-end;
		gap: var(--aqua-space-1);
		padding-top: var(--aqua-space-1);
		border-top: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border));
	}

	/* ---- tamanho: o degrau do input, para a barra de filtros -------------------------- */
	.aqua-date-picker--sm .aqua-date-picker__trigger { padding: var(--aqua-space-1) var(--aqua-space-3); font-size: var(--aqua-fs-sm); }
}

/* ==== 71-file-picker.css ==== */
/* 71-file-picker.css - aqua-file-picker. O campo que recebe arquivo.

   Gota: NENHUMA. Escolher um arquivo e digitar, nao escolher no sentido do
   §13: a zona e campo, chao quieto. A linha de arquivo e a aqua-list__item
   (67-list.css), e o aqua-progress--sm que a aplicacao puser nela e o que se
   move.

   A ideia com nome: O CAMPO QUE ACENDE QUANDO O ARQUIVO CHEGA. Nao e a caixa
   tracejada de todo kit: e a caixa de campo do input (24-input.css), em
   bloco e centrada, com o icone de envio, a frase e a dica. Enquanto um
   arquivo e arrastado por cima (data-aqua-sobre, escrito pelo aqua-ui.js),
   a zona acende como o campo focado e o item selecionado: borda accent 45%,
   fundo accent 10%, brightness(1.06), e o icone vai a accent. Soltar
   escreve input.files por DataTransfer e dispara change: para a aplicacao,
   arrastar e o mesmo que escolher no seletor.

   O <input type="file"> e de verdade e mora DENTRO da zona, que e um
   <label>: clicar em qualquer ponto abre o seletor do sistema sem JS. O
   input e so para leitor de tela (o bloco do .aqua-sr-only, repetido por
   texto) e continua focavel: o Tab chega nele, espaco e Enter abrem o
   seletor. Sem traco de foco desde 2026-09-29; a zona so ganha brightness
   em :focus-within, com outline 0 no input.

   Decisoes, para ninguem "corrigir":
   - accept, multiple e o tamanho maximo sao da aplicacao: a validacao de
     campo e da aplicacao (a caixa de texto tambem nao valida o que se
     digita). O kit mostra o que foi escolhido, no change.
   - a lista dos escolhidos e uma aqua-list montada pelo JS por
     createElement: icone por tipo, nome, tamanho em PT-BR e o remover.
     Sem arquivo a lista some.
   - hover so sobe o fundo, sem translateY: e campo (§4).
   - :has(:disabled) esmaece como melhoria (§9): sem :has() o input
     desabilitado continua sem abrir o seletor, so a zona nao esmaece. */
@layer aqua.componente {
	.aqua-file-picker {
		display: flex;
		flex-direction: column;
		gap: var(--aqua-space-3);
		min-width: 0;
	}

	/* ---- a zona: a caixa de campo, em bloco e centrada ------------------------------------ */
	.aqua-file-picker__zone {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: var(--aqua-space-1);
		padding: var(--aqua-space-6);
		border: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border-strong));
		border-radius: var(--aqua-radius-md);
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-rest));
		color: var(--aqua-text);
		font-size: var(--aqua-fs-md);
		line-height: var(--aqua-lh-base);
		text-align: center;
		cursor: pointer;
		transition:
			background-color var(--aqua-t-rapido) var(--aqua-ease-out),
			border-color var(--aqua-t-rapido) var(--aqua-ease-out),
			filter var(--aqua-t-rapido) var(--aqua-ease-out);
	}
	/* O input e de verdade, so para leitor de tela, e continua focavel. */
	.aqua-file-picker__input {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
		border: 0;
	}
	.aqua-file-picker__input:focus-visible { outline: 0; }
	.aqua-file-picker__icon {
		width: var(--aqua-fs-2xl);
		height: var(--aqua-fs-2xl);
		color: var(--aqua-text-muted);
		transition: color var(--aqua-t-rapido) var(--aqua-ease-out);
	}
	.aqua-file-picker__text { color: var(--aqua-text); }
	.aqua-file-picker__hint { font-size: var(--aqua-fs-sm); color: var(--aqua-text-muted); }

	/* ---- os estados de campo, na zona; e o acender quando o arquivo chega ------------------ */
	.aqua-file-picker__zone:hover { background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-hover)); }
	.aqua-file-picker__zone:focus-within {
		filter: brightness(1.06);
	}
	.aqua-file-picker__zone[data-aqua-sobre] {
		border-color: transparent;
		background-color: var(--aqua-selecao-bg);
		box-shadow: var(--aqua-selecao-sombra);
		filter: brightness(1.06);
	}
	.aqua-file-picker__zone[data-aqua-sobre] .aqua-file-picker__icon { color: var(--aqua-text); }
	.aqua-file-picker__zone:has(:disabled) {
		opacity: 0.5;
		cursor: not-allowed;
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-rest));
	}

	/* ---- os escolhidos: uma aqua-list montada pelo kit ------------------------------------ */
	.aqua-file-picker__files[hidden] { display: none; }
}

/* ==== 72-markdown-editor.css ==== */
/* 72-markdown-editor.css - aqua-markdown-editor. A textarea com a barra dentro.

   Gota: NENHUMA. E campo, chao quieto (CONVENCOES §13): a Gota e do que se
   escolhe ou se aciona, nunca do que se digita. A toolbar dentro carrega as
   suas (cada grupo e uma barra colada, 73-markdown-toolbar.css).

   A ideia com nome: UM CAMPO COMPOSTO, COM A BARRA DENTRO. A caixa de campo
   do input (24-input.css): borda alpha-border-strong, radius-md, fundo
   alpha-rest. Dentro, a aqua-markdown-toolbar sobre uma linha fina, e o
   aqua-textarea com data-aqua-autoresize SEM borda, fundo, raio nem hover
   proprios: a caixa e quem tem forma. E o mesmo desenho do search e do
   number-input: o focavel mora dentro da caixa. Sem traco de foco desde
   2026-09-29; a caixa so ganha brightness em :focus-within, e a textarea
   apaga o proprio outline com outline 0.

   SEM PREVIA. Renderizar markdown e innerHTML, e a regra 11 proibe; um
   sanitizador no kit seria uma segunda superficie de ataque, e a previa e
   da aplicacao, que sabe o que aceita e que renderizador usa. O editor
   entrega texto, e so texto.

   Decisoes, para ninguem "corrigir":
   - a parte __toolbar e escrita ao lado da classe da toolbar
     (class="aqua-markdown-toolbar aqua-markdown-editor__toolbar"): o editor
     estiliza a propria parte (padding, a linha), e nao a toolbar. A folha
     73 vem depois desta na cascata e nao restaura nada que a barra colada
     decida, entao a ordem nao briga.
   - o seletor da __input e ".aqua-markdown-editor > .aqua-markdown-editor__input"
     (tres classes): vence ".aqua-textarea:hover" e ":focus-visible" da 25
     por especificidade, nao por ordem. Nao encurte.
   - os estados sao os do campo: hover sobe o fundo da CAIXA sem translateY,
     foco e o anel mais brightness(1.06) na caixa, aria-invalid na caixa poe
     a borda em danger 60%, :has(:disabled) esmaece como melhoria (§9): sem
     :has() a textarea desabilitada continua sem aceitar texto.
   - Ctrl+B, Ctrl+I e Ctrl+K (aqua-ui.js) sao os tres atalhos que todo
     editor tem; Ctrl+U abre o codigo-fonte em alguns navegadores e fica de
     fora. O resto e pela toolbar. */
@layer aqua.componente {
	.aqua-markdown-editor {
		display: flex;
		flex-direction: column;
		min-width: 0;
		border: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border-strong));
		border-radius: var(--aqua-radius-md);
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-rest));
		color: var(--aqua-text);
		transition:
			background-color var(--aqua-t-rapido) var(--aqua-ease-out),
			border-color var(--aqua-t-rapido) var(--aqua-ease-out),
			filter var(--aqua-t-rapido) var(--aqua-ease-out);
	}

	/* ---- a barra, sobre uma linha fina --------------------------------------------------- */
	.aqua-markdown-editor__toolbar {
		padding: var(--aqua-space-1) var(--aqua-space-2);
		border-bottom: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border));
	}

	/* ---- a textarea perde a forma propria: a caixa e quem tem forma ---------------------- */
	.aqua-markdown-editor > .aqua-markdown-editor__input,
	.aqua-markdown-editor > .aqua-markdown-editor__input:hover,
	.aqua-markdown-editor > .aqua-markdown-editor__input:focus-visible {
		border: 0;
		border-radius: 0 0 var(--aqua-radius-md) var(--aqua-radius-md);
		background-color: transparent;
		filter: none;
		outline: 0;
	}
	.aqua-markdown-editor > .aqua-markdown-editor__input:disabled { opacity: 1; background-color: transparent; }

	/* ---- os estados de campo, na caixa ---------------------------------------------------- */
	.aqua-markdown-editor:hover { background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-hover)); }
	.aqua-markdown-editor:focus-within {
		filter: brightness(1.06);
	}
	.aqua-markdown-editor[aria-invalid="true"] { border-color: rgb(var(--aqua-danger-rgb) / 60%); }
	.aqua-markdown-editor:has(:disabled),
	.aqua-markdown-editor:has(:disabled):hover {
		opacity: 0.5;
		cursor: not-allowed;
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-rest));
	}
}

/* ==== 73-markdown-toolbar.css ==== */
/* 73-markdown-toolbar.css - aqua-markdown-toolbar. Os botoes de formatacao.

   Gota: A DA BARRA COLADA (23-joined-bar.css). Cada grupo e uma
   aqua-joined-bar, e a barra inteira e uma Gota: o canto afiado no primeiro
   item, os redondos no ultimo; os botoes fecham o canto ao toque onde ele
   existe. A toolbar nao acrescenta assinatura: ela COMPOE.

   A ideia com nome: GRUPOS DE BARRA COLADA, NAO UMA BARRA SO. Quatro grupos
   de aqua-icon-btn--sm com os icones de texto do pack: texto (bold, italic,
   underline, strikethrough), codigo (code, code-block, quotes), listas
   (list, list-numbers, list-checks) e midia (link, image). Doze botoes numa
   Gota so seria uma barra de 300px sem pausa; os grupos dizem o que e o que.

   O CSS e a linha do layout: a folha existe para a prova 5 e para registrar
   a decisao, como a do context-menu. Tudo o mais e dos componentes que ela
   compoe e do aqua-ui.js: role=toolbar com um so botao na ordem de
   tabulacao (setas movem com volta, Home e End), data-aqua-alvo apontando
   a textarea (ou a do aqua-markdown-editor em volta), e cada data-aqua-md
   envolvendo a selecao ou prefixando as linhas por setRangeText, com input
   despachado e o foco de volta na textarea.

   Decisoes, para ninguem "corrigir":
   - sem aria-pressed: os botoes AGEM, nao mostram estado. Saber se o cursor
     esta em negrito exige parsear markdown, e o kit nao parseia.
   - cada botao leva aria-label (e um icon-btn) e data-aqua-tooltip com o
     atalho: o tooltip da 5 e o que explica o icone.
   - underline e <u> e </u>: markdown nao tem sublinhado, e o HTML em linha e
     o que todo renderizador aceita. E texto, nao innerHTML. */
@layer aqua.componente {
	.aqua-markdown-toolbar {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--aqua-space-2);
		min-width: 0;
	}
}

/* ==== 74-chat-bubble.css ==== */
/* 74-chat-bubble.css - aqua-chat-bubble. A mensagem de um ticket, e o balao
   que a carrega.

   Gota: A GOTA QUE APONTA. E a expressao do tooltip (51-tooltip.css), nao
   uma nova: o canto afiado fica do lado de quem falou. O balao do outro
   (o staff, o bot) e alinhado a esquerda e tem o canto afiado embaixo a
   esquerda (gota-bl); o meu (--me) e alinhado a direita e tem o canto
   afiado embaixo a direita (gota-br). Sem cauda desenhada: o canto e a
   cauda. O canto NAO anima: e parado por lado, como no tooltip (§13, e o
   criterio 6 da fase). Os dois lados sao o mesmo vidro-1 e se distinguem
   pelo canto e pelo alinhamento, como duas pessoas a mesa se distinguem
   pelo lado em que sentam, nao pela cor da roupa; o meu leva a borda accent
   a 45% (a linha do selecionado, sem o fundo), porque na captura a 1x o
   canto sozinho nao bastou para dizer "este e meu" numa coluna longa. E a
   condicao que o plano da fase previu, cumprida ao olhar.

   A ideia com nome: a mesma. O balao de todo chat e azul de um lado e cinza
   do outro, com uma cauda triangular colada; aqui a forma que ja pertence
   ao sistema diz quem falou, e a mensagem se le como da mesma familia do
   botao que a envia.

   O publico e o dono de servidor: o chat e o ticket de suporte entre o dono
   e o staff ou o bot da Aqua Nuis. O balao mostra o que foi digitado
   (white-space pre-wrap: a quebra de linha fica) e nada e renderizado
   (regra 11). overflow-wrap anywhere quebra um caminho ou um hash longo em
   vez de estourar a coluna. Largura ate 560px: mais que isso e paragrafo de
   documento, nao mensagem.

   Decisoes, para ninguem "corrigir":
   - --me e modificador, nao atributo: quem falou nao e estado ARIA.
   - o fio (a coluna que empilha as mensagens) e da aplicacao: display flex,
     flex-direction column, gap space-3. Um componente que e so isso seria
     variante sem dono. align-self faz o --me encostar a direita nesse fio.
   - a meta (autor, hora, lida) e fs-sm text-muted com virgula entre os
     campos, por ::before do irmao: um elemento por campo, e virgula
     (proibicao 2). A altura minima e a de um aqua-icon-btn--sm, para a
     linha nao pular quando as chat-actions (75) aparecem nela.
   - vidro-1 leva so o contato interno de 1px, sem sombra (§5); o filtro e
     do nivel, e o modo decide se ha blur.
   - zero JS. Inserir e remover mensagens e da aplicacao. */
@layer aqua.componente {
	.aqua-chat-bubble {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		align-self: flex-start;
		gap: var(--aqua-space-1);
		max-width: min(100%, 560px);
		min-width: 0;
	}

	/* ---- o balao: vidro-1 com o canto afiado virado para quem falou ---------------- */
	.aqua-chat-bubble__balloon {
		padding: var(--aqua-space-2) var(--aqua-space-4);
		border: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border));
		border-radius: var(--aqua-gota-bl);
		background: var(--aqua-vidro-1-bg);
		-webkit-backdrop-filter: var(--aqua-vidro-1-filtro);
		backdrop-filter: var(--aqua-vidro-1-filtro);
		box-shadow: inset 0 1px 0 rgb(var(--aqua-white-rgb) / 7%);
		color: var(--aqua-text);
		font-size: var(--aqua-fs-md);
		line-height: var(--aqua-lh-base);
		white-space: pre-wrap;
		overflow-wrap: anywhere;
	}

	/* ---- a meta: autor, hora, lida, com virgula; as acoes (75) entram depois ---------- */
	.aqua-chat-bubble__meta {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		min-height: calc(var(--aqua-fs-lg) + 2 * var(--aqua-space-1) + 2px);
		padding: 0 var(--aqua-space-1);
		font-size: var(--aqua-fs-sm);
		line-height: var(--aqua-lh-base);
		color: var(--aqua-text-muted);
	}
	.aqua-chat-bubble__meta > span + span::before { content: ", "; }

	/* ---- --me: o meu lado, a direita, com o canto afiado a direita ------------------- */
	.aqua-chat-bubble--me { align-items: flex-end; align-self: flex-end; }
	.aqua-chat-bubble--me .aqua-chat-bubble__balloon {
		border-color: rgb(var(--aqua-accent-rgb) / 45%);
		border-radius: var(--aqua-gota-br);
	}
	.aqua-chat-bubble--me .aqua-chat-bubble__meta { justify-content: flex-end; }
}

/* ==== 75-chat-actions.css ==== */
/* 75-chat-actions.css - aqua-chat-actions. Copiar, refazer e reagir, sob a
   mensagem.

   Gota: NENHUMA. Os botoes sao aqua-icon-btn--ghost --sm como estao, e
   fecham o canto ao toque como todo icon-btn (11-icon-button.css): agir
   sobre uma mensagem nao e escolhe-la. A linha nao redefine cor, raio nem
   estado de nada.

   A ideia com nome: APARECEM COM O PONTEIRO OU O FOCO, E NUNCA SOMEM DE QUEM
   NAO TEM PONTEIRO. Em repouso a linha esta em opacity 0 (e nao display
   none: os botoes continuam na ordem de tabulacao, e tabular ate eles e o
   que os revela); quando a mensagem (.aqua-chat-bubble) tem :hover ou
   :focus-within, ou a propria linha tem foco dentro, ela vai a 1 em
   t-rapido. Em @media (hover: none) fica visivel sempre: no toque nao ha
   ponteiro para revelar, e acao escondida e acao que nao existe.

   Mora na __meta do balao (74-chat-bubble.css), depois dos campos, com um
   respiro de space-1 que e margem de layout do conteiner sobre o filho; a
   meta ja reserva a altura de um icon-btn --sm, entao a linha nao pula
   quando as acoes aparecem. Fora de um balao, a linha e visivel sempre
   (nao ha mensagem para revela-la).

   O comportamento e do aqua-ui.js: copiar escreve o textContent do balao
   no clipboard e, se copiou, o icone vira check por 2 x t-lento; refazer e
   reagir disparam aqua-chat-actions na mensagem, e o resto e da aplicacao
   (refazer pede outra resposta ao bot; reagir abre a reaction-bar). */
@layer aqua.componente {
	.aqua-chat-actions {
		display: inline-flex;
		align-items: center;
		gap: var(--aqua-space-1);
		transition: opacity var(--aqua-t-rapido) var(--aqua-ease-out);
	}
	.aqua-chat-bubble__meta > .aqua-chat-actions { margin-left: var(--aqua-space-1); }

	/* ---- dentro de uma mensagem: escondida ate o ponteiro ou o foco chegarem --------- */
	.aqua-chat-bubble .aqua-chat-actions { opacity: 0; }
	.aqua-chat-bubble:hover .aqua-chat-actions,
	.aqua-chat-bubble:focus-within .aqua-chat-actions,
	.aqua-chat-bubble .aqua-chat-actions:focus-within { opacity: 1; }

	/* ---- sem ponteiro, sempre visivel ------------------------------------------------ */
	@media (hover: none) {
		.aqua-chat-bubble .aqua-chat-actions { opacity: 1; }
	}
}

/* ==== 76-chat-thinking.css ==== */
/* 76-chat-thinking.css - aqua-chat-thinking. O staff esta escrevendo.

   Gota: O ESQUELETO DE UMA FRASE. Decisao visual da Fase 7. Tres blocos de
   space-2 de altura e larguras space-8, space-6 e space-4 (tres palavras
   comecando, a primeira mais longa) condensam de pilula em Gota e relaxam
   por aqua-gota-condensa, em cascata de --aqua-cascata entre irmaos: a
   expressao do esqueleto (18-skeleton.css), no lugar em que o esqueleto
   mais faz sentido, o lugar do texto que ainda nao chegou. Nao sao tres
   pontos pulando: nada sobe e desce. Cabe no limite do §13: 8px.

   A ideia com nome: a mesma. O "digitando" de todo chat e tres bolinhas
   subindo e descendo em sequencia; aqui e o rascunho da frase que vem,
   esperando como o resto do sistema espera.

   Mora dentro de um aqua-chat-bubble__balloon do outro lado (74-chat-bubble):
   a demo mostra. A altura minima e a de uma linha de texto (fs-md vezes
   lh-base), para o balao do pensando ter a altura de um balao de uma linha
   e o fio nao pular quando a resposta chega.

   Decisoes, para ninguem "corrigir":
   - role="status" e aria-live="polite" no bloco, e o texto so para leitor
     de tela dentro (.aqua-sr-only): "o staff esta escrevendo" e lido uma
     vez; os blocos sao aria-hidden.
   - a cascata e por :nth-of-type, porque o primeiro filho e o texto para
     leitor de tela e os blocos sao os <i>; o indice vira atraso, como no
     esqueleto.
   - sem modificador: uma forma. Sob prefers-reduced-motion a base congela o
     quadro 0: tres pilulas paradas, que ainda dizem "esperando".
   - zero JS: a aplicacao insere o balao quando o outro comeca a escrever e
     o remove quando a mensagem chega.
   - o balao e pre-wrap (74): uma quebra de linha no HTML em volta do bloco
     viraria linha em branco. Escreva o pensando sem quebra dentro do balao;
     e, como melhoria (§9), o balao que contem um pensando volta a
     white-space normal por :has(). Sem :has() a regra de escrita basta. */
@layer aqua.componente {
	.aqua-chat-thinking {
		display: flex;
		align-items: center;
		gap: var(--aqua-space-1);
		min-height: calc(var(--aqua-fs-md) * var(--aqua-lh-base));
	}
	/* O balao que so tem o pensando nao precisa preservar quebra nenhuma. */
	.aqua-chat-bubble__balloon:has(> .aqua-chat-thinking) { white-space: normal; }

	/* ---- os tres blocos: a frase que vem, condensando em cascata ------------------- */
	.aqua-chat-thinking__block {
		display: block;
		flex: none;
		height: var(--aqua-space-2);
		border-radius: var(--aqua-radius-full);
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-hover));
		animation: aqua-gota-condensa calc(var(--aqua-t-lento) * 4) var(--aqua-ease-in-out) infinite;
		animation-delay: calc(var(--aqua-cascata) * var(--aqua-thinking-i, 0));
	}
	.aqua-chat-thinking__block:nth-of-type(1) { --aqua-thinking-i: 0; width: var(--aqua-space-8); }
	.aqua-chat-thinking__block:nth-of-type(2) { --aqua-thinking-i: 1; width: var(--aqua-space-6); }
	.aqua-chat-thinking__block:nth-of-type(3) { --aqua-thinking-i: 2; width: var(--aqua-space-4); }
}

/* ==== 77-prompt-box.css ==== */
/* 77-prompt-box.css - aqua-prompt-box. A caixa de envio do ticket.

   Gota: NENHUMA na caixa. E campo, chao quieto (§13): a Gota aparece no
   __send primario, que e o que se aciona, e os chips de anexo fecham o
   canto ao toque no __remove. A caixa compoe e nao redesenha: a
   aqua-textarea (25), o input do aqua-file-picker (71), o aqua-chip (12), o
   aqua-icon-btn (11), o aqua-btn (10) e, opcional, a aqua-markdown-toolbar
   (73) entram pela classe deles; aqui so as partes proprias.

   A ideia com nome: A CAIXA DE CAMPO QUE ENVIA. E a mesma caixa composta do
   editor de markdown (72), em coluna: a toolbar opcional em cima, os anexos
   como chips, a textarea de 1 a 8 linhas sem borda propria, e a linha de
   acoes com o anexar a esquerda e o enviar a direita. Enter envia,
   Shift+Enter quebra a linha, arrastar um arquivo por cima acende a caixa
   inteira como a zona do file-picker (data-aqua-sobre), e o enviar fica
   aria-disabled ate haver texto ou anexo.

   Decisoes, para ninguem "corrigir":
   - o __attach e um <label> com as classes do aqua-icon-btn fantasma e o
     aqua-file-picker__input dentro (o bloco so para leitor de tela,
     focavel): clicar abre o seletor sem JS, o Tab chega no input. position
     relative para o input absoluto ficar dentro dele.
   - a __input perde borda, fundo, raio e hover proprios, pelo seletor
     ".aqua-prompt-box > .aqua-prompt-box__input" (duas classes, filho
     direto), que empata com ".aqua-textarea:hover" e vence pela ordem (77
     depois de 25). Sem traco de foco desde 2026-09-29.
   - os estados sao os do campo: hover sobe o fundo da caixa sem translateY;
     :focus-within tem so brightness(1.06); aria-invalid
     na caixa poe a borda em danger 60%; :has(:disabled) esmaece como
     melhoria (§9); data-aqua-sobre acende como a zona do file-picker.
   - o enviar e aria-disabled, nao disabled: continua focavel e com tooltip,
     e o motivo de nao poder enviar (nada escrito) e obvio.
   - sem previa, pelo motivo do editor: renderizar markdown e innerHTML. */
@layer aqua.componente {
	.aqua-prompt-box {
		display: flex;
		flex-direction: column;
		min-width: 0;
		border: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border-strong));
		border-radius: var(--aqua-radius-md);
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-rest));
		color: var(--aqua-text);
		transition:
			background-color var(--aqua-t-rapido) var(--aqua-ease-out),
			border-color var(--aqua-t-rapido) var(--aqua-ease-out),
			filter var(--aqua-t-rapido) var(--aqua-ease-out);
	}

	/* ---- a toolbar opcional, em cima, sobre uma linha fina ---------------------------- */
	.aqua-prompt-box__toolbar {
		padding: var(--aqua-space-1) var(--aqua-space-2);
		border-bottom: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border));
	}

	/* ---- os anexos: chips acima da textarea; sem anexo a linha some ------------------- */
	.aqua-prompt-box__files {
		display: flex;
		flex-wrap: wrap;
		gap: var(--aqua-space-1);
		padding: var(--aqua-space-2) var(--aqua-space-3) 0;
	}
	.aqua-prompt-box__files[hidden] { display: none; }

	/* ---- a textarea: sem borda, fundo, raio, hover nem anel proprios ------------------ */
	.aqua-prompt-box > .aqua-prompt-box__input,
	.aqua-prompt-box > .aqua-prompt-box__input:hover,
	.aqua-prompt-box > .aqua-prompt-box__input:focus-visible {
		padding: var(--aqua-space-2) var(--aqua-space-3);
		border: 0;
		border-radius: 0;
		background-color: transparent;
		outline: 0;
		filter: none;
	}
	.aqua-prompt-box > .aqua-prompt-box__input:disabled { opacity: 1; background-color: transparent; }

	/* ---- a linha de acoes: anexar a esquerda, enviar a direita ----------------------- */
	.aqua-prompt-box__actions {
		display: flex;
		align-items: center;
		gap: var(--aqua-space-2);
		padding: 0 var(--aqua-space-2) var(--aqua-space-2);
	}
	.aqua-prompt-box__actions > .aqua-prompt-box__send { margin-left: auto; }
	.aqua-prompt-box__attach { position: relative; }
	.aqua-prompt-box__attach:focus-within {
		color: var(--aqua-text);
		filter: brightness(1.06);
	}

	/* ---- os estados da caixa: campo composto ---------------------------------------- */
	.aqua-prompt-box:hover { background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-hover)); }
	.aqua-prompt-box:focus-within {
		filter: brightness(1.06);
	}
	.aqua-prompt-box[aria-invalid="true"] { border-color: rgb(var(--aqua-danger-rgb) / 60%); }
	.aqua-prompt-box[data-aqua-sobre] {
		border-color: transparent;
		background-color: var(--aqua-selecao-bg);
		box-shadow: var(--aqua-selecao-sombra);
		filter: brightness(1.06);
	}
	.aqua-prompt-box:has(> .aqua-prompt-box__input:disabled),
	.aqua-prompt-box:has(> .aqua-prompt-box__input:disabled):hover {
		opacity: 0.5;
		cursor: not-allowed;
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-rest));
	}
}

/* ==== 78-reaction-bar.css ==== */
/* 78-reaction-bar.css - aqua-reaction-bar. As reacoes sob uma mensagem.

   Gota: A SELECAO, no chip pressionado, pelo proprio 12-chip.css: a reacao
   que e minha (aria-pressed) e a unica com o canto da Gota, e a assinatura
   migra quando eu troco de reacao. O __add fecha o canto ao toque, como
   todo icon-btn. Nada novo: a barra compoe.

   A ideia com nome: CHIPS COM A MINHA REACAO, E UM POPOVER PARA AS OUTRAS. A
   barra e uma linha de button.aqua-chip--sm, cada um com o emoji e a
   contagem em mono tabular; o ultimo e um aqua-icon-btn--ghost --sm que
   abre por data-aqua-popover um aqua-popover (o __picker) com o conjunto de
   reacoes que a aplicacao escreveu (o __set, chips de novo). O popover da 5
   faz o resto: flutua, recebe o foco, fecha com Esc e clicando fora.

   O comportamento e do aqua-ui.js: clicar num chip da barra alterna
   aria-pressed e dispara aqua-reaction com { reacao, ativa }; escolher no
   picker marca o chip igual na barra se houver, dispara com ativa true,
   fecha o picker e devolve o foco ao __add. A CONTAGEM E DA APLICACAO: o
   kit nao a toca, nem cria chip; quem ouve o evento reescreve o numero e
   cria o chip que ainda nao existe (o atelie faz isso na demo).

   Decisoes, para ninguem "corrigir":
   - o emoji vai a fs-md com line-height 1: e o tamanho do corpo, nao do
     chip pequeno, senao ele some. A contagem e fs-xs mono em text-muted, e
     vai a text no chip pressionado: e o numero que me inclui.
   - o __set e uma linha com quebra ate 240px; o __picker e o popover como
     esta, sem regra propria: padding, vidro e sombra sao dele.
   - sem tom por reacao, sem animacao ao reagir: a Gota migrando ja e o
     movimento. */
@layer aqua.componente {
	.aqua-reaction-bar {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--aqua-space-1);
		min-width: 0;
	}
	.aqua-reaction-bar__emoji { font-size: var(--aqua-fs-md); line-height: 1; }
	.aqua-reaction-bar__count {
		font-family: var(--aqua-font-mono);
		font-variant-numeric: tabular-nums;
		font-size: var(--aqua-fs-xs);
		color: var(--aqua-text-muted);
	}
	.aqua-reaction-bar > .aqua-chip[aria-pressed="true"] .aqua-reaction-bar__count { color: var(--aqua-text); }

	/* ---- o conjunto de reacoes, dentro do popover ------------------------------------ */
	.aqua-reaction-bar__set {
		display: flex;
		flex-wrap: wrap;
		gap: var(--aqua-space-1);
		max-width: 240px;
	}
	.aqua-reaction-bar__set > .aqua-chip { padding: var(--aqua-space-1) var(--aqua-space-2); font-size: var(--aqua-fs-lg); line-height: 1; }
}

/* ==== 79-tour.css ==== */
/* 79-tour.css - aqua-tour. Um popover por passo, e o alvo contornado pelo
   traco do anel.

   Gota: O ANEL DESENHADO SOBRE O ALVO, E O PASSO ATUAL DO STEPPER. Decisao
   visual da Fase 7, composta de duas expressoes que ja existem: o alvo de
   cada passo recebe o mesmo traco que o foco recebe (02-movimento.css, a
   classe .aqua-anel), nascendo no canto afiado da Gota e percorrendo o
   contorno em t-lento, com space-1 de folga; e o rodape de cada passo tem
   um aqua-stepper (59) cujo passo atual e uma Gota em accent solido. Nada
   novo, e nenhum veu.

   A ideia com nome: A PAGINA CONTINUA VIVA, E O ALVO E CONTORNADO. O tour de
   todo kit e um veu escuro com um buraco recortado sobre o alvo e uma caixa
   branca com seta; aqui nao ha veu nem buraco: cada passo e um aqua-popover
   (50) flutuado sobre o alvo pelo flutuante do §10, e o alvo e apontado pelo
   traco, que e como o sistema aponta para qualquer coisa.

   Os passos moram no HTML como filhos escondidos do bloco (.aqua-tour), cada
   um com data-aqua-alvo; o aqua-ui.js monta o rodape por createElement (o
   stepper so de marcadores, Anterior, Proximo e Concluir dentro de um
   aqua-popover__actions) e o Encerrar, e mostra um passo por vez. A folha e
   so a parte propria: o encerrar no canto, o rodape em coluna, os botoes que
   somem por [hidden] (o aqua-btn define display, e display vence hidden).

   Decisoes, para ninguem "corrigir":
   - Anterior e fantasma, Proximo e neutro, Concluir e primario: a Gota do
     rodape fica no unico botao que termina; o stepper ja carrega a do
     passo atual.
   - o __close e absoluto sobre o proprio passo, que e fixed pelo flutuante:
     nao e absolute dentro de vidro alheio (§10).
   - o anel do tour tem a mesma espessura do de foco (1.5), porque a classe
     e a mesma e o utilitario vence o componente por camada; nao tente
     engrossar aqui.
   - Tab circula dentro do passo (o kit cuida); o Tab do popover, que fecha
     e segue do gatilho, ignora um passo de tour. */
@layer aqua.componente {
	.aqua-tour__step > .aqua-popover__title { padding-right: var(--aqua-space-8); }
	.aqua-tour__close {
		position: absolute;
		top: var(--aqua-space-2);
		right: var(--aqua-space-2);
	}

	/* ---- o rodape: o stepper compacto e as acoes ------------------------------------ */
	.aqua-tour__footer {
		display: flex;
		flex-direction: column;
		gap: var(--aqua-space-3);
		padding-top: var(--aqua-space-2);
	}
	.aqua-tour__stepper { width: 100%; }
	.aqua-tour__stepper > .aqua-stepper__step { padding: 0; }
	.aqua-tour__step [data-aqua-tour-acao][hidden] { display: none; }
}

/* ==== 80-explainer-card.css ==== */
/* 80-explainer-card.css - aqua-explainer-card. O cartao que explica uma
   funcao e some.

   Gota: NENHUMA NOVA. O rosto e o aqua-empty__icon (63-empty.css), pela
   classe: o icone numa Gota em repouso de 48px, a expressao da 6, citacao e
   nao movimento. O Entendi e um aqua-btn neutro de proposito: fechar um
   cartao que explica nao e a acao primaria da tela, e a Gota parada do
   botao ja diz "aciona".

   A ideia com nome: UM CARD QUE SE APRESENTA E SAI DE CENA. E o aqua-card
   --compact (14) em linha: o rosto a esquerda, o titulo (aqua-card__title) e
   o texto no meio, o Entendi a direita; quando a linha quebra, o botao
   desce sozinho. Ao ler, o cartao sai por .aqua-sai e e removido, disparando
   aqua-explainer com { id }: lembrar que foi lido e da aplicacao, pelo
   data-aqua-explainer.

   A folha e so a parte propria: o card em linha, o texto em coluna, o
   rosto e o botao que nao encolhem. Vidro, raio, sombra e padding sao do
   card; a Gota do rosto e do empty.

   Decisoes, para ninguem "corrigir":
   - sem modificador: uma forma. Um explainer "grande" seria um aqua-card
     com um titulo, e um "pequeno" seria um tooltip.
   - o texto e fs-sm text-muted: e apoio ao titulo, que ja diz o que e.
   - o kit nao guarda o "lido": um localStorage no kit seria estado fora da
     aplicacao, e a NUI tem o proprio jeito de lembrar. */
@layer aqua.componente {
	.aqua-explainer-card {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--aqua-space-4);
	}
	.aqua-explainer-card__icon { flex: none; }
	.aqua-explainer-card__text {
		display: flex;
		flex: 1 1 240px;
		flex-direction: column;
		gap: var(--aqua-space-1);
		min-width: 0;
	}
	.aqua-explainer-card__body {
		font-size: var(--aqua-fs-sm);
		line-height: var(--aqua-lh-base);
		color: var(--aqua-text-muted);
	}
	.aqua-explainer-card > .aqua-btn { flex: none; align-self: center; }
}

/* ==== 81-cookie-consent.css ==== */
/* 81-cookie-consent.css - aqua-cookie-consent. O aviso de cookies do site da
   loja, preso ao rodape.

   Gota: NENHUMA. E um painel de vidro-3, superficie quieta (§13): o Aceitar
   primario carrega a Gota, e o Recusar e o botao neutro do mesmo tamanho.

   A ideia com nome: PRESO AO RODAPE, E RECUSAR E TAO FACIL QUANTO ACEITAR.
   position fixed no rodape, centrado, ate 720px; sem dialogo e sem veu: a
   pagina continua viva e legivel por tras. O texto cita a LGPD e leva o link
   de preferencias; as duas acoes ficam numa grade de duas colunas iguais,
   entao Recusar tem exatamente o tamanho de Aceitar. Sem "X" sozinho, sem
   botao escondido, sem "aceitar tudo" gritando: a escolha e uma escolha.

   O comportamento e do aqua-ui.js: a escolha (data-aqua-cookie) dispara
   aqua-cookie-consent com { escolha } e o painel sai por .aqua-sai e fica
   hidden, para a aplicacao reabrir por Preferencias (hidden false e
   .aqua-entra). Guardar a escolha e da aplicacao.

   Decisoes, para ninguem "corrigir":
   - vidro-3 com a sombra do vidro e radius-lg: e um painel que flutua sobre
     a pagina, o mesmo nivel do modal e do sheet, sem ser nenhum dos dois.
   - z-float, abaixo do modal e do toast: um modal aberto fica por cima do
     aviso, e um toast tambem.
   - centrado por left, right e margin auto, NAO por transform: a entrada e a
     saida do §7 (.aqua-entra, .aqua-sai) escrevem transform, e um translateX
     de centro seria perdido durante a animacao. Assim as duas valem como
     estao, crescendo do rodape (transform-origin 50% 100%).
   - [hidden] com regra explicita, porque display flex venceria o atributo.
   - o texto e fs-sm em text, nao text-muted: e a unica informacao do painel. */
@layer aqua.componente {
	.aqua-cookie-consent {
		position: fixed;
		right: var(--aqua-space-4);
		bottom: var(--aqua-space-4);
		left: var(--aqua-space-4);
		z-index: var(--aqua-z-float);
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--aqua-space-3) var(--aqua-space-6);
		width: min(100% - 2 * var(--aqua-space-4), 720px);
		margin: 0 auto;
		padding: var(--aqua-space-4) var(--aqua-space-6);
		border: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border));
		border-radius: var(--aqua-radius-lg);
		background: var(--aqua-vidro-3-bg);
		-webkit-backdrop-filter: var(--aqua-vidro-3-filtro);
		backdrop-filter: var(--aqua-vidro-3-filtro);
		box-shadow:
			inset 0 1px 0 rgb(var(--aqua-white-rgb) / 7%),
			0 1px 2px rgb(var(--aqua-black-rgb) / 20%),
			0 12px 32px -12px rgb(var(--aqua-black-rgb) / 40%);
		color: var(--aqua-text);
		transform-origin: 50% 100%;
	}
	.aqua-cookie-consent[hidden] { display: none; }

	.aqua-cookie-consent__text {
		flex: 1 1 320px;
		min-width: 0;
		font-size: var(--aqua-fs-sm);
		line-height: var(--aqua-lh-base);
		color: var(--aqua-text);
	}
	.aqua-cookie-consent__actions {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--aqua-space-2);
		flex: none;
	}
}

/* ==== 82-product-card.css ==== */
/* 82-product-card.css - aqua-product-card. O cartao de script e de plano da
   loja.

   Gota: NENHUMA no card. E superficie (§13), como o aqua-card (14) que ele
   e: o botao primario do rodape carrega a Gota, o aqua-rating dentro avalia
   em gotas, e o aqua-plan-badge e a Gota parada no canto. O card so os
   segura.

   A ideia com nome: UM CARD QUE SEGURA PRECO, AVALIACAO E SELO SEM OS
   REDESENHAR. O product-card compoe pela classe: aqua-card__media sangrando
   como capa (__media), aqua-plan-badge--corner quando houver, o __body com o
   aqua-card__title (o titulo e um <a>), o aqua-card__meta com categoria e
   versao separadas por virgula, o aqua-rating com a contagem e, no card de
   plano, a __features; e o aqua-card__footer como __footer, com o aqua-price
   a esquerda e a acao primaria a direita. Nao interativo por inteiro: o
   titulo e link e a acao e botao; um card que fosse botao inteiro roubaria o
   clique do rating e do link.

   ESTA FOLHA NAO ESCREVE SOBRE aqua-price, aqua-rating NEM aqua-plan-badge.
   Ela vem ANTES das tres na cascata (82 < 83, 84, 86) e nao precisa vencer
   nenhuma: o preco ja e fs-lg por padrao (o tamanho do card de script) e
   --lg no plano; o selo ja sabe prender-se ao canto (--corner). O card so
   escreve position relative, para o selo ter onde se apoiar, e as partes
   proprias.

   Decisoes, para ninguem "corrigir":
   - a __media e a aqua-card__media (sangrando, radio de cima) mais o que a
     capa de um script sem screenshot precisa: um aspecto 16/9, o fundo
     alpha-rest e o icone do script a fs-3xl em text-muted. Uma <img> com as
     duas classes e a capa com screenshot, e o object-fit cover do card vale.
   - o __link e text, nao accent, e sublinha no hover: e um titulo que
     navega, nao um texto com link dentro.
   - a __features e uma lista de linhas com icone em text-muted: sem check
     verde, porque cor solida e ponto de status (§5) e "incluido" nao e
     status.
   - a grade que poe tres cards lado a lado e da aplicacao. */
@layer aqua.componente {
	.aqua-product-card { position: relative; }

	/* ---- a capa: a midia do card, com aspecto e um icone quando nao ha imagem ---------- */
	.aqua-product-card__media {
		display: flex;
		align-items: center;
		justify-content: center;
		aspect-ratio: 16 / 9;
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-rest));
		color: var(--aqua-text-muted);
	}
	.aqua-product-card__media > [data-aqua-icon],
	.aqua-product-card__media > svg { width: var(--aqua-fs-3xl); height: var(--aqua-fs-3xl); }

	/* ---- o corpo: titulo que navega, meta, avaliacao, e as linhas do plano ---------------- */
	.aqua-product-card__body {
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
		gap: var(--aqua-space-2);
		min-width: 0;
	}
	.aqua-product-card__link { color: var(--aqua-text); text-decoration: none; }
	.aqua-product-card__link:hover { text-decoration: underline; text-underline-offset: 0.15em; }
	.aqua-product-card__features {
		display: flex;
		flex-direction: column;
		gap: var(--aqua-space-1);
		padding-top: var(--aqua-space-1);
		font-size: var(--aqua-fs-sm);
		line-height: var(--aqua-lh-base);
		color: var(--aqua-text);
	}
	.aqua-product-card__features > li { display: flex; align-items: center; gap: var(--aqua-space-2); }
	.aqua-product-card__features [data-aqua-icon] { flex: none; color: var(--aqua-text-muted); }

	/* ---- o rodape: o preco a esquerda, a acao a direita --------------------------------- */
	.aqua-product-card__footer {
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
	}
}

/* ==== 83-price.css ==== */
/* 83-price.css - aqua-price. O preco, na sans, tabular.

   Gota: NENHUMA. O preco e leitura, como o stat (17-stat.css), e e quieto
   de proposito: o que se move na loja e o botao de comprar ao lado dele.

   A IDEIA COM NOME: O NUMERO ALINHA EM COLUNA, E O SEPARADOR TEM LARGURA DE
   SEPARADOR. Ate 2026-09-15 esta folha usava Geist Mono com tabular-nums, e
   isso era redundante duas vezes: fonte mono ja da largura igual a tudo,
   INCLUSIVE a virgula, que ficava centrada numa celula de digito. O vao nao era
   defeito de 400px; existia em todos os tamanhos, e o fs-2xl do cartao de plano
   so o ampliava. A sans devolve a largura natural ao separador e o tabular-nums
   passa a servir para o que existe: alinhar digito em coluna.

   O proprio cabecalho antigo dizia que o preco deve ler-se "como num rotulo de
   prateleira", e rotulo de prateleira nao e mono: a intencao declarada e o meio
   escolhido discordavam entre si. Decisao do dono em 2026-09-15, na Fase 2 do
   aqua-web. Todo consumidor existente recebeu a correcao sem tocar HTML.

   Tres fatos de marcacao, para ninguem "corrigir" de volta: o __value e um
   <data value> com o numero em ponto, para a aplicacao ler sem parsear a
   virgula do texto; o __old (um <s>) vem ANTES do atual na marcacao, de
   proposito, porque o olho le "de 79,90 por 49,90"; e o desconto e um
   aqua-badge--success irmao, que esta folha deliberadamente nao estiliza.

   Tres tamanhos com dono: o padrao (fs-lg) no product-card de script, --lg
   (fs-2xl) no card de plano, --sm (fs-sm) na linha de lista. Nenhum outro.

   Decisoes, para ninguem "corrigir":
   - inline-flex alinhado pela linha de base: moeda, valor e periodo se
     sentam na mesma linha, em tamanhos diferentes, como num rotulo de
     prateleira.
   - white-space nowrap: um preco nunca quebra no meio.
   - o texto leva virgula (PT-BR) e o value leva ponto: o kit nao formata
     numero; quem escreve o HTML escreve os dois. Zero JS. */
@layer aqua.componente {
	.aqua-price {
		display: inline-flex;
		align-items: baseline;
		gap: var(--aqua-space-1);
		font-family: var(--aqua-font-sans);
		font-variant-numeric: tabular-nums;
		color: var(--aqua-text);
		white-space: nowrap;
	}
	.aqua-price__currency { font-size: var(--aqua-fs-sm); color: var(--aqua-text-muted); }
	.aqua-price__value {
		font-size: var(--aqua-fs-lg);
		font-weight: 600;
		line-height: var(--aqua-lh-tight);
		letter-spacing: -0.01em;
		color: var(--aqua-text);
	}
	.aqua-price__period { font-size: var(--aqua-fs-sm); color: var(--aqua-text-muted); }
	.aqua-price__old {
		font-size: var(--aqua-fs-sm);
		color: var(--aqua-text-muted);
		text-decoration: line-through;
	}
	/* O desconto e o badge do kit; aqui so o lugar dele na linha. */
	.aqua-price > .aqua-badge { align-self: center; margin-left: var(--aqua-space-1); }

	/* ---- os tres tamanhos com dono ------------------------------------------------- */
	.aqua-price--lg .aqua-price__value { font-size: var(--aqua-fs-2xl); }
	.aqua-price--lg .aqua-price__currency,
	.aqua-price--lg .aqua-price__old { font-size: var(--aqua-fs-md); }
	.aqua-price--sm .aqua-price__value { font-size: var(--aqua-fs-sm); }
}

/* ==== 84-rating.css ==== */
/* 84-rating.css - aqua-rating. A avaliacao e uma estrela.

   Estrela: ARREDONDADA, AMARELA. Reversao datada de 2026-09-11, decidida pelo
   dono sobre as maquetes da loja: ate a 1.22 a Aqua avaliava em Gotas (a
   expressao mais literal da Fase 7), desenhadas quando nao havia loja. Na loja o
   visitante tem 200 ms para reconhecer "isto e avaliacao", e convencao vence
   assinatura. A marca continua no botao, na capsula, no stepper e na selecao.

   Mesmo elemento, mesma marcacao, mesma conta de preenchimento: cinco
   .aqua-rating__drop de 16px que se enchem ate o valor, e a parcial e a parada de
   um gradiente que E o valor (4,8 enche 80% da quinta). A conta e uma so, por
   estrela: --aqua-rating-cheio = clamp(0%, (ate - i + 1) * 100%, 100%), com
   --aqua-rating-i de 1 a 5 por :nth-of-type e --aqua-rating-ate escrito pelo
   aqua-ui.js na raiz (o valor, ou a estrela sob o ponteiro no interativo). A
   estrela abaixo do valor da 100%, a acima da 0%, e a que contem o valor da a
   fracao. Funcao, nao decoracao, como o trilho do slider (38-slider.css): a
   proibicao 6 do §13 nao se aplica a nenhum dos dois gradientes daqui. O linear
   E a nota, e o radial do :focus-visible E o indicador de foco, que sob uma
   mascara nao pode ser outline nem box-shadow porque ela recorta os dois.

   O que muda da 1.22 para ca:
   - a silhueta vem de um mask-image com a estrela de cinco pontas arredondada
     (raio externo 9, interno 4,3, traco 2,2 com stroke-linejoin round), que esta
     dentro do piso Chromium 103;
   - a cor cheia e --aqua-rating (primitivo star), NAO --aqua-warning: reaproveitar
     o aviso faria a estrela ser a cor de um alerta;
   - sem borda e sem box-shadow: a mascara recorta os dois, e a estrela vazia e o
     fundo em text a alpha-active;
   - o foco deixa de ser o outline da base e passa a morar dentro da mascara; o
     bloco do :focus-visible, la embaixo, diz por que.

   Duas formas de uso, uma classe de estrela:
   - estatico: <span role="img" aria-label="4,8 de 5" data-aqua-valor="4.8">
     com cinco <i class="aqua-rating__drop">, o numero em mono (__value) e a
     contagem (__count). O JS escreve --aqua-rating-ate a partir do valor, e
     o observador segue o atributo.
   - interativo (--input): um <fieldset role="radiogroup"> com cinco
     <input type="radio" class="aqua-rating__drop"> de appearance none: e o
     grupo de radios da 4a, com o teclado dele (setas trocam a nota), e a
     estrela E o input, entao o foco se desenha nela mesma. O hover enche ate a
     estrela sob o ponteiro; change dispara aqua-rating.

   Decisoes, para ninguem "corrigir":
   - o nome da classe (__drop) fica: e a marcacao que os consumidores ja usam, e
     renomear seria MAJOR por cosmetica. O JS (AquaUI.rating, --aqua-rating-ate
     e data-aqua-rating-vivo) nao muda.
   - sem JS so a estrela marcada se enche (:checked), e o formulario envia a
     nota; a regra vale so ate o kit medir (data-aqua-rating-vivo), senao o
     marcado ficaria cheio durante o hover em outra estrela.
   - a nota e inteira: nao ha meia estrela clicavel. A parcial e so da media.
   - os cinco estados no input: hover sobe 1px e clareia, foco cresce e marca o
     nucleo, press encolhe a 0.90, disabled esmaece (o fieldset tambem).
   - o numero (__value) e mono tabular 600 em text; a contagem (__count) e
     fs-sm text-muted, com a palavra: "128 avaliacoes", nao "(128)". */
@layer aqua.componente {
	.aqua-rating {
		display: inline-flex;
		align-items: center;
		gap: var(--aqua-space-1);
		min-width: 0;
		margin: 0;
		padding: 0;
		border: 0;
		color: var(--aqua-text);
	}

	/* ---- a estrela: enche ate o valor, e a parcial e a parada do gradiente ----------- */
	.aqua-rating__drop {
		--aqua-rating-cheio: clamp(0%, (var(--aqua-rating-ate, 0) - var(--aqua-rating-i, 1) + 1) * 100%, 100%);
		--aqua-rating-forma: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.00,3.00L14.53,8.52L20.56,9.22L16.09,13.33L17.29,19.28L12.00,16.30L6.71,19.28L7.91,13.33L3.44,9.22L9.47,8.52Z' fill='white' stroke='white' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E");
		position: relative;
		display: inline-block;
		flex: none;
		width: var(--aqua-space-4);
		height: var(--aqua-space-4);
		margin: 0;
		border: 0;
		border-radius: 0;
		background:
			linear-gradient(to right, var(--aqua-rating) var(--aqua-rating-cheio), transparent 0),
			rgb(var(--aqua-text-rgb) / var(--aqua-alpha-active));
		-webkit-mask-image: var(--aqua-rating-forma);
		mask-image: var(--aqua-rating-forma);
		-webkit-mask-size: 100% 100%;
		mask-size: 100% 100%;
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		transition:
			transform var(--aqua-t-toque) var(--aqua-ease-out),
			filter var(--aqua-t-rapido) var(--aqua-ease-out);
	}
	.aqua-rating__drop:nth-of-type(1) { --aqua-rating-i: 1; }
	.aqua-rating__drop:nth-of-type(2) { --aqua-rating-i: 2; }
	.aqua-rating__drop:nth-of-type(3) { --aqua-rating-i: 3; }
	.aqua-rating__drop:nth-of-type(4) { --aqua-rating-i: 4; }
	.aqua-rating__drop:nth-of-type(5) { --aqua-rating-i: 5; }

	/* ---- o numero e a contagem ------------------------------------------------------- */
	.aqua-rating__value {
		padding-left: var(--aqua-space-1);
		font-family: var(--aqua-font-mono);
		font-variant-numeric: tabular-nums;
		font-size: var(--aqua-fs-sm);
		font-weight: 600;
		color: var(--aqua-text);
	}
	.aqua-rating__count { font-size: var(--aqua-fs-sm); color: var(--aqua-text-muted); }

	/* ---- interativo: a estrela e o input, com os cinco estados ------------------------ */
	input.aqua-rating__drop {
		-webkit-appearance: none;
		appearance: none;
		font: inherit;
		cursor: pointer;
	}
	input.aqua-rating__drop:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.08); }
	/* O foco NAO pode ser outline nem box-shadow aqui: mask-image recorta tudo que
	   o elemento pinta. Desde 2026-09-29 nao ha mais piso de foco em lugar nenhum
	   (00-base.css), mas o indicador proprio continua: sem ele a estrela focada
	   nao teria pista nenhuma. Duas pistas cobrem os dois casos:
	   - a estrela cresce 15%, que e geometria e vale tambem na vazia (e nao e o
	     hover, que sobe 1px, nem o press, que encolhe a 0.90);
	   - ela ganha um nucleo em surface, que mede 11,84 contra o amarelo da cheia,
	     e o que sobra da vazia vira accent, a cor de foco da base, que mede 8,07
	     contra surface. Uma das duas sempre tem contraste, esteja a estrela cheia,
	     parcial ou vazia.
	   O :not(:disabled) esta ai por especificidade, nao por logica: sem ele o
	   seletor pesa 0,2,1 contra os 0,3,1 do hover, e a estrela focada mudava de
	   tamanho ao entrar e sair o ponteiro. Empatado, ele vence por vir depois. */
	input.aqua-rating__drop:focus-visible:not(:disabled) {
		background:
			radial-gradient(closest-side circle at 50% 56%, var(--aqua-surface) 0 26%, transparent 26%),
			linear-gradient(to right, var(--aqua-rating) var(--aqua-rating-cheio), transparent 0),
			var(--aqua-accent);
		transform: scale(1.15);
		filter: brightness(1.06);
	}
	input.aqua-rating__drop:active:not(:disabled) {
		transform: translateY(-1px) scale(0.90);
		filter: brightness(0.96);
	}
	input.aqua-rating__drop:disabled,
	.aqua-rating:disabled .aqua-rating__drop { opacity: 0.5; cursor: not-allowed; transform: none; filter: none; }
	.aqua-rating:disabled { cursor: not-allowed; }

	/* Sem JS, so a marcada se enche; com o kit medindo, a conta acima decide. */
	.aqua-rating:not([data-aqua-rating-vivo]) .aqua-rating__drop:checked { --aqua-rating-cheio: 100%; }
}

/* ==== 85-category-rail.css ==== */
/* 85-category-rail.css - aqua-category-rail. O trilho de categorias da loja.

   Gota: A SELECAO, no item atual, pelo proprio aqua-nav-item (55): a
   categoria com aria-current recebe o canto, o selecionado e o icone em
   accent, e a assinatura migra ao navegar. O rail e quieto por si: organiza,
   nao escolhe.

   A ideia com nome: NAV-ITEMS NUM TRILHO QUE ROLA PARA O LADO. O rail e uma
   aqua-scroll-area--x (65) com aqua-nav-item dentro: a barra e a do kit, a
   sombra que diz "tem mais" vem do JS da 6, e cada item e o item de
   navegacao inteiro, com icone, rotulo e contagem. A folha e so o layout:
   linha com gap space-1 e padding space-1, e os filhos com width auto e flex
   none, porque o nav-item vem com width 100% para o rail vertical, e num
   trilho horizontal e o rail que decide quanto cada item ocupa (como a barra
   colada decide o canto dos filhos).

   --vertical empilha (os itens voltam a 100%): e o rail lateral do armas
   (.side), que lista categorias de arma numa coluna; o consumidor usa
   aqua-scroll-area sem --x e da a altura maxima, que e do layout.

   Decisoes, para ninguem "corrigir":
   - sem fundo proprio: o rail mora num vidro (o painel da loja, o .side do
     armas). Um trilho com vidro proprio dentro de vidro seria duas bordas.
   - aria-current="page" na categoria atual e da aplicacao, como em todo
     nav-item; o rail nao tem JS.
   - sem setas de rolar nas pontas: a barra e a sombra ja dizem que ha mais,
     e a roda do mouse e o arrasto do toque ja rolam. */
@layer aqua.componente {
	.aqua-category-rail {
		display: flex;
		gap: var(--aqua-space-1);
		min-width: 0;
		padding: var(--aqua-space-1);
	}
	.aqua-category-rail > .aqua-nav-item { width: auto; flex: none; }

	/* ---- --vertical: o rail lateral do armas ------------------------------------------ */
	.aqua-category-rail--vertical { flex-direction: column; }
	.aqua-category-rail--vertical > .aqua-nav-item { width: 100%; }
}

/* ==== 86-plan-badge.css ==== */
/* 86-plan-badge.css - aqua-plan-badge. O selo do plano: "Mais popular".

   Gota: UMA GOTA PARADA EM ACCENT SOLIDO, E O CANTO VIRA PARA A PAREDE EM QUE
   SE APOIA. Decisao visual da Fase 7. Em linha, e a Gota em repouso do botao
   (gota-bl), solida, com o texto em on-accent (8.07, medido); presa ao canto
   superior direito de um card (--corner), o canto afiado e o superior
   direito (gota-tr), virado para as duas paredes que o seguram: a lei do
   interruptor e do slider, aplicada a um selo. Parado: um selo nao se move.

   A ideia com nome: a mesma. O default e a fita diagonal ou a pilula "MOST
   POPULAR" em caixa alta; aqui e a forma da marca, dizendo uma coisa em
   minusculas.

   Decisoes, para ninguem "corrigir":
   - fs-xs 500, o tamanho do badge (§3 permite no badge), SEM text-transform
     (proibicao 1). padding space-1 space-3 da 26px de altura, e o navegador
     reduz os raios de 16 na proporcao: a silhueta continua Gota.
   - um tom so, accent. Sem "novo", sem "promocao", sem contagem regressiva:
     um selo diz uma coisa. Um tom por plano (bronze, prata, ouro) seria cor
     solida em superficie (§5).
   - --corner e absoluto e precisa de position relative em quem o contem: o
     product-card (82) o escreve; um card avulso escreve inline. top e right
     em space-4, sobre a midia do card quando ha midia, com z-index 1.
   - fora de um card e um badge em linha com a mesma forma, para o nome do
     plano numa lista ou num titulo. Zero JS. */
@layer aqua.componente {
	.aqua-plan-badge {
		display: inline-flex;
		align-items: center;
		padding: var(--aqua-space-1) var(--aqua-space-3);
		border: 1px solid transparent;
		border-radius: var(--aqua-gota-bl);
		background-color: var(--aqua-accent);
		color: var(--aqua-on-accent);
		font-size: var(--aqua-fs-xs);
		font-weight: 500;
		line-height: var(--aqua-lh-base);
		white-space: nowrap;
	}

	/* ---- --corner: preso ao canto superior direito, o canto afiado virado para a parede --- */
	.aqua-plan-badge--corner {
		position: absolute;
		top: var(--aqua-space-4);
		right: var(--aqua-space-4);
		z-index: 1;
		border-radius: var(--aqua-gota-tr);
	}
}

/* ==== 87-color-picker.css ==== */
/* 87-color-picker.css - aqua-color-picker. O campo que escolhe uma cor.

   Gota: A DO SLIDER, NAS ALCAS DE MATIZ E DE ALFA (38-slider.css): cada faixa
   e um <input type="range"> do kit sobre um trilho que o proprio picker
   pinta, e a alca vira o canto para a parede mais proxima e fecha ao
   arrastar, sem uma linha nova. E A SELECAO, NO PRESET ESCOLHIDO, como o
   chip: o preset igual a cor atual recebe o canto (gota-bl) e a borda do
   selecionado, e a assinatura migra quando a cor bate com outro. O gatilho
   e campo e e quieto, como o do select e o do date-picker.

   A ideia com nome: O SELECT COM UM ESPECTRO DENTRO. O gatilho e a caixa de
   campo do select (34-select.css), repetida por texto, com a amostra no
   lugar do icone: um quadrado de 20px em radius-xs sobre um tabuleiro de
   transparencia, o hex em Geist Mono e o caret. O painel e vidro-2 com a
   sombra do vidro, radius-lg, space-2 de padding, e sai para o body pelo
   flutuante do §10 (largura auto, saida). Dentro, de cima para baixo: a
   area de saturacao e brilho (224 por 140, um canvas que o JS preenche por
   ImageData, com um anel fino por cursor), a faixa de matiz, a de alfa
   (some com data-aqua-alfa="nao"), o formato (um aqua-segmented--sm), o
   campo mono que aceita e devolve hex, rgb ou hsl, e um rodape com os
   presets e, quando o navegador tem EyeDropper, o conta-gotas. O valor
   real vai no __hidden em #rrggbb ou #rrggbbaa, o que o formulario envia.

   A animacao: A AMOSTRA ATRASA. O ::after da __swatch do gatilho transiciona
   background-color em t-base ease-out, entao a amostra chega na cor um
   instante depois do cursor, como tinta assentando; e o anel da area
   encolhe a 0.9 enquanto se arrasta (data-aqua-arrastando, escrito pelo
   JS), a lei 1 aplicada a um cursor. Nada mais anima: a posicao do cursor e
   o preenchimento das faixas mudam no ato, porque arrastar tem de responder
   no mesmo quadro.

   Toda cor que aparece aqui e COMPUTADA pelo JS e chega por uma custom
   property (--aqua-color-picker-cor) ou por um canvas: esta folha nao
   escreve um literal, e a prova 3 do verificar.js le o modulo tambem.

   Decisoes, para ninguem "corrigir":
   - os estados do gatilho sao os do select: hover sobe 1px, press adensa
     sem fechar canto (nao tem Gota), foco clareia com o anel, aberto
     clareia e o caret gira; aria-invalid e disabled no gatilho.
   - o tabuleiro e um conic-gradient de text a 18% sobre surface, em
     quadrados de space-2: e o unico gradiente da folha e ele tem funcao
     (mostrar a transparencia), nao e a proibicao 6. As faixas de canvas
     desenham o mesmo tabuleiro com os mesmos dois tokens, lidos por
     getComputedStyle.
   - o painel esconde por regra explicita ([hidden]): o atributo perde para
     o display da camada. Aberto, ele esta no body, nao dentro da raiz - por
     isso o estado de arraste mora na __area, e nao na raiz.
   - a area e campo (role slider, tabindex 0): foco clareia, nao sobe. O
     cursor e um anel branco de 2px com 1px de sombra escura por fora, para
     ser visto sobre qualquer cor da area; dentro dele esta a cor atual.
   - as faixas usam o slider do kit com --bare (38-slider.css): trilho
     transparente, a alca inteira. O canvas por baixo tem a altura do trilho
     (space-2) e radius-full, centrado na altura da alca.
   - a amostra (20px) e o preset (space-6) sao quadrados de canto
     radius-xs / 2, como a caixa de selecao desmarcada (29-checkbox.css):
     radius-xs inteiro (11px) num alvo de 24px vira circulo, e circulo nao
     tem canto para a Gota migrar. Press do preset vai a 0.90 e fecha o
     canto (alvo de 24px, lei 1); o escolhido recebe gota-bl e a borda
     accent 45%. Sem check: o canto marca.
   - o conta-gotas e um aqua-icon-btn--sm e so existe quando
     typeof window.EyeDropper === "function" (melhoria progressiva, §9).
   - --block estica; --sm e o degrau do input, com a amostra em space-4. */
@layer aqua.componente {
	.aqua-color-picker { display: inline-block; vertical-align: middle; min-width: 0; }
	.aqua-color-picker--block { display: block; width: 100%; }

	/* ---- o gatilho: a caixa de campo, clicavel ---------------------------------------- */
	.aqua-color-picker__trigger {
		display: flex;
		align-items: center;
		gap: var(--aqua-space-2);
		width: 100%;
		min-width: 0;
		padding: var(--aqua-space-2) var(--aqua-space-4);
		border: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border-strong));
		border-radius: var(--aqua-radius-md);
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-rest));
		color: var(--aqua-text);
		font-size: var(--aqua-fs-md);
		line-height: var(--aqua-lh-base);
		text-align: left;
		cursor: pointer;
		transition:
			transform var(--aqua-t-toque) var(--aqua-ease-out),
			backdrop-filter var(--aqua-t-toque) var(--aqua-ease-out),
			background-color var(--aqua-t-rapido) var(--aqua-ease-out),
			border-color var(--aqua-t-rapido) var(--aqua-ease-out),
			filter var(--aqua-t-rapido) var(--aqua-ease-out);
	}
	.aqua-color-picker__trigger:hover {
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-hover));
		transform: translateY(-1px);
	}
	.aqua-color-picker__trigger:focus-visible,
	.aqua-color-picker__trigger[aria-expanded="true"] { filter: brightness(1.06); }
	.aqua-color-picker__trigger[aria-expanded="true"] { background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-hover)); }
	.aqua-color-picker__trigger:active {
		transform: translateY(-1px) scale(0.97);
		background-color: rgb(var(--aqua-surface-rgb) / var(--aqua-press-tint));
		-webkit-backdrop-filter: var(--aqua-press-filtro);
		backdrop-filter: var(--aqua-press-filtro);
	}
	.aqua-color-picker__trigger[aria-invalid="true"],
	.aqua-color-picker__trigger[aria-invalid="true"]:focus-visible { border-color: rgb(var(--aqua-danger-rgb) / 60%); }
	.aqua-color-picker__trigger:disabled,
	.aqua-color-picker__trigger[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; filter: none; }

	/* ---- o tabuleiro: a cor computada sobre a transparencia, nos tres que mostram cor --- */
	.aqua-color-picker__swatch,
	.aqua-color-picker__preset,
	.aqua-color-picker__cursor {
		position: relative;
		overflow: hidden;
		background-color: var(--aqua-surface);
		background-image: conic-gradient(rgb(var(--aqua-text-rgb) / 18%) 25%, transparent 0 50%, rgb(var(--aqua-text-rgb) / 18%) 0 75%, transparent 0);
		background-size: var(--aqua-space-2) var(--aqua-space-2);
	}
	.aqua-color-picker__swatch::after,
	.aqua-color-picker__preset::after,
	.aqua-color-picker__cursor::after {
		content: "";
		position: absolute;
		inset: 0;
		background-color: var(--aqua-color-picker-cor, transparent);
	}

	/* ---- a amostra do gatilho: a tinta assenta em t-base -------------------------------- */
	.aqua-color-picker__swatch {
		flex: none;
		width: calc(var(--aqua-space-4) + var(--aqua-space-1));
		height: calc(var(--aqua-space-4) + var(--aqua-space-1));
		border: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border-strong));
		border-radius: calc(var(--aqua-radius-xs) / 2);
	}
	.aqua-color-picker__swatch::after { transition: background-color var(--aqua-t-base) var(--aqua-ease-out); }
	.aqua-color-picker__value {
		flex: 1 1 auto;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: var(--aqua-text);
		font-family: var(--aqua-font-mono);
		font-variant-numeric: tabular-nums;
	}
	.aqua-color-picker__caret {
		flex: none;
		width: 1em;
		height: 1em;
		color: var(--aqua-text-muted);
		transition: transform var(--aqua-t-base) var(--aqua-ease-out);
	}
	.aqua-color-picker__trigger[aria-expanded="true"] .aqua-color-picker__caret { transform: rotate(180deg); }

	/* ---- o painel: vidro-2 com o espectro, as faixas, o formato e os presets ---------- */
	.aqua-color-picker__panel {
		display: flex;
		flex-direction: column;
		gap: var(--aqua-space-2);
		width: max-content;
		padding: var(--aqua-space-2);
		border: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border));
		border-radius: var(--aqua-radius-lg);
		background: var(--aqua-vidro-2-bg);
		-webkit-backdrop-filter: var(--aqua-vidro-2-filtro);
		backdrop-filter: var(--aqua-vidro-2-filtro);
		box-shadow:
			inset 0 1px 0 rgb(var(--aqua-white-rgb) / 7%),
			0 1px 2px rgb(var(--aqua-black-rgb) / 20%),
			0 12px 32px -12px rgb(var(--aqua-black-rgb) / 40%);
		color: var(--aqua-text);
	}
	.aqua-color-picker__panel[hidden] { display: none; }

	/* ---- a area: saturacao para a direita, brilho para cima; o cursor e um anel ------- */
	.aqua-color-picker__area {
		position: relative;
		width: calc(var(--aqua-space-12) * 4 + var(--aqua-space-8));
		height: calc(var(--aqua-space-12) * 2 + var(--aqua-space-8) + var(--aqua-space-3));
		border-radius: var(--aqua-radius-md);
		cursor: crosshair;
		touch-action: none;
		transition: filter var(--aqua-t-rapido) var(--aqua-ease-out);
	}
	.aqua-color-picker__area:focus-visible { filter: brightness(1.06); }
	.aqua-color-picker__area-canvas {
		display: block;
		width: 100%;
		height: 100%;
		border-radius: var(--aqua-radius-md);
	}
	.aqua-color-picker__cursor {
		position: absolute;
		left: calc(var(--aqua-color-picker-x, 0) * 1%);
		top: calc((100 - var(--aqua-color-picker-y, 0)) * 1%);
		width: var(--aqua-space-4);
		height: var(--aqua-space-4);
		border: 2px solid var(--aqua-white);
		border-radius: var(--aqua-radius-full);
		box-shadow: 0 0 0 1px rgb(var(--aqua-black-rgb) / 35%);
		transform: translate(-50%, -50%);
		pointer-events: none;
		transition: transform var(--aqua-t-toque) var(--aqua-ease-out);
	}
	.aqua-color-picker__area[data-aqua-arrastando] .aqua-color-picker__cursor { transform: translate(-50%, -50%) scale(0.9); }

	/* ---- as faixas: o slider do kit, --bare, sobre um canvas com a altura do trilho ---- */
	.aqua-color-picker__hue,
	.aqua-color-picker__alpha {
		position: relative;
		height: calc(var(--aqua-space-4) + var(--aqua-space-1));
	}
	.aqua-color-picker__alpha[hidden] { display: none; }
	.aqua-color-picker__strip {
		position: absolute;
		inset: 0;
		display: block;
		width: 100%;
		height: var(--aqua-space-2);
		margin: auto 0;
		border-radius: var(--aqua-radius-full);
	}
	.aqua-color-picker__range {
		position: relative;
		z-index: 1;
		display: block;
		width: 100%;
	}

	/* ---- o formato, o campo e o rodape ------------------------------------------------- */
	.aqua-color-picker__formats { display: flex; width: 100%; }
	.aqua-color-picker__footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--aqua-space-2);
		padding-top: var(--aqua-space-1);
		border-top: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border));
	}
	.aqua-color-picker__presets { display: flex; flex-wrap: wrap; gap: var(--aqua-space-1); }

	/* ---- o preset: um quadrado de cor, clicavel; o escolhido recebe a Gota ------------- */
	.aqua-color-picker__preset {
		flex: none;
		width: var(--aqua-space-6);
		height: var(--aqua-space-6);
		padding: 0;
		border: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border-strong));
		border-radius: calc(var(--aqua-radius-xs) / 2);
		cursor: pointer;
		transition:
			transform var(--aqua-t-toque) var(--aqua-ease-out),
			border-radius var(--aqua-t-base) var(--aqua-ease-out),
			border-color var(--aqua-t-rapido) var(--aqua-ease-out),
			filter var(--aqua-t-rapido) var(--aqua-ease-out);
	}
	.aqua-color-picker__preset:hover { transform: translateY(-1px); filter: brightness(1.08); }
	.aqua-color-picker__preset:focus-visible { filter: brightness(1.06); }
	.aqua-color-picker__preset:active { transform: translateY(-1px) scale(0.90); border-radius: var(--aqua-radius-btn-fechado); filter: brightness(0.96); }
	.aqua-color-picker__preset[aria-pressed="true"],
	.aqua-color-picker__preset[aria-pressed="true"]:hover {
		border-color: var(--aqua-text);
		box-shadow: 0 0 0 1px var(--aqua-surface) inset;
		filter: brightness(1.06);
	}
	.aqua-color-picker__preset[aria-pressed="true"]:active { border-radius: var(--aqua-radius-btn-fechado); }

	/* ---- tamanho: o degrau do input, para a barra densa -------------------------------- */
	.aqua-color-picker--sm .aqua-color-picker__trigger { padding: var(--aqua-space-1) var(--aqua-space-3); font-size: var(--aqua-fs-sm); }
	.aqua-color-picker--sm .aqua-color-picker__swatch { width: var(--aqua-space-4); height: var(--aqua-space-4); }
}

/* ==== 88-time-picker.css ==== */
/* 88-time-picker.css - aqua-time-picker. O campo que abre as colunas de hora.

   Gota: A SELECAO, NA OPCAO ESCOLHIDA DE CADA COLUNA. E a mesma do dia do
   calendario (69-calendar.css) e da opcao do select: gota-bl, fundo accent
   10%, borda 45%, text e brightness, com border-radius em t-base para a
   migracao ser vista ao escolher outra; ao toque, gota-fechado. O gatilho e
   campo e e quieto, como o do date-picker: a Gota aparece no que se escolhe,
   e aqui se escolhe dentro do painel.

   A ideia com nome: O SELECT COM COLUNAS DE HORA DENTRO. O gatilho e a caixa
   de campo do date-picker (70-date-picker.css), repetida por texto, com o
   relogio no lugar do calendario; o painel e vidro-2 com uma coluna por
   unidade (horas e minutos; segundos com data-aqua-segundos), cada uma um
   listbox de sete linhas que rola por dentro com a barra da base, e o rodape
   com Agora e Limpar. A coluna tem tres linhas vazias em cima e embaixo
   (::before e ::after), para QUALQUER opcao poder ficar no centro, inclusive
   a primeira e a ultima: a opcao focada ou escolhida esta sempre na linha do
   meio, e a coluna le como uma roda sem ser uma. O valor real vai no __hidden
   em HH:MM (HH:MM:SS com segundos), o que o formulario envia.

   A animacao, decidida e nomeada: A OPCAO ESCOLHIDA DESLIZA AO CENTRO. Ao
   escolher, o aqua-ui.js rola a coluna ate a opcao ficar na linha do meio,
   em t-base e ease-out (reage, nao repete), e so entao o painel fecha. O
   estado muda de forma legivel: a escolha assenta no centro antes de sumir.
   E rolagem (scrollTop), nao transform: o que se move e o conteudo da caixa,
   e nada e repintado alem do que ja rola.

   Decisoes, para ninguem "corrigir":
   - os estados do gatilho sao os do select: hover sobe 1px, press adensa
     sem fechar canto (nao tem Gota), foco clareia com o anel, aberto
     clareia e o caret gira; aria-invalid e disabled no gatilho.
   - __value e text-muted (placeholder) ate data-aqua-escolhido na raiz,
     escrito pelo JS, e text depois, em tabular-nums como o date-picker.
   - a opcao e o dia do calendario em 48 por 32: mono tabular, fs-sm 500,
     radius-xs, os cinco estados; aria-disabled (fora de min e max)
     esmaece e continua focavel, porque o teclado do listbox precisa passar
     por ela.
   - a altura da coluna e sete linhas de space-8 com o gap de space-1, e a
     largura e a da opcao mais o padding e a barra; nada e do layout.
   - a barra e a do 00-base.css, como na scroll-area: uma segunda barra por
     cima da que a plataforma tem seria ruido.
   - o painel esconde por regra explicita ([hidden]): o atributo perde para
     o display da camada. Aberto, ele esta no body, nao dentro da raiz.
   - --block estica; --sm e o degrau do input, para a barra de filtros. */
@layer aqua.componente {
	.aqua-time-picker { display: inline-block; vertical-align: middle; min-width: 0; }
	.aqua-time-picker--block { display: block; width: 100%; }

	/* ---- o gatilho: a caixa de campo, clicavel ---------------------------------------- */
	.aqua-time-picker__trigger {
		display: flex;
		align-items: center;
		gap: var(--aqua-space-2);
		width: 100%;
		min-width: 0;
		padding: var(--aqua-space-2) var(--aqua-space-4);
		border: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border-strong));
		border-radius: var(--aqua-radius-md);
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-rest));
		color: var(--aqua-text);
		font-size: var(--aqua-fs-md);
		line-height: var(--aqua-lh-base);
		text-align: left;
		cursor: pointer;
		transition:
			transform var(--aqua-t-toque) var(--aqua-ease-out),
			backdrop-filter var(--aqua-t-toque) var(--aqua-ease-out),
			background-color var(--aqua-t-rapido) var(--aqua-ease-out),
			border-color var(--aqua-t-rapido) var(--aqua-ease-out),
			filter var(--aqua-t-rapido) var(--aqua-ease-out);
	}
	.aqua-time-picker__trigger:hover {
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-hover));
		transform: translateY(-1px);
	}
	.aqua-time-picker__trigger:focus-visible,
	.aqua-time-picker__trigger[aria-expanded="true"] { filter: brightness(1.06); }
	.aqua-time-picker__trigger[aria-expanded="true"] { background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-hover)); }
	.aqua-time-picker__trigger:active {
		transform: translateY(-1px) scale(0.97);
		background-color: rgb(var(--aqua-surface-rgb) / var(--aqua-press-tint));
		-webkit-backdrop-filter: var(--aqua-press-filtro);
		backdrop-filter: var(--aqua-press-filtro);
	}
	.aqua-time-picker__trigger[aria-invalid="true"],
	.aqua-time-picker__trigger[aria-invalid="true"]:focus-visible { border-color: rgb(var(--aqua-danger-rgb) / 60%); }
	.aqua-time-picker__trigger:disabled,
	.aqua-time-picker__trigger[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; filter: none; }

	.aqua-time-picker__icon { flex: none; width: 1.15em; height: 1.15em; color: var(--aqua-text-muted); }
	.aqua-time-picker__value {
		flex: 1 1 auto;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: var(--aqua-text-muted);
	}
	.aqua-time-picker[data-aqua-escolhido] .aqua-time-picker__value { color: var(--aqua-text); font-variant-numeric: tabular-nums; }
	.aqua-time-picker__caret {
		flex: none;
		width: 1em;
		height: 1em;
		color: var(--aqua-text-muted);
		transition: transform var(--aqua-t-base) var(--aqua-ease-out);
	}
	.aqua-time-picker__trigger[aria-expanded="true"] .aqua-time-picker__caret { transform: rotate(180deg); }

	/* ---- o painel: vidro-2 com as colunas e o rodape ---------------------------------- */
	.aqua-time-picker__panel {
		display: flex;
		flex-direction: column;
		gap: var(--aqua-space-2);
		width: max-content;
		padding: var(--aqua-space-2);
		border: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border));
		border-radius: var(--aqua-radius-lg);
		background: var(--aqua-vidro-2-bg);
		-webkit-backdrop-filter: var(--aqua-vidro-2-filtro);
		backdrop-filter: var(--aqua-vidro-2-filtro);
		box-shadow:
			inset 0 1px 0 rgb(var(--aqua-white-rgb) / 7%),
			0 1px 2px rgb(var(--aqua-black-rgb) / 20%),
			0 12px 32px -12px rgb(var(--aqua-black-rgb) / 40%);
		color: var(--aqua-text);
	}
	.aqua-time-picker__panel[hidden] { display: none; }
	.aqua-time-picker__columns { display: flex; gap: var(--aqua-space-1); }

	/* ---- a coluna: sete linhas, rola por dentro, e o centro e sempre alcancavel ------- */
	.aqua-time-picker__column {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: var(--aqua-space-1);
		height: calc(var(--aqua-space-8) * 7 + var(--aqua-space-1) * 8);
		padding: var(--aqua-space-1);
		overflow-y: auto;
		overscroll-behavior: contain;
	}
	/* Tres linhas vazias em cada ponta: a primeira e a ultima opcao tambem
	   chegam a linha do meio. Sem isto o 00 nunca se centra. */
	.aqua-time-picker__column::before,
	.aqua-time-picker__column::after {
		content: "";
		flex: none;
		height: calc(var(--aqua-space-8) * 3 + var(--aqua-space-1) * 2);
	}

	/* ---- a opcao: o dia do calendario, em 48 por 32, com os cinco estados ---------------- */
	.aqua-time-picker__option {
		flex: none;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: var(--aqua-space-12);
		height: var(--aqua-space-8);
		border: 1px solid transparent;
		border-radius: var(--aqua-radius-xs);
		background: none;
		color: var(--aqua-text);
		font-family: var(--aqua-font-mono);
		font-variant-numeric: tabular-nums;
		font-size: var(--aqua-fs-sm);
		font-weight: 500;
		line-height: 1;
		cursor: pointer;
		transition:
			transform var(--aqua-t-toque) var(--aqua-ease-out),
			border-radius var(--aqua-t-base) var(--aqua-ease-out),
			backdrop-filter var(--aqua-t-toque) var(--aqua-ease-out),
			background-color var(--aqua-t-rapido) var(--aqua-ease-out),
			border-color var(--aqua-t-rapido) var(--aqua-ease-out),
			color var(--aqua-t-rapido) var(--aqua-ease-out),
			filter var(--aqua-t-rapido) var(--aqua-ease-out);
	}
	.aqua-time-picker__option:hover {
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-hover));
		transform: translateY(-1px);
	}
	.aqua-time-picker__option:focus-visible { filter: brightness(1.06); }
	.aqua-time-picker__option:active {
		transform: translateY(-1px) scale(0.97);
		border-radius: var(--aqua-radius-btn-fechado);
		background-color: rgb(var(--aqua-surface-rgb) / var(--aqua-press-tint));
		-webkit-backdrop-filter: var(--aqua-press-filtro);
		backdrop-filter: var(--aqua-press-filtro);
	}
	.aqua-time-picker__option:disabled,
	.aqua-time-picker__option[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; filter: none; }

	/* A escolhida: a Gota migra para ca, e fica sob o mouse. */
	.aqua-time-picker__option[aria-selected="true"],
	.aqua-time-picker__option[aria-selected="true"]:hover {
		color: var(--aqua-escolha-fg);
		border-color: transparent;
		background-color: var(--aqua-escolha-bg);
	}
	.aqua-time-picker__option[aria-selected="true"]:hover { filter: brightness(0.94); }
	.aqua-time-picker__option[aria-selected="true"]:active { border-radius: var(--aqua-radius-btn-fechado); }

	/* ---- o rodape: Agora e Limpar, como o do date-picker --------------------------------- */
	.aqua-time-picker__footer {
		display: flex;
		justify-content: flex-end;
		gap: var(--aqua-space-1);
		padding-top: var(--aqua-space-1);
		border-top: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border));
	}

	/* ---- tamanho: o degrau do input, para a barra de filtros -------------------------- */
	.aqua-time-picker--sm .aqua-time-picker__trigger { padding: var(--aqua-space-1) var(--aqua-space-3); font-size: var(--aqua-fs-sm); }
}

/* ==== 89-date-range-picker.css ==== */
/* 89-date-range-picker.css - aqua-date-range-picker. O campo que abre dois meses
   e escolhe um periodo.

   Gota: A DO CALENDARIO, NAS DUAS PONTAS (69-calendar.css, modo faixa). O dia
   do inicio olha para a esquerda (gota-bl) e o do fim para a direita
   (gota-br): as pontas emolduram a faixa como as duas alcas do range-slider
   (40-range-slider.css), em vez de olharem para o mesmo lado. O que fica
   entre elas leva so accent 10%, sem borda e sem forma: a faixa e fundo, e
   as pontas sao as unicas com Gota. O gatilho e campo e e quieto, como o do
   date-picker.

   A ideia com nome: DOIS MESES LADO A LADO, E OS PRESETS A ESQUERDA. O
   gatilho e a caixa de campo do date-picker (70-date-picker.css), repetida
   por texto, mostrando "01/09/2026 a 10/09/2026"; o painel e vidro-2 com
   uma coluna de aqua-opcoes__item (Hoje, Ontem, Ultimos 7 dias, Ultimos 30
   dias, Este mes, Mes passado), dois aqua-calendar em modo faixa (o mes e o
   seguinte, navegados juntos, sem a seta do meio) e o rodape com Limpar e
   Aplicar. A escolha e pendente enquanto o painel esta aberto: dois cliques
   marcam as pontas, Aplicar grava; um preset e escolha completa e grava na
   hora, como o Hoje do date-picker. Os valores reais vao em dois __hidden
   (data-aqua-papel inicio e fim) em AAAA-MM-DD.

   A animacao, decidida e nomeada: A FAIXA CRESCE DIA A DIA SOB O PONTEIRO.
   Com o inicio marcado, passar o ponteiro pelos dias pinta a previa ate ele,
   e cada dia acende o fundo em t-rapido, a transicao que o dia do calendario
   ja tem; a ponta da previa carrega a Gota. Nada e repintado alem do fundo
   de cada celula, que e o que o hover do dia ja repinta.

   Decisoes, para ninguem "corrigir":
   - os estados do gatilho sao os do select: hover sobe 1px, press adensa
     sem fechar canto (nao tem Gota), foco clareia com o anel, aberto
     clareia e o caret gira; aria-invalid e disabled no gatilho.
   - __value e text-muted (placeholder) ate data-aqua-escolhido na raiz,
     escrito pelo JS, e text depois, em tabular-nums.
   - o preset e um aqua-opcoes__item pela classe dele, e o escolhido recebe a
     Gota do select (aria-selected, num role=listbox): a folha nao o redesenha,
     nem em tamanho. A coluna nao e aqua-opcoes: e uma coluna dentro do vidro
     do painel, e a lista do select traria um segundo vidro.
   - os calendarios nao levam vidro proprio: o chao e o do painel, como no
     date-picker. A folha nao escreve regra sobre o dia: o modo faixa e do
     69-calendar.css.
   - os dois calendarios quebram para baixo quando nao cabem lado a lado
     (flex-wrap); os presets nao quebram: uma coluna que vira linha muda de
     natureza.
   - o painel esconde por regra explicita ([hidden]): o atributo perde para
     o display da camada. Aberto, ele esta no body, nao dentro da raiz.
   - --block estica; --sm e o degrau do input, para a barra de filtros. */
@layer aqua.componente {
	.aqua-date-range-picker { display: inline-block; vertical-align: middle; min-width: 0; }
	.aqua-date-range-picker--block { display: block; width: 100%; }

	/* ---- o gatilho: a caixa de campo, clicavel ---------------------------------------- */
	.aqua-date-range-picker__trigger {
		display: flex;
		align-items: center;
		gap: var(--aqua-space-2);
		width: 100%;
		min-width: 0;
		padding: var(--aqua-space-2) var(--aqua-space-4);
		border: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border-strong));
		border-radius: var(--aqua-radius-md);
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-rest));
		color: var(--aqua-text);
		font-size: var(--aqua-fs-md);
		line-height: var(--aqua-lh-base);
		text-align: left;
		cursor: pointer;
		transition:
			transform var(--aqua-t-toque) var(--aqua-ease-out),
			backdrop-filter var(--aqua-t-toque) var(--aqua-ease-out),
			background-color var(--aqua-t-rapido) var(--aqua-ease-out),
			border-color var(--aqua-t-rapido) var(--aqua-ease-out),
			filter var(--aqua-t-rapido) var(--aqua-ease-out);
	}
	.aqua-date-range-picker__trigger:hover {
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-hover));
		transform: translateY(-1px);
	}
	.aqua-date-range-picker__trigger:focus-visible,
	.aqua-date-range-picker__trigger[aria-expanded="true"] { filter: brightness(1.06); }
	.aqua-date-range-picker__trigger[aria-expanded="true"] { background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-hover)); }
	.aqua-date-range-picker__trigger:active {
		transform: translateY(-1px) scale(0.97);
		background-color: rgb(var(--aqua-surface-rgb) / var(--aqua-press-tint));
		-webkit-backdrop-filter: var(--aqua-press-filtro);
		backdrop-filter: var(--aqua-press-filtro);
	}
	.aqua-date-range-picker__trigger[aria-invalid="true"],
	.aqua-date-range-picker__trigger[aria-invalid="true"]:focus-visible { border-color: rgb(var(--aqua-danger-rgb) / 60%); }
	.aqua-date-range-picker__trigger:disabled,
	.aqua-date-range-picker__trigger[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; filter: none; }

	.aqua-date-range-picker__icon { flex: none; width: 1.15em; height: 1.15em; color: var(--aqua-text-muted); }
	.aqua-date-range-picker__value {
		flex: 1 1 auto;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: var(--aqua-text-muted);
	}
	.aqua-date-range-picker[data-aqua-escolhido] .aqua-date-range-picker__value { color: var(--aqua-text); font-variant-numeric: tabular-nums; }
	.aqua-date-range-picker__caret {
		flex: none;
		width: 1em;
		height: 1em;
		color: var(--aqua-text-muted);
		transition: transform var(--aqua-t-base) var(--aqua-ease-out);
	}
	.aqua-date-range-picker__trigger[aria-expanded="true"] .aqua-date-range-picker__caret { transform: rotate(180deg); }

	/* ---- o painel: vidro-2 com os presets, os dois meses e o rodape ---------------------- */
	.aqua-date-range-picker__panel {
		display: flex;
		flex-direction: column;
		gap: var(--aqua-space-2);
		width: max-content;
		max-width: calc(100vw - var(--aqua-space-4));
		padding: var(--aqua-space-2);
		border: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border));
		border-radius: var(--aqua-radius-lg);
		background: var(--aqua-vidro-2-bg);
		-webkit-backdrop-filter: var(--aqua-vidro-2-filtro);
		backdrop-filter: var(--aqua-vidro-2-filtro);
		box-shadow:
			inset 0 1px 0 rgb(var(--aqua-white-rgb) / 7%),
			0 1px 2px rgb(var(--aqua-black-rgb) / 20%),
			0 12px 32px -12px rgb(var(--aqua-black-rgb) / 40%);
		color: var(--aqua-text);
	}
	.aqua-date-range-picker__panel[hidden] { display: none; }
	.aqua-date-range-picker__body { display: flex; align-items: flex-start; gap: var(--aqua-space-2); min-width: 0; }

	/* ---- os presets: uma coluna de itens da lista do select, sem o vidro dela ------------- */
	.aqua-date-range-picker__presets {
		display: flex;
		flex-direction: column;
		gap: var(--aqua-space-1);
		flex: none;
		min-width: calc(var(--aqua-space-12) * 3);
		padding: var(--aqua-space-1) var(--aqua-space-2) var(--aqua-space-1) var(--aqua-space-1);
		border-right: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border));
	}

	/* ---- os dois meses: lado a lado, e para baixo quando nao cabem ----------------------- */
	.aqua-date-range-picker__calendars {
		display: flex;
		flex-wrap: wrap;
		gap: var(--aqua-space-4);
		min-width: 0;
		padding: var(--aqua-space-1);
	}

	/* ---- o rodape: Limpar e Aplicar --------------------------------------------------- */
	.aqua-date-range-picker__footer {
		display: flex;
		justify-content: flex-end;
		gap: var(--aqua-space-1);
		padding-top: var(--aqua-space-1);
		border-top: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border));
	}

	/* ---- tamanho: o degrau do input, para a barra de filtros -------------------------- */
	.aqua-date-range-picker--sm .aqua-date-range-picker__trigger { padding: var(--aqua-space-1) var(--aqua-space-3); font-size: var(--aqua-fs-sm); }
}

/* ==== 90-tag-input.css ==== */
/* 90-tag-input.css - aqua-tag-input. O campo que guarda varios valores:
   cargos, allowlist, tags de produto.

   Gota: NENHUMA, de proposito. E campo, e campo e o chao quieto do §13: a
   Gota aparece no que se escolhe ou se aciona, nunca no que se digita. Os
   chips dentro sao o aqua-chip da 2b, e o que ele carrega do §13 e o canto
   que FECHA ao toque: apertar o x de um chip fecha o canto do chip inteiro
   por um instante (gota-fechado), como o icon-button. O chip marcado para
   remocao (aria-selected, o segundo Backspace o tira) recebe o selecionado
   do §4, fundo e borda em accent, SEM a Gota: marcar para apagar nao e
   escolher.

   A ideia com nome: A CAIXA DE CAMPO QUE QUEBRA LINHA. E a caixa da search
   (28-search.css), repetida por texto: borda 1px alpha-border-strong,
   radius-md, fundo alpha-rest, fs-md, lh-base, e o <input> transparente
   dentro dela. A diferenca e que aqui a caixa e flex com wrap, os chips sao
   irmaos do input, e o input CRESCE com o que se digita (o JS escreve a
   largura em ch) e vai para a linha de baixo quando a de cima enche. A
   altura de uma linha sem chip da 39px, a mesma do input e do botao:
   space-1 na caixa, space-1 no input, e o chip --sm tem 20px, que cabe na
   linha sem a esticar.

   A satisfacao: o chip novo entra por .aqua-entra, a lei 4 do §7, do lugar
   onde nasce; o removido sai por sair() antes de deixar o DOM; o duplicado
   nao entra, e o chip que ja existe PISCA uma vez por brightness em
   t-rapido (aqua-tag-input-pisca), para o olho achar onde o valor ja esta.

   Campo composto (§4): o focavel mora dentro da caixa. Sem traco de foco
   desde 2026-09-29; a caixa so ganha brightness em :focus-within, e o
   input apaga o proprio outline com outline 0.

   Decisoes, para ninguem "corrigir":
   - o x do chip e o aqua-chip__remove, e nao um aqua-icon-btn: um
     icon-button tem 36px e o chip --sm tem 20px. O composto usa a parte
     pela classe dela e nao a redesenha (§11); aqua-tag-input__remove e so
     o gancho do JS.
   - o chip e <span>, nao <button>: o chip nao se escolhe, so se remove, e um
     chip-botao mentiria sobre ser clicavel (12-chip.css). O :active do span
     casa quando o x dentro dele e pressionado, e e assim que o canto fecha.
   - cheio (data-aqua-cheio, escrito pelo JS ao chegar em data-aqua-max): o
     input vira readonly, o placeholder some, e Backspace continua removendo.
     Um campo cheio nao aceita texto, e nao precisa dizer isso em vermelho.
   - a lista de sugestao e a aqua-opcoes do select (34-select.css), que flutua
     pelo §10 e nao e redesenhada aqui; data-aqua-ativo ja e o "onde estou".
   - disabled e do <input>, e a caixa esmaece por :has(:disabled) como
     melhoria (§9): sem :has() o campo continua sem aceitar texto.
   - largura e do layout: display flex, width 100%. */
@layer aqua.componente {
	.aqua-tag-input {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--aqua-space-1);
		width: 100%;
		min-width: 0;
		padding: var(--aqua-space-1) var(--aqua-space-3);
		border: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border-strong));
		border-radius: var(--aqua-radius-md);
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-rest));
		color: var(--aqua-text);
		font-size: var(--aqua-fs-md);
		line-height: var(--aqua-lh-base);
		cursor: text;
		transition:
			background-color var(--aqua-t-rapido) var(--aqua-ease-out),
			border-color var(--aqua-t-rapido) var(--aqua-ease-out),
			filter var(--aqua-t-rapido) var(--aqua-ease-out);
	}

	/* ---- o input: transparente, cresce com o texto, quebra para baixo ------------- */
	.aqua-tag-input__input {
		flex: 1 1 auto;
		width: 8ch;
		min-width: 8ch;
		padding: var(--aqua-space-1) 0;
		border: 0;
		background: none;
		color: inherit;
		font-size: inherit;
		line-height: inherit;
		caret-color: var(--aqua-accent);
		-webkit-appearance: none;
		appearance: none;
	}
	.aqua-tag-input__input:focus-visible { outline: 0; }
	.aqua-tag-input__input:disabled { cursor: not-allowed; }

	/* ---- o chip: a parte, com o canto que fecha ao toque no x ---------------------- */
	.aqua-tag-input__chip {
		transition:
			border-radius var(--aqua-t-toque) var(--aqua-ease-out),
			background-color var(--aqua-t-rapido) var(--aqua-ease-out),
			border-color var(--aqua-t-rapido) var(--aqua-ease-out);
	}
	.aqua-tag-input__chip:active { border-radius: var(--aqua-radius-btn-fechado); }
	/* Marcado para remocao: o selecionado do §4, sem a Gota. */
	.aqua-tag-input__chip[aria-selected="true"] {
		background-color: var(--aqua-selecao-bg);
		box-shadow: var(--aqua-selecao-sombra);
		border-color: transparent;
	}
	/* O duplicado nao entra: o chip que ja existe pisca UMA vez. */
	.aqua-tag-input__chip[data-aqua-pisca] { animation: aqua-tag-input-pisca var(--aqua-t-rapido) var(--aqua-ease-out); }

	/* ---- os estados de campo, na caixa ---------------------------------------------- */
	.aqua-tag-input:hover { background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-hover)); }
	.aqua-tag-input:focus-within {
		filter: brightness(1.06);
	}
	.aqua-tag-input[aria-invalid="true"] { border-color: rgb(var(--aqua-danger-rgb) / 60%); }
	.aqua-tag-input[data-aqua-cheio] .aqua-tag-input__input::placeholder { color: transparent; }
	.aqua-tag-input:has(:disabled) {
		opacity: 0.5;
		cursor: not-allowed;
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-rest));
	}
}

/* Fora de camada, como os do 02-movimento: keyframes nao cascateiam. So
   filter: o chip nao muda de forma nem de lugar, so clareia e volta. */
@keyframes aqua-tag-input-pisca {
	0%, 100% { filter: brightness(1); }
	50%      { filter: brightness(1.3); }
}

/* ==== 91-password-input.css ==== */
/* 91-password-input.css - aqua-password-input. A senha: o campo, o olho que
   mostra, o aviso de Caps Lock e, quando pedido, a forca.

   Gota: NENHUMA, de proposito. E campo, e campo e o chao quieto do §13: a
   Gota aparece no que se escolhe ou se aciona, nunca no que se digita. O
   olho e um aqua-icon-btn--ghost usado pela classe dele (§11), e o que ele
   cita do §13 e o canto que fecha ao toque, como todo icon-button.

   A ideia com nome: O CAMPO QUE MOSTRA A FORCA EM CASCATA. A caixa (__box)
   e a da search (28-search.css), repetida por texto: padding 0 space-3,
   fs-md, lh-base, borda 1px alpha-border-strong, radius-md, fundo
   alpha-rest, e o <input type=password> transparente dentro. Abaixo dela,
   com data-aqua-forca na raiz, quatro segmentos de space-1 de altura e uma
   palavra em text-muted. A satisfacao: cada segmento ACENDE por transform
   scaleX de 0 a 1 com a origem a esquerda, em cascata de --aqua-cascata
   (t-base, ease-out); ao perder forca eles apagam na ordem inversa, o
   ultimo aceso primeiro. So transform anima (§7). A cor de cada nivel e um
   ponto de status (§5): danger, warning, info, success, do 1 ao 4.

   Campo composto (§4): sem traco de foco desde 2026-09-29; a caixa so
   ganha brightness em :focus-within, e o input apaga o proprio outline
   com outline 0.

   Decisoes, para ninguem "corrigir":
   - a raiz e uma coluna e a caixa e o __box: a forca mora ABAIXO do campo,
     e uma caixa de campo nao segura uma segunda linha sem virar outra
     coisa. O hover e o :focus-within ficam no __box, nao na raiz.
   - o olho nao e redesenhado: e o aqua-icon-btn --ghost --sm com uma
     margem negativa para o glifo terminar onde o texto termina, como o
     limpar da search. aria-pressed diz se a senha esta visivel e o
     aria-label alterna entre "Mostrar senha" e "Ocultar senha": o leitor de
     tela le o proximo gesto, nao o estado.
   - o Caps Lock e um aqua-badge--warning dentro da caixa, escondido por
     [hidden] com regra explicita (o display da camada vence o atributo), e
     aria-live nele: o aviso aparece sem o foco sair do campo, e some ao
     sair. Sem JS ele nunca aparece, e isso e o certo.
   - cada segmento e um trilho parado (alpha-rest, radius-full) com um
     ::before que escala: so o preenchimento se move. A cor vem de
     --aqua-password-input-tom, escrita por nivel na raiz; o atraso vem de
     --aqua-password-input-atraso em cada segmento, escrito pelo JS como um
     multiplo de --aqua-cascata, para a cascata partir do segmento que
     mudou e nao do primeiro da fila. Sem o JS os segmentos ficam apagados:
     a forca so existe com o JS que a pontua.
   - os segmentos acesos vem do data-aqua-nivel na raiz por :nth-child, e
     nao de um atributo por segmento: um so atributo diz a verdade inteira.
   - o __strength e role=meter com aria-valuenow de 0 a 4 e aria-valuetext
     com a palavra; o __hint repete a palavra em texto e e aria-live. Vazio
     nao tem nivel nem palavra, e o __hint guarda a altura por :empty para
     o campo nao pular quando a primeira letra entra.
   - disabled e do <input>; o JS desabilita o olho junto, e a caixa esmaece
     por :has(:disabled) como melhoria (§9): sem :has() o campo continua sem
     aceitar texto, so nao esmaece.
   - --sm e o degrau do input; --block estica a raiz e a caixa. */
@layer aqua.componente {
	.aqua-password-input {
		display: inline-flex;
		flex-direction: column;
		gap: var(--aqua-space-2);
		min-width: 0;
		vertical-align: middle;
	}
	.aqua-password-input--block { display: flex; width: 100%; }

	/* ---- a caixa: a da search, repetida por texto ------------------------------------ */
	.aqua-password-input__box {
		display: flex;
		align-items: center;
		gap: var(--aqua-space-2);
		padding: 0 var(--aqua-space-3);
		border: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border-strong));
		border-radius: var(--aqua-radius-md);
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-rest));
		color: var(--aqua-text);
		font-size: var(--aqua-fs-md);
		line-height: var(--aqua-lh-base);
		transition:
			background-color var(--aqua-t-rapido) var(--aqua-ease-out),
			border-color var(--aqua-t-rapido) var(--aqua-ease-out),
			filter var(--aqua-t-rapido) var(--aqua-ease-out);
	}

	/* ---- o input: transparente, a caixa e quem tem forma --------------------------- */
	.aqua-password-input__input {
		flex: 1 1 auto;
		min-width: 0;
		padding: var(--aqua-space-2) 0;
		border: 0;
		background: none;
		color: inherit;
		font-size: inherit;
		line-height: inherit;
		caret-color: var(--aqua-accent);
		-webkit-appearance: none;
		appearance: none;
	}
	.aqua-password-input__input:focus-visible { outline: 0; }
	.aqua-password-input__input:disabled { cursor: not-allowed; }
	/* O olho nativo do Edge sairia ao lado do nosso; quem mostra e o __toggle. */
	.aqua-password-input__input::-ms-reveal { display: none; }

	/* ---- o olho e o aviso: dentro da caixa, encostados a direita ----------------------- */
	.aqua-password-input__toggle { margin-right: calc(-1 * var(--aqua-space-2)); }
	.aqua-password-input__caps { flex: none; }
	.aqua-password-input__caps[hidden] { display: none; }

	/* ---- os estados de campo, na caixa ---------------------------------------------- */
	.aqua-password-input__box:hover { background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-hover)); }
	.aqua-password-input__box:focus-within {
		filter: brightness(1.06);
	}
	.aqua-password-input__box[aria-invalid="true"] { border-color: rgb(var(--aqua-danger-rgb) / 60%); }
	.aqua-password-input__box:has(:disabled) {
		opacity: 0.5;
		cursor: not-allowed;
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-rest));
	}

	/* ---- a forca: quatro trilhos parados, e o preenchimento que escala em cascata ----- */
	.aqua-password-input__strength {
		display: flex;
		gap: var(--aqua-space-1);
	}
	.aqua-password-input__segment {
		position: relative;
		flex: 1 1 0;
		height: var(--aqua-space-1);
		overflow: hidden;
		border-radius: var(--aqua-radius-full);
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-rest));
	}
	.aqua-password-input__segment::before {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: inherit;
		background-color: var(--aqua-password-input-tom, var(--aqua-accent));
		transform: scaleX(0);
		transform-origin: 0 50%;
		transition:
			transform var(--aqua-t-base) var(--aqua-ease-out) calc(var(--aqua-cascata) * var(--aqua-password-input-atraso, 0)),
			background-color var(--aqua-t-rapido) var(--aqua-ease-out);
	}
	.aqua-password-input[data-aqua-nivel="1"] { --aqua-password-input-tom: var(--aqua-danger); }
	.aqua-password-input[data-aqua-nivel="2"] { --aqua-password-input-tom: var(--aqua-warning); }
	.aqua-password-input[data-aqua-nivel="3"] { --aqua-password-input-tom: var(--aqua-info); }
	.aqua-password-input[data-aqua-nivel="4"] { --aqua-password-input-tom: var(--aqua-success); }
	.aqua-password-input[data-aqua-nivel="1"] .aqua-password-input__segment:nth-child(-n+1)::before,
	.aqua-password-input[data-aqua-nivel="2"] .aqua-password-input__segment:nth-child(-n+2)::before,
	.aqua-password-input[data-aqua-nivel="3"] .aqua-password-input__segment:nth-child(-n+3)::before,
	.aqua-password-input[data-aqua-nivel="4"] .aqua-password-input__segment:nth-child(-n+4)::before { transform: scaleX(1); }

	/* ---- a palavra: text-muted, e guarda a altura quando vazia ------------------------- */
	.aqua-password-input__hint {
		font-size: var(--aqua-fs-sm);
		line-height: var(--aqua-lh-base);
		color: var(--aqua-text-muted);
	}
	.aqua-password-input__hint:empty::before { content: "\00a0"; }

	/* ---- tamanho: o degrau do input ---------------------------------------------------- */
	.aqua-password-input--sm .aqua-password-input__box { padding: 0 var(--aqua-space-2); font-size: var(--aqua-fs-sm); }
	.aqua-password-input--sm .aqua-password-input__input { padding: var(--aqua-space-1) 0; }
	.aqua-password-input--sm .aqua-password-input__toggle { margin-right: calc(-1 * var(--aqua-space-1)); }
}

/* ==== 92-duration-input.css ==== */
/* 92-duration-input.css - aqua-duration-input. A duracao: dias, horas,
   minutos (e segundos, se pedido) num campo so, e presets embaixo.

   Gota: NENHUMA no campo, de proposito: e campo, o chao quieto do §13. Os
   presets sao aqua-chip--sm de botao, usados pela classe (§11), e o igual
   ao valor fica aria-pressed: e a SELECAO do chip (12-chip.css), a
   assinatura migrando com a escolha, sem uma regra nova aqui.

   A ideia com nome: O CAMPO QUE TRANSBORDA. A caixa (__box) e a da search
   (28-search.css), repetida por texto: padding 0 space-3, fs-md, lh-base,
   borda 1px alpha-border-strong, radius-md, fundo alpha-rest. Dentro, um
   __segment por unidade: um <input> de dois digitos em Geist Mono tabular
   (__field) com a unidade ao lado em text-muted (__unit). Ao sair de um
   segmento, o excedente TRANSBORDA para a unidade de cima: 61 m vira
   1 h 01 m, e o segmento que recebeu o carry pisca uma vez por brightness
   (aqua-duration-input-pisca, t-base, ease-out). E a satisfacao desta
   folha: o numero se acomoda sozinho, e o olho ve para onde ele foi.

   Campo composto (§4): sem traco de foco desde 2026-09-29; a caixa so
   ganha brightness em :focus-within, e cada __field apaga o proprio
   outline com outline 0.

   Decisoes, para ninguem "corrigir":
   - a raiz e uma coluna e a caixa e o __box, como no password-input: os
     presets moram abaixo do campo, e a caixa nao segura duas linhas.
   - o __field tem a largura em ch, lida de --aqua-duration-input-ch (2 por
     padrao, escrita pelo JS quando o numero passa de dois digitos): 120
     dias cabem sem todo campo ter tres digitos de largura.
   - alinhado a direita e com zero a esquerda (07 d 12 h 00 m): as colunas
     ficam alinhadas entre linhas de uma tabela e o numero se le como
     relogio. O JS seleciona o campo ao focar, entao digitar substitui.
   - a unidade do segmento focado vai a text: o campo acorda por partes e o
     olho sabe em que unidade esta. Sem Gota: nao e escolha.
   - o __segment e um <label>: clicar na unidade foca o campo dela.
   - o pisca e keyframe fora de camada, como no 90-tag-input.css; o JS poe
     data-aqua-recebeu e o tira no animationend, ou no relogio de seguranca
     quando o evento nao vem.
   - aria-invalid vai na caixa; aria-disabled="true" na raiz desabilita os
     campos e os presets pelo JS, e a caixa esmaece pelo atributo, sem
     :has() - o estado ja esta escrito onde o CSS le.
   - --sm e o degrau do input; --block estica a raiz e a caixa. */
@layer aqua.componente {
	.aqua-duration-input {
		display: inline-flex;
		flex-direction: column;
		gap: var(--aqua-space-2);
		min-width: 0;
		vertical-align: middle;
	}
	.aqua-duration-input--block { display: flex; width: 100%; }

	/* ---- a caixa: a da search, repetida por texto ------------------------------------ */
	.aqua-duration-input__box {
		display: flex;
		align-items: center;
		gap: var(--aqua-space-3);
		padding: 0 var(--aqua-space-3);
		border: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border-strong));
		border-radius: var(--aqua-radius-md);
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-rest));
		color: var(--aqua-text);
		font-size: var(--aqua-fs-md);
		line-height: var(--aqua-lh-base);
		transition:
			background-color var(--aqua-t-rapido) var(--aqua-ease-out),
			border-color var(--aqua-t-rapido) var(--aqua-ease-out),
			filter var(--aqua-t-rapido) var(--aqua-ease-out);
	}

	/* ---- o segmento: o numero e a unidade, e o pisca de quem recebeu o carry -------- */
	.aqua-duration-input__segment {
		display: inline-flex;
		align-items: baseline;
		gap: var(--aqua-space-1);
		border-radius: var(--aqua-radius-xs);
	}
	.aqua-duration-input__segment[data-aqua-recebeu] { animation: aqua-duration-input-pisca var(--aqua-t-base) var(--aqua-ease-out) 1; }
	.aqua-duration-input__field {
		width: calc(var(--aqua-duration-input-ch, 2) * 1ch + var(--aqua-space-1));
		min-width: 0;
		padding: var(--aqua-space-2) 0;
		border: 0;
		background: none;
		color: inherit;
		font-family: var(--aqua-font-mono);
		font-variant-numeric: tabular-nums;
		font-size: inherit;
		line-height: inherit;
		text-align: right;
		caret-color: var(--aqua-accent);
		-webkit-appearance: none;
		appearance: none;
	}
	.aqua-duration-input__field:focus-visible { outline: 0; }
	.aqua-duration-input__field:disabled { cursor: not-allowed; }
	.aqua-duration-input__unit {
		color: var(--aqua-text-muted);
		font-size: var(--aqua-fs-sm);
		font-weight: 500;
		transition: color var(--aqua-t-rapido) var(--aqua-ease-out);
	}
	.aqua-duration-input__field:focus + .aqua-duration-input__unit { color: var(--aqua-text); }

	/* ---- os estados de campo, na caixa ---------------------------------------------- */
	.aqua-duration-input__box:hover { background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-hover)); }
	.aqua-duration-input__box:focus-within {
		filter: brightness(1.06);
	}
	.aqua-duration-input__box[aria-invalid="true"] { border-color: rgb(var(--aqua-danger-rgb) / 60%); }
	.aqua-duration-input[aria-disabled="true"] .aqua-duration-input__box,
	.aqua-duration-input[aria-disabled="true"] .aqua-duration-input__box:hover {
		opacity: 0.5;
		cursor: not-allowed;
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-rest));
	}

	/* ---- os presets: chips abaixo, e o igual ao valor carrega a selecao do chip -------- */
	.aqua-duration-input__presets {
		display: flex;
		flex-wrap: wrap;
		gap: var(--aqua-space-1);
	}

	/* ---- tamanho: o degrau do input ---------------------------------------------------- */
	.aqua-duration-input--sm .aqua-duration-input__box { gap: var(--aqua-space-2); padding: 0 var(--aqua-space-2); font-size: var(--aqua-fs-sm); }
	.aqua-duration-input--sm .aqua-duration-input__field { padding: var(--aqua-space-1) 0; }
	.aqua-duration-input--sm .aqua-duration-input__unit { font-size: var(--aqua-fs-xs); }
}

/* Fora de camada, como os do 02-movimento: keyframes nao cascateiam. Uma vez,
   por brightness, para o olho achar o segmento que recebeu o carry. */
@keyframes aqua-duration-input-pisca {
	0%, 100% { filter: brightness(1); }
	50%      { filter: brightness(1.3); }
}

/* ==== 93-keybind.css ==== */
/* 93-keybind.css - aqua-keybind. O campo que grava um atalho: o do painel,
   o keybind de um recurso FiveM.

   Gota: NENHUMA, de proposito. E campo: a Gota aparece no que se escolhe ou
   se aciona, nunca no que se digita (§13), e aqui se digita uma combinacao.
   O que ele carrega do §13 e a Lei do Vidro: GRAVANDO, o campo clareia como
   focado (brightness 1.06, fundo em alpha-hover), o mesmo que o select faz
   aberto. Focar clareia; esperar uma tecla e um foco que dura.

   A ideia com nome: UM BOTAO COM A CARA DE CAMPO. O __trigger e a caixa de
   campo do select (34-select.css), repetida por texto: space-2 space-4,
   fs-md, lh-base, borda alpha-border-strong, radius-md, fundo alpha-rest.
   Dentro, um <kbd> por tecla (o kbd da base, 00-base.css, sem redesenho) e
   o __placeholder "Sem atalho" em text-muted. Clicar ou Enter/Space poem o
   campo em gravacao (data-aqua-gravando, escrito pelo JS) e o __value diz
   "Pressione a combinacao"; o keydown seguinte grava. Esc cancela;
   Backspace e Delete limpam.

   A satisfacao: cada kbd entra por .aqua-entra em cascata de
   --aqua-cascata, o primeiro modificador antes, a tecla por ultimo, na
   ordem em que se pressiona. O indice vem do JS em --aqua-keybind-i.

   Decisoes, para ninguem "corrigir":
   - a raiz e um <div> com o __trigger e o __clear como irmaos, e nao um
     <button> com o x dentro: botao dentro de botao e HTML invalido e o
     parser do Chromium fecha o de fora ao encontrar o de dentro. O __clear e
     um aqua-icon-btn--ghost --sm ao lado do campo, pela classe dele, so
     visivel com valor (data-aqua-escolhido na raiz, escrito pelo JS). Sem
     JS, o __clear aparece se a raiz ja vier com o atributo.
   - os estados do gatilho sao os do select: hover sobe 1px, press adensa
     sem fechar canto (nao tem Gota), foco clareia com o anel da base,
     gravando clareia como aberto. aria-invalid e disabled vao no gatilho.
   - o kbd dentro do __value e text, nao text-muted como o da base: aqui ele
     e o VALOR do campo, e valor se le em text (§3).
   - --sm e o degrau do input; a raiz e inline-flex e --block estica. */
@layer aqua.componente {
	.aqua-keybind {
		display: inline-flex;
		align-items: center;
		gap: var(--aqua-space-1);
		vertical-align: middle;
		min-width: 0;
	}
	.aqua-keybind--block { display: flex; width: 100%; }

	/* ---- o gatilho: a caixa de campo, clicavel ------------------------------------ */
	.aqua-keybind__trigger {
		display: flex;
		align-items: center;
		gap: var(--aqua-space-2);
		flex: 1 1 auto;
		min-width: 0;
		padding: var(--aqua-space-2) var(--aqua-space-4);
		border: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border-strong));
		border-radius: var(--aqua-radius-md);
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-rest));
		color: var(--aqua-text);
		font-size: var(--aqua-fs-md);
		line-height: var(--aqua-lh-base);
		text-align: left;
		cursor: pointer;
		transition:
			transform var(--aqua-t-toque) var(--aqua-ease-out),
			backdrop-filter var(--aqua-t-toque) var(--aqua-ease-out),
			background-color var(--aqua-t-rapido) var(--aqua-ease-out),
			border-color var(--aqua-t-rapido) var(--aqua-ease-out),
			filter var(--aqua-t-rapido) var(--aqua-ease-out);
	}
	.aqua-keybind__trigger:hover {
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-hover));
		transform: translateY(-1px);
	}
	.aqua-keybind__trigger:focus-visible,
	.aqua-keybind[data-aqua-gravando] .aqua-keybind__trigger { filter: brightness(1.06); }
	.aqua-keybind[data-aqua-gravando] .aqua-keybind__trigger { background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-hover)); }
	.aqua-keybind__trigger:active {
		transform: translateY(-1px) scale(0.97);
		background-color: rgb(var(--aqua-surface-rgb) / var(--aqua-press-tint));
		-webkit-backdrop-filter: var(--aqua-press-filtro);
		backdrop-filter: var(--aqua-press-filtro);
	}
	.aqua-keybind__trigger[aria-invalid="true"],
	.aqua-keybind__trigger[aria-invalid="true"]:focus-visible { border-color: rgb(var(--aqua-danger-rgb) / 60%); }
	.aqua-keybind__trigger:disabled,
	.aqua-keybind__trigger[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; filter: none; }

	/* ---- o valor: um kbd por tecla, em cascata; o placeholder quando nao ha ------------- */
	.aqua-keybind__value {
		display: inline-flex;
		align-items: center;
		gap: var(--aqua-space-1);
		min-width: 0;
		min-height: calc(var(--aqua-fs-md) * var(--aqua-lh-base));
	}
	.aqua-keybind__value > kbd {
		color: var(--aqua-text);
		animation-delay: calc(var(--aqua-cascata) * var(--aqua-keybind-i, 0));
	}
	.aqua-keybind__placeholder,
	.aqua-keybind[data-aqua-gravando] .aqua-keybind__value { color: var(--aqua-text-muted); }
	.aqua-keybind[data-aqua-escolhido] .aqua-keybind__placeholder,
	.aqua-keybind[data-aqua-gravando] .aqua-keybind__placeholder { display: none; }
	.aqua-keybind:not([data-aqua-escolhido]):not([data-aqua-gravando]) .aqua-keybind__value { display: none; }

	/* ---- o limpar: so com valor; a parte pela classe dela ----------------------------- */
	.aqua-keybind:not([data-aqua-escolhido]) .aqua-keybind__clear { display: none; }

	/* ---- tamanho: o degrau do input ------------------------------------------------ */
	.aqua-keybind--sm .aqua-keybind__trigger { padding: var(--aqua-space-1) var(--aqua-space-3); font-size: var(--aqua-fs-sm); }
	.aqua-keybind--sm .aqua-keybind__value { min-height: calc(var(--aqua-fs-sm) * var(--aqua-lh-base)); }
}

/* ==== 94-split-button.css ==== */
/* 94-split-button.css - aqua-split-button. A acao com o menu ao lado.

   Gota: A DA BARRA COLADA (23-joined-bar.css). Dois botoes num corpo so: o
   canto afiado no __main, embaixo a esquerda; os redondos no __caret. Press
   fecha o canto do que foi pressionado: no __main a ponta vai a
   gota-ponta-fechada, como no primeiro item da barra; o __caret nao tem
   canto afiado, entao ao toque ele so adensa e mantem os redondos - nao ha
   o que fechar onde a Gota nao esta.

   A ideia com nome: O MENU E DO CARET, E O CARET GIRA. O __main e um
   aqua-btn que age ("Expulsar"); o __caret e um aqua-icon-btn com down e
   data-aqua-dropdown="#menu", aria-label "Mais acoes": o dropdown existente
   (48-dropdown.css, secao dropdown do aqua-ui.js) abre a aqua-opcoes com
   role=menu, escreve aria-expanded no caret e devolve o foco a ele. Zero JS
   proprio. Enquanto o menu esta aberto o caret gira 180 graus em t-base, o
   mesmo giro do caret do select, e e a unica coisa que anima.

   Tom e tamanho ficam NA RAIZ: --primary e --danger pintam os dois botoes de
   uma vez (icon-btn primario nao existe, 11-icon-button.css, e um split com
   metade accent e metade neutra e dois botoes, nao um), e --sm da o degrau
   pequeno aos dois. Os filhos sao aqua-btn e aqua-icon-btn SEM modificador.

   Decisoes, para ninguem "corrigir":
   - o corpo e um so, como na barra colada: hover e press por cor e
     adensamento, sem subir nem encolher cada metade. O corpo INTEIRO sobe
     1px no hover e afunda a 0.97 no press por :has(), melhoria progressiva
     (§9): sem :has() sobra a cor e o canto, e continua um split-button.
   - a divisoria e uma linha so: o caret sobrepoe a borda do main por
     margin-left -1px (a margem de layout da barra colada), o main apaga a
     borda direita e o caret pinta a esquerda em alpha-border. Em --primary
     e --danger e on-accent a 25%, escrito rgb(surface-rgb / 25%): on-accent
     e surface sao o mesmo 950 e so o surface tem o triplo -rgb no
     tokens.css. Se um dia divergirem, e aqui que se troca.
   - o menu alinha ao fim do caret (data-aqua-alinhar="fim" no gatilho): o
     flutuante ancora no caret, nao na barra, e um menu que nasce alinhado
     ao inicio de um botao de 36px parece deslocado da acao.
   - disabled nos dois, ou so no caret (a acao vale, o menu nao): o
     dropdown recusa abrir num gatilho disabled, e a opacidade de 0.5 e a
     do proprio botao. Nos solidos o disabled apaga o filtro de hover.
   - o caret aberto (aria-expanded) clareia como o gatilho do select:
     brightness 1.06 e alpha-hover no neutro; nos solidos so o brightness.
   - o menu e a aqua-opcoes aqua-dropdown do consumidor, fora da raiz: o
     flutuante o leva ao body, e por isso nada aqui o redesenha. */
@layer aqua.componente {
	.aqua-split-button {
		display: inline-flex;
		align-items: stretch;
		vertical-align: middle;
		transition: transform var(--aqua-t-toque) var(--aqua-ease-out);
	}

	/* ---- a barra e UMA Gota: o canto afiado no main, os redondos no caret ------------- */
	.aqua-split-button__main {
		border-radius: var(--aqua-gota-raio) 0 0 var(--aqua-gota-ponta);
		border-right-color: transparent;
	}
	.aqua-split-button__caret {
		margin-left: -1px;
		border-radius: 0 var(--aqua-gota-raio) var(--aqua-gota-raio) 0;
		border-left-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border));
	}

	/* ---- o corpo e um so: nada sobe nem encolhe sozinho; o canto so fecha onde existe --- */
	.aqua-split-button__main:hover,
	.aqua-split-button__main:active,
	.aqua-split-button__caret:hover,
	.aqua-split-button__caret:active { transform: none; }
	.aqua-split-button__main:active { border-radius: var(--aqua-gota-raio) 0 0 var(--aqua-gota-ponta-fechada); }
	.aqua-split-button__caret:active { border-radius: 0 var(--aqua-gota-raio) var(--aqua-gota-raio) 0; }
	/* Melhoria progressiva (§9): o corpo inteiro reage, como um botao. */
	.aqua-split-button:has(> :hover:not(:disabled, [aria-disabled="true"])) { transform: translateY(-1px); }
	.aqua-split-button:has(> :active:not(:disabled, [aria-disabled="true"])) { transform: translateY(-1px) scale(0.97); }

	/* ---- o anel de foco fica por cima do vizinho ------------------------------------- */
	.aqua-split-button > :focus-visible { position: relative; z-index: 1; }

	/* ---- o caret gira enquanto o menu esta aberto ------------------------------------ */
	.aqua-split-button__caret > [data-aqua-icon],
	.aqua-split-button__caret > svg { transition: transform var(--aqua-t-base) var(--aqua-ease-out); }
	.aqua-split-button__caret[aria-expanded="true"] > [data-aqua-icon],
	.aqua-split-button__caret[aria-expanded="true"] > svg { transform: rotate(180deg); }
	.aqua-split-button__caret[aria-expanded="true"] {
		color: var(--aqua-text);
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-hover));
		filter: brightness(1.06);
	}

	/* ---- tom, na raiz: os dois botoes de uma vez -------------------------------------- */
	.aqua-split-button--primary > .aqua-split-button__main,
	.aqua-split-button--primary > .aqua-split-button__caret { background-color: var(--aqua-accent); color: var(--aqua-on-accent); }
	.aqua-split-button--danger > .aqua-split-button__main,
	.aqua-split-button--danger > .aqua-split-button__caret { background-color: var(--aqua-danger); color: var(--aqua-surface); }
	.aqua-split-button:is(.aqua-split-button--primary, .aqua-split-button--danger) > .aqua-split-button__main { border-color: transparent; }
	.aqua-split-button:is(.aqua-split-button--primary, .aqua-split-button--danger) > .aqua-split-button__caret {
		border-color: transparent;
		border-left-color: rgb(var(--aqua-surface-rgb) / 25%);
	}
	/* Fundo solido nao troca de cor: clareia no hover, escurece um degrau no
	   press e nao adensa (nao ha vidro para comprimir), como o aqua-btn--primary. */
	.aqua-split-button:is(.aqua-split-button--primary, .aqua-split-button--danger) > :hover { filter: brightness(1.08); }
	.aqua-split-button:is(.aqua-split-button--primary, .aqua-split-button--danger) > [aria-expanded="true"] { filter: brightness(1.06); }
	.aqua-split-button:is(.aqua-split-button--primary, .aqua-split-button--danger) > :active {
		filter: brightness(0.96);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
	.aqua-split-button:is(.aqua-split-button--primary, .aqua-split-button--danger) > :disabled,
	.aqua-split-button:is(.aqua-split-button--primary, .aqua-split-button--danger) > [aria-disabled="true"] { filter: none; }

	/* ---- tamanho, na raiz: o degrau --sm dos dois ------------------------------------ */
	.aqua-split-button--sm > .aqua-split-button__main { padding: var(--aqua-space-1) var(--aqua-space-3); font-size: var(--aqua-fs-sm); }
	.aqua-split-button--sm > .aqua-split-button__caret { padding: var(--aqua-space-1); }
	.aqua-split-button--sm > .aqua-split-button__caret > [data-aqua-icon],
	.aqua-split-button--sm > .aqua-split-button__caret > svg { width: var(--aqua-fs-lg); height: var(--aqua-fs-lg); }
}

/* ==== 95-copy-btn.css ==== */
/* 95-copy-btn.css - aqua-copy-btn. Copiar, e o check que entra por um pop.

   Gota: NENHUMA. Age, nao escolhe: e um aqua-icon-btn (ou um aqua-btn--sm
   com rotulo) como esta, e fecha o canto ao toque como todo botao. Esta
   folha nao redefine cor, raio nem estado do botao que a carrega.

   A ideia com nome: TRES ICONES NA MESMA CELULA, E SO UM ESTA VIVO. O
   __icons e uma grade de uma celula com o copy, o check (--done) e o error
   (--failed) sobrepostos; o JS (js/095-copy-btn.js) monta a grade e os dois
   ultimos quando o consumidor escreveu so o <i data-aqua-icon="copy">. Em
   repouso o copy esta a 1 e os outros a 0 em scale(0.6). Copiou: a raiz
   recebe data-aqua-copiado por 5 x t-lento (1600ms), o copy SAI encolhendo
   para 0.6 e o check ENTRA de 0.6 a 1, os dois em t-base ease-out: o pop.
   Falhou: data-aqua-falhou, e e o error que entra. So transform e opacity
   animam. O rotulo (__label) vira "Copiado" ou "Nao copiou" por texto, e um
   aqua-sr-only aria-live (__live) diz o mesmo a quem nao ve.

   Decisoes, para ninguem "corrigir":
   - o check fica em currentColor, sem success: cor solida e para acao
     primaria e ponto de status (§5), e o icone nao e ponto. A forma ja diz
     (copy virou check), e o rotulo e o aria-live dizem o resto.
   - a grade tem o tamanho que o botao daria ao icone solto: fs-xl no
     icon-btn (fs-lg em --sm, fs-2xl em --lg) e 1.15em no aqua-btn. E o
     unico lugar em que esta folha repete um numero do 10- e do 11-: o
     seletor "> [data-aqua-icon]" deles nao alcanca o neto, e a grade tem
     de ocupar exatamente a mesma caixa para o botao nao mudar de tamanho.
   - nada de fundo, sombra ou cor na grade: ela e invisivel; so os icones
     existem, e o estado e atributo na raiz (§1), nunca classe. */
@layer aqua.componente {
	/* ---- a grade: uma celula, tres icones ------------------------------------------ */
	.aqua-copy-btn__icons {
		display: inline-grid;
		flex: none;
		width: var(--aqua-fs-xl);
		height: var(--aqua-fs-xl);
	}
	.aqua-btn > .aqua-copy-btn__icons { width: 1.15em; height: 1.15em; }
	.aqua-icon-btn--sm > .aqua-copy-btn__icons { width: var(--aqua-fs-lg); height: var(--aqua-fs-lg); }
	.aqua-icon-btn--lg > .aqua-copy-btn__icons { width: var(--aqua-fs-2xl); height: var(--aqua-fs-2xl); }
	.aqua-copy-btn__icon {
		grid-area: 1 / 1;
		width: 100%;
		height: 100%;
		transition:
			transform var(--aqua-t-base) var(--aqua-ease-out),
			opacity var(--aqua-t-base) var(--aqua-ease-out);
	}

	/* ---- repouso: so o copy; check e error esperam encolhidos ------------------------- */
	.aqua-copy-btn__icon--done,
	.aqua-copy-btn__icon--failed { opacity: 0; transform: scale(0.6); }

	/* ---- copiou ou falhou: o copy sai encolhendo, o outro entra pelo pop -------------- */
	.aqua-copy-btn[data-aqua-copiado] .aqua-copy-btn__icon,
	.aqua-copy-btn[data-aqua-falhou] .aqua-copy-btn__icon { opacity: 0; transform: scale(0.6); }
	.aqua-copy-btn[data-aqua-copiado] .aqua-copy-btn__icon--done,
	.aqua-copy-btn[data-aqua-falhou] .aqua-copy-btn__icon--failed { opacity: 1; transform: none; }
}

/* ==== 96-page-header.css ==== */
/* 96-page-header.css - aqua-page-header. O cabecalho de toda pagina do painel.

   Gota: NENHUMA. E layout: a assinatura fica nas acoes (o aqua-btn) e na
   aba ativa (o aqua-tabs) que ele empilha. Quieto de proposito, como o
   setting-section e o breadcrumb.

   A ideia com nome: TRANSPARENTE EM REPOUSO, VIDRO SO QUANDO COBRE. Quatro
   faixas: __breadcrumb (o aqua-breadcrumb do consumidor), __row com __text
   (__title e __description) a esquerda e __actions a direita, que quebram
   para baixo em largura estreita porque o texto pede 240px antes de ceder,
   e __tabs embaixo (o aqua-tabs, com a tira dentro e os paineis fora, que
   o kit acha por aria-controls). Nada tem fundo. Com --sticky o cabecalho
   cola no topo (position: sticky) e, quando de fato cola, recebe
   data-aqua-colado de um IntersectionObserver numa sentinela de 1px logo
   antes dele (js/096-page-header.js, o unico JS): ai vira vidro-3 com a
   borda de baixo em alpha-border, em t-base. Volta ao transparente quando o
   conteudo volta para baixo dele. So o que cobre conteudo precisa de vidro.

   Decisoes, para ninguem "corrigir":
   - __title ja E o tipo do aqua-title (fs-2xl, 600, lh-tight, -0.01em) sem
     a classe: .aqua-title mora em aqua.utilitario, que vence esta camada, e
     com a classe o --compact (fs-xl) nunca ganharia. __description e o
     aqua-muted pelo mesmo motivo, escrito aqui.
   - padding de space-4 por space-6, o padding de card (§2): e uma faixa, e
     a faixa de vidro precisa de respiro dos lados para nao encostar o
     titulo na borda. O conteudo abaixo usa o mesmo gutter. --compact
     reduz para space-3 por space-4, o degrau do setting-section.
   - a borda de baixo existe sempre, transparente: aparecer nao muda o
     layout. A sombra e a do vidro (curta + longa, 01-vidro.css), porque uma
     faixa que cobre conteudo e vidro-3 e vidro-3 tem sombra (§5).
   - z-index 1 no --sticky: o card que sobe 1px no hover cria contexto de
     empilhamento e passaria por cima do cabecalho sem isto. Nao e da
     escala de flutuantes; e so "acima do que rola por baixo".
   - a sentinela e IRMA do cabecalho, antes dele, e nao filha: colado e em
     repouso no topo sao a mesma geometria para o proprio cabecalho, e so o
     que rola para fora os distingue. Mede 1px e devolve o pixel por
     margem negativa: soma zero no layout. E instrumento, nao componente.
   - as abas dentro nao perdem a linha delas: a linha das abas separa aba
     de painel, a do cabecalho separa o vidro do conteudo, e sao coisas
     diferentes. Redesenhar a parte e o que o §11 proibe. */
@layer aqua.componente {
	.aqua-page-header {
		display: flex;
		flex-direction: column;
		gap: var(--aqua-space-3);
		min-width: 0;
		padding: var(--aqua-space-4) var(--aqua-space-6);
		border-bottom: 1px solid transparent;
		color: var(--aqua-text);
	}
	.aqua-page-header__breadcrumb { min-width: 0; }

	/* ---- a linha: texto a esquerda, acoes a direita, que quebram para baixo ------------ */
	.aqua-page-header__row {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: var(--aqua-space-3) var(--aqua-space-4);
		min-width: 0;
	}
	.aqua-page-header__text {
		display: flex;
		flex: 1 1 240px;
		flex-direction: column;
		gap: var(--aqua-space-1);
		min-width: 0;
	}
	.aqua-page-header__title {
		font-size: var(--aqua-fs-2xl);
		font-weight: 600;
		line-height: var(--aqua-lh-tight);
		letter-spacing: -0.01em;
		color: var(--aqua-text);
		overflow-wrap: anywhere;
	}
	.aqua-page-header__description {
		font-size: var(--aqua-fs-md);
		line-height: var(--aqua-lh-base);
		color: var(--aqua-text-muted);
	}
	.aqua-page-header__actions {
		display: flex;
		flex: none;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--aqua-space-2);
	}
	.aqua-page-header__tabs { min-width: 0; }

	/* ---- compacto: o titulo desce um degrau, o padding tambem --------------------------- */
	.aqua-page-header--compact { gap: var(--aqua-space-2); padding: var(--aqua-space-3) var(--aqua-space-4); }
	.aqua-page-header--compact .aqua-page-header__title { font-size: var(--aqua-fs-xl); }

	/* ---- colante: transparente ate colar; colado, vidro-3 com a borda de baixo ---------- */
	.aqua-page-header--sticky {
		position: sticky;
		top: 0;
		z-index: 1;
		transition:
			background-color var(--aqua-t-base) var(--aqua-ease-out),
			border-color var(--aqua-t-base) var(--aqua-ease-out),
			box-shadow var(--aqua-t-base) var(--aqua-ease-out),
			backdrop-filter var(--aqua-t-base) var(--aqua-ease-out);
	}
	.aqua-page-header--sticky[data-aqua-colado] {
		background: var(--aqua-vidro-3-bg);
		-webkit-backdrop-filter: var(--aqua-vidro-3-filtro);
		backdrop-filter: var(--aqua-vidro-3-filtro);
		border-bottom-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border));
		box-shadow:
			inset 0 1px 0 rgb(var(--aqua-white-rgb) / 7%),
			0 1px 2px rgb(var(--aqua-black-rgb) / 20%),
			0 12px 32px -12px rgb(var(--aqua-black-rgb) / 40%);
	}
	.aqua-page-header__sentinel { height: 1px; margin-bottom: -1px; pointer-events: none; }
}

/* ==== 97-timeline.css ==== */
/* 97-timeline.css - aqua-timeline. O que aconteceu, em ordem, com o agora marcado.

   Gota: SO NO ATUAL, PARADA. O item com aria-current="step" tem o marcador em
   Gota de accent solido (gota-bl) com 12px (space-3); os outros tem um ponto
   de 8px (space-2) no tom, que e o ponto de status do badge, nunca a Gota.
   E a mesma regra do stepper (59-stepper.css): a assinatura vai a UM lugar,
   o agora, e anda quando a aplicacao move o atributo.

   A animacao: O ATUAL CRESCE DE PONTO A GOTA. Quando aria-current chega a um
   item, o marcador dele passa de 8 a 12px e de circulo a Gota em t-base
   (min-width, min-height e border-radius transicionam; o elemento e pequeno e
   a duracao e t-base, o que o spec permite), e o que perdeu o atributo volta
   a ponto. O item que o consumidor prepende entra por .aqua-entra, e a linha
   e dele: nada a fazer.

   A ideia com nome: A LINHA E DO ITEM, O DIA A INTERROMPE. Cada item desenha
   dois segmentos de 1px em alpha-border (::before ate o marcador, ::after do
   marcador em diante), que param a space-1 do marcador, como no stepper; o
   __day nao desenha nada, e por isso a linha "recomeca" abaixo de cada dia.
   O __day e position: sticky; top: 0 com vidro-1 por tras: numa scroll-area
   ele cola no topo e o que rola por baixo le atraves do vidro.

   Decisoes, para ninguem "corrigir":
   - o marcador e centrado no eixo por transform: translate(-50%, -50%) a
     partir do centro da primeira linha de texto: qualquer conteudo (ponto,
     avatar --sm de 24px, icone) fica centrado sem medir nada.
   - o marcador VAZIO e o ponto (:empty, sem espaco em branco dentro); com
     midia dentro nao tem fundo proprio, e a midia e o marcador. O item abre
     a linha para os 24px por :has() - melhoria progressiva (CONVENCOES §9):
     sem a regra, a linha passa a 1px atras do circulo, e mais nada muda.
   - --aqua-timeline-marker e o tamanho que a linha respeita, escrito por
     estado (8, 12, 24); --aqua-timeline-lh e a altura da primeira linha,
     de onde sai o centro. Sao geometria interna, nao tokens novos.
   - a hora e a primeira coluna de uma grade de duas: sem __time, a coluna
     some e o titulo comeca na margem (o gap e padding do __time, nao
     column-gap). Titulo em 500 (rotulo), corpo em text-muted, meta em fs-sm
     separando campos por virgula ou por elemento (proibicao 2).
   - o item nao e clicavel: a auditoria se le, e a acao mora no __meta (um
     aqua-btn--sm) quando existe. Sem hover, sem press.
   - --compact: fs-sm, metade da folga entre itens; o dono e o historico
     dentro de uma scroll-area. */
@layer aqua.componente {
	.aqua-timeline {
		--aqua-timeline-col: var(--aqua-space-6);
		--aqua-timeline-lh: calc(var(--aqua-fs-md) * var(--aqua-lh-base));
		display: flex;
		flex-direction: column;
		min-width: 0;
		color: var(--aqua-text);
	}

	/* ---- o dia: cola no topo, e interrompe a linha ----------------------------------- */
	.aqua-timeline__day {
		position: sticky;
		top: 0;
		z-index: 1;
		padding: var(--aqua-space-2) 0 var(--aqua-space-2) calc(var(--aqua-timeline-col) + var(--aqua-space-3));
		background: var(--aqua-vidro-1-bg);
		-webkit-backdrop-filter: var(--aqua-vidro-1-filtro);
		backdrop-filter: var(--aqua-vidro-1-filtro);
		font-size: var(--aqua-fs-sm);
		font-weight: 500;
		line-height: var(--aqua-lh-base);
		color: var(--aqua-text-muted);
	}
	.aqua-timeline__day:first-child { padding-top: 0; }

	/* ---- o item: hora e titulo na primeira linha, o resto embaixo ---------------------- */
	.aqua-timeline__item {
		--aqua-timeline-marker: var(--aqua-space-2);
		position: relative;
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: baseline;
		row-gap: var(--aqua-space-1);
		min-width: 0;
		padding: 0 0 var(--aqua-space-4) calc(var(--aqua-timeline-col) + var(--aqua-space-3));
		font-size: var(--aqua-fs-md);
		line-height: var(--aqua-lh-base);
	}
	.aqua-timeline__item:last-child { padding-bottom: 0; }
	.aqua-timeline__item[aria-current="step"] { --aqua-timeline-marker: var(--aqua-space-3); }
	.aqua-timeline__item:has(> .aqua-timeline__marker > .aqua-avatar),
	.aqua-timeline__item:has(> .aqua-timeline__marker > [data-aqua-icon]) { --aqua-timeline-marker: var(--aqua-space-6); }

	/* ---- a linha: dois segmentos, que param a space-1 do marcador ---------------------- */
	.aqua-timeline__item::before,
	.aqua-timeline__item::after {
		content: "";
		position: absolute;
		left: calc(var(--aqua-timeline-col) / 2);
		width: 1px;
		transform: translateX(-50%);
		background: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border));
	}
	.aqua-timeline__item::before {
		top: 0;
		height: calc(var(--aqua-timeline-lh) / 2 - var(--aqua-timeline-marker) / 2 - var(--aqua-space-1));
	}
	.aqua-timeline__item::after {
		top: calc(var(--aqua-timeline-lh) / 2 + var(--aqua-timeline-marker) / 2 + var(--aqua-space-1));
		bottom: 0;
	}
	.aqua-timeline__item:first-child::before,
	.aqua-timeline__item:last-child::after,
	.aqua-timeline__day + .aqua-timeline__item::before { display: none; }

	/* ---- o marcador: ponto no tom, Gota no atual, midia quando tem ----------------------- */
	.aqua-timeline__marker {
		position: absolute;
		top: calc(var(--aqua-timeline-lh) / 2);
		left: calc(var(--aqua-timeline-col) / 2);
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: var(--aqua-timeline-marker);
		min-height: var(--aqua-timeline-marker);
		border-radius: var(--aqua-radius-full);
		transform: translate(-50%, -50%);
		transition:
			min-width var(--aqua-t-base) var(--aqua-ease-out),
			min-height var(--aqua-t-base) var(--aqua-ease-out),
			border-radius var(--aqua-t-base) var(--aqua-ease-out),
			background-color var(--aqua-t-base) var(--aqua-ease-out);
	}
	.aqua-timeline__marker:empty { background-color: var(--aqua-text-muted); }
	.aqua-timeline__item--success .aqua-timeline__marker:empty { background-color: var(--aqua-success); }
	.aqua-timeline__item--warning .aqua-timeline__marker:empty { background-color: var(--aqua-warning); }
	.aqua-timeline__item--danger .aqua-timeline__marker:empty { background-color: var(--aqua-danger); }
	.aqua-timeline__item--info .aqua-timeline__marker:empty { background-color: var(--aqua-info); }
	.aqua-timeline__item[aria-current="step"] .aqua-timeline__marker:empty {
		border-radius: var(--aqua-gota-bl);
		background-color: var(--aqua-accent);
	}

	/* o icone dentro do marcador: um circulo de 24px, como o avatar --sm; o tom colore o glifo */
	.aqua-timeline__marker > [data-aqua-icon] {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: var(--aqua-space-6);
		height: var(--aqua-space-6);
		border: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border));
		border-radius: var(--aqua-radius-full);
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-hover));
		color: var(--aqua-text-muted);
	}
	.aqua-timeline__marker > [data-aqua-icon] > svg { width: var(--aqua-fs-md); height: var(--aqua-fs-md); }
	.aqua-timeline__item--success .aqua-timeline__marker > [data-aqua-icon] { color: var(--aqua-success); }
	.aqua-timeline__item--warning .aqua-timeline__marker > [data-aqua-icon] { color: var(--aqua-warning); }
	.aqua-timeline__item--danger .aqua-timeline__marker > [data-aqua-icon] { color: var(--aqua-danger); }
	.aqua-timeline__item--info .aqua-timeline__marker > [data-aqua-icon] { color: var(--aqua-info); }

	/* ---- o texto ----------------------------------------------------------------------- */
	.aqua-timeline__time {
		grid-column: 1;
		padding-right: var(--aqua-space-3);
		font-family: var(--aqua-font-mono);
		font-variant-numeric: tabular-nums;
		font-size: var(--aqua-fs-sm);
		white-space: nowrap;
		color: var(--aqua-text-muted);
	}
	.aqua-timeline__title { grid-column: 2; min-width: 0; font-weight: 500; color: var(--aqua-text); }
	.aqua-timeline__body { grid-column: 2; min-width: 0; color: var(--aqua-text-muted); }
	.aqua-timeline__meta {
		grid-column: 2;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--aqua-space-1) var(--aqua-space-2);
		min-width: 0;
		font-size: var(--aqua-fs-sm);
		color: var(--aqua-text-muted);
	}

	/* ---- --compact: fs-sm, metade da folga ---------------------------------------------- */
	.aqua-timeline--compact { --aqua-timeline-lh: calc(var(--aqua-fs-sm) * var(--aqua-lh-base)); }
	.aqua-timeline--compact .aqua-timeline__item { row-gap: 0; padding-bottom: var(--aqua-space-2); font-size: var(--aqua-fs-sm); }
	.aqua-timeline--compact .aqua-timeline__item:last-child { padding-bottom: 0; }
	.aqua-timeline--compact .aqua-timeline__day { padding-top: var(--aqua-space-1); padding-bottom: var(--aqua-space-1); }
	.aqua-timeline--compact .aqua-timeline__day:first-child { padding-top: 0; }
}

/* ==== 98-descriptions.css ==== */
/* 98-descriptions.css - aqua-descriptions. A ficha: rotulo sobre valor, em grade.

   Gota: NENHUMA. E leitura, como o stat (17-stat.css) e o preco: a ficha do
   jogador, do servidor e da licenca se le, nao se escolhe nem se aciona. O
   copy-btn que mora dentro de um valor carrega o que tem (95); a ficha em
   volta fica quieta.

   A animacao: A VARIACAO ENTRA, DA ESQUERDA. Quando um valor muda (o ping, o
   saldo, o plano), o consumidor troca o texto e poe .aqua-entra no __detail,
   e a lei 4 faz o resto com --aqua-origem a esquerda, de onde o valor se le.
   E o mesmo desenho do stat: o valor novo entra, a ficha fica. Nada aqui e
   loop, e nada pisca.

   A ideia com nome: UM DL EM GRADE, E O TERMO E UM ROTULO. Cada __item e um
   dt (o termo, com a cara do aqua-label: fs-sm, 500, text-muted) sobre um dd
   (o valor, fs-md, text). --columns-2 e --columns-3 dividem a grade;
   --inline poe termo e valor na mesma linha, com o termo em largura fixa de
   space-12 vezes 3 (144px), que cabe "Motivo do banimento" sem quebrar.

   Decisoes, para ninguem "corrigir":
   - sem vidro, sem borda, sem linhas divisorias: a ficha MORA num card, num
     popover, num hover-card, e o chao e dessa coisa. A grade e o gap sao a
     divisao; uma linha entre cada par e a tabela de "Detalhes" de todo
     painel de hospedagem, e o §13 pede que se tire o que nao falta.
   - __detail e flex: o texto ocupa o que sobra e o aqua-copy-btn (ou um
     badge) alinha ao centro da linha; o copy-btn vai para a direita por
     margin-inline-start: auto, que e geometria interna do componente.
   - __detail--empty escreve "sem valor" em text-muted por ::before, sem JS:
     o dd fica vazio no HTML, e o leitor de tela le o que o CSS mostra pelo
     content. E "sem valor", nao "N/A" nem um traco: palavra, como o §13 manda
     para estado.
   - __detail--mono e Geist Mono tabular: passaporte, Steam ID, chave de
     licenca, versao. Chave e numero nunca em Instrument Sans.
   - o valor quebra por overflow-wrap: anywhere: uma chave de 40 caracteres
     numa coluna de 160px nao estoura a grade. */
@layer aqua.componente {
	.aqua-descriptions {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--aqua-space-4) var(--aqua-space-6);
		min-width: 0;
		color: var(--aqua-text);
	}
	.aqua-descriptions--columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.aqua-descriptions--columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	/* ---- o par: termo sobre valor ------------------------------------------------------ */
	.aqua-descriptions__item {
		display: flex;
		flex-direction: column;
		gap: var(--aqua-space-1);
		min-width: 0;
	}
	.aqua-descriptions__term {
		font-size: var(--aqua-fs-sm);
		font-weight: 500;
		line-height: var(--aqua-lh-base);
		color: var(--aqua-text-muted);
	}
	.aqua-descriptions__detail {
		display: flex;
		align-items: center;
		gap: var(--aqua-space-2);
		min-width: 0;
		font-size: var(--aqua-fs-md);
		line-height: var(--aqua-lh-base);
		overflow-wrap: anywhere;
		color: var(--aqua-text);
	}
	.aqua-descriptions__detail--mono {
		font-family: var(--aqua-font-mono);
		font-variant-numeric: tabular-nums;
	}
	.aqua-descriptions__detail--empty::before {
		content: "sem valor";
		color: var(--aqua-text-muted);
	}
	.aqua-descriptions__detail > .aqua-copy-btn { flex: none; margin-inline-start: auto; }

	/* a variacao entra da esquerda, de onde o valor se le */
	.aqua-descriptions__detail.aqua-entra { --aqua-origem: 0% 50%; }

	/* ---- --inline: termo e valor na mesma linha, o termo em largura fixa ----------------- */
	.aqua-descriptions--inline { gap: var(--aqua-space-2) var(--aqua-space-6); }
	.aqua-descriptions--inline .aqua-descriptions__item {
		display: grid;
		grid-template-columns: calc(var(--aqua-space-12) * 3) minmax(0, 1fr);
		align-items: baseline;
		column-gap: var(--aqua-space-3);
	}
}

/* ==== 99-code.css ==== */
/* 99-code.css - aqua-code. O bloco de codigo: o comando connect, a config, o trecho das docs.

   Gota: NENHUMA. E texto que se le, com a caixa do campo (24-input.css, por
   texto: borda alpha-border, radius-md, fundo alpha-rest) e nenhum estado:
   nao e clicavel nem focavel. O copy-btn do cabecalho (95) carrega o que
   tem; o bloco fica quieto.

   A animacao: O BLOCO CRESCE POR MAX-HEIGHT, E A SOMBRA DE "TEM MAIS" APAGA.
   Com data-aqua-max-linhas, o __pre recolhido tem a altura de N linhas
   (--aqua-code-altura, medida pelo JS) e a sombra interna da scroll-area
   (65-scroll-area.css) na borda de baixo, que e a mesma resposta do kit a
   "tem mais" - nao um degrade sobre o texto. Mostrar as 42 linhas troca a
   altura pela do total e o max-height transiciona em t-base (max-height nao
   e transform, mas o bloco cresce uma vez, por gesto, e para); a sombra vai
   em t-rapido. No fim, o max-height cai (expandido) e a linha longa volta a
   rolar por dentro. Recolher faz o caminho inverso.

   A ideia com nome: NUMERO POR CONTADOR, TEXTO POR TEXTO. --numbered nao
   pinta uma coluna de numeros ao lado: o JS (js/099-code.js) divide o texto
   em __line por textContent e o numero e counter() no ::before, com alt
   vazio para o leitor de tela nao ler "1 2 3". Nada vira markup: um <b>
   escrito no codigo continua sendo os cinco caracteres. Sem realce de
   sintaxe, por decisao do spec: e innerHTML disfarcado.

   Decisoes, para ninguem "corrigir":
   - o __header e um <figcaption>: o bloco e um <figure> e a legenda dele e
     a linguagem, em aqua-label por texto, mais o copy-btn a direita. Sem
     caixa alta, sem "Copy": o botao e icone com aria-label.
   - fs-sm no __pre, e o __code herda (a base poe 0.92em em todo code; aqui e
     inherit para nao compor 0.92 sobre 13px). tab-size 4, a do projeto.
   - a coluna de numeros tem --aqua-code-digitos casas (escrito pelo JS a
     partir do total), alinhada a direita, em text-muted, user-select none:
     selecionar o bloco com o mouse pega o codigo, nao os numeros.
   - --wrap quebra a linha longa (a connection string das docs) em vez de
     rolar; o padrao rola por dentro com a barra da base. Com --wrap e
     max-linhas, "linha" e a logica, nao a visual: a altura recolhida pode
     cortar uma quebra; expandido, o max-height cai e nada corta.
   - --inline e o <code> dentro de frase: mesma caixa em radius-xs, sem
     cabecalho, sem numero, sem JS. O montador o ignora.
   - o estado do recolher e data-aqua-code na raiz, com tres valores
     (recolhido, abrindo, expandido), escrito pelo JS; aria-expanded mora no
     __more, que e quem o leitor de tela aciona. */
@layer aqua.componente {
	.aqua-code {
		display: flex;
		flex-direction: column;
		min-width: 0;
		border: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border));
		border-radius: var(--aqua-radius-md);
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-rest));
		color: var(--aqua-text);
	}

	/* ---- o cabecalho: a linguagem e o copiar --------------------------------------------- */
	.aqua-code__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--aqua-space-2);
		min-height: calc(var(--aqua-space-8) + var(--aqua-space-1));
		padding: var(--aqua-space-1) var(--aqua-space-1) var(--aqua-space-1) var(--aqua-space-3);
		border-bottom: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border));
	}
	.aqua-code__lang {
		font-size: var(--aqua-fs-sm);
		font-weight: 500;
		color: var(--aqua-text-muted);
	}

	/* ---- o texto: rola por dentro, com a barra da base ------------------------------------ */
	.aqua-code__pre {
		margin: 0;
		padding: var(--aqua-space-3);
		overflow: auto;
		font-family: var(--aqua-font-mono);
		font-variant-numeric: tabular-nums;
		font-size: var(--aqua-fs-sm);
		line-height: var(--aqua-lh-base);
		-moz-tab-size: 4;
		tab-size: 4;
		transition:
			max-height var(--aqua-t-base) var(--aqua-ease-out),
			box-shadow var(--aqua-t-rapido) var(--aqua-ease-out);
	}
	.aqua-code__code {
		display: block;
		font-family: inherit;
		font-size: inherit;
		counter-reset: aqua-code-line;
	}
	.aqua-code--wrap .aqua-code__pre { white-space: pre-wrap; overflow-wrap: anywhere; }

	/* ---- --numbered: o numero e contador, o texto continua texto --------------------------- */
	.aqua-code--numbered .aqua-code__line { counter-increment: aqua-code-line; }
	.aqua-code--numbered .aqua-code__line::before {
		content: counter(aqua-code-line) / "";
		display: inline-block;
		min-width: calc(var(--aqua-code-digitos, 2) * 1ch);
		margin-right: var(--aqua-space-3);
		text-align: right;
		color: var(--aqua-text-muted);
		user-select: none;
	}

	/* ---- max-linhas: recolhido tem altura e a sombra de "tem mais"; abrindo so a altura ---- */
	.aqua-code[data-aqua-code="recolhido"] .aqua-code__pre,
	.aqua-code[data-aqua-code="abrindo"] .aqua-code__pre {
		max-height: var(--aqua-code-altura);
		overflow: hidden;
	}
	.aqua-code[data-aqua-code="recolhido"] .aqua-code__pre {
		box-shadow: inset 0 calc(-1 * var(--aqua-space-3)) var(--aqua-space-3) calc(-1 * var(--aqua-space-3)) rgb(var(--aqua-black-rgb) / 35%);
	}
	.aqua-code__more { align-self: flex-start; margin: var(--aqua-space-1); }

	/* ---- --inline: o code dentro da frase --------------------------------------------------- */
	.aqua-code--inline {
		display: inline;
		padding: 0 var(--aqua-space-1);
		border-radius: var(--aqua-radius-xs);
		font-family: var(--aqua-font-mono);
		font-variant-numeric: tabular-nums;
		font-size: 0.92em;
	}
}

/* ==== 100-meter.css ==== */
/* 100-meter.css - aqua-meter. Quanto de um limite ja esta em uso.

   Gota: NENHUMA. O meter e quieto de proposito, e nao e o progress
   (62-progress.css): o progress ESPERA (a cabeca percorre enquanto
   transfere), o meter LE (slots de jogador, CPU, memoria, disco, orcamento
   de frame). Nada aqui percorre, porque nao ha o que esperar; a cor e um
   ponto de status, como no badge (15-badge.css).

   A ideia com nome: A COR E O STATUS, E ELA TRANSICIONA AO CRUZAR O LIMITE.
   E um <div role="meter"> com aria-valuemin, aria-valuemax e aria-valuenow,
   o padrao ARIA que ja diz "isto e uma medida com faixas". O JS escreve
   --aqua-meter-pct (o CSS deriva a largura do __fill e o arco do anel) e,
   com data-aqua-limites="60,85" (percentuais), data-aqua-tom na raiz:
   success abaixo do primeiro, warning entre os dois, danger acima. O CSS
   pinta o __fill e o __value com esse tom; sem limites o fill e accent e o
   valor e text. A satisfacao e o cruzamento: o fill muda de cor em t-base,
   nao pisca. O trilho e a linha fina do slider (space-2, radius-full,
   alpha-rest), sem borda: o fill e o que informa, e a borda do progress
   existe para a cabeca ter chao.

   Tres formas:
   - a linha (padrao): __header com __label e __value, __track com __fill.
   - --segmented, com data-aqua-segmentos="12": o trilho vira blocos com uma
     folga de space-1/2 entre eles, e o fill e quantizado ao bloco pelo JS -
     os cheios acendem. A folga e uma mascara de gradiente repetido sobre o
     trilho, que e funcao (ela E a divisao), nao a proibicao 6; zero
     elemento a mais no DOM.
   - --ring: o JS monta um <svg> com dois circulos de pathLength=100, e o de
     valor e desenhado por stroke-dashoffset, o mesmo mecanismo do anel de
     foco (02-movimento.css). O valor vai no centro, o rotulo embaixo. O
     header vira display: contents para as duas partes caberem na grade.

   Decisoes, para ninguem "corrigir":
   - o valor em tom (warning como texto) esta fora da prova de contraste
     do §3, e e pedido pelo spec: o __value e curto, mono e 500, e a
     mesma informacao esta no fill e no aria-valuetext. Sem limites, o
     valor fica em text.
   - o fill tem transition em width E em background-color, os dois em
     t-base: o valor e VISTO andando e a faixa e vista trocando. A cor nao
     e animada por keyframe: cruzar um limite acontece uma vez.
   - o anel gira -90deg parado, para o arco comecar no topo. Nao e o anel
     girando da prova 7: nada anima rotate.
   - stroke-linecap butt no anel: com round, 0% desenharia um ponto.
   - data-aqua-limites invertido ("30,15") le ao contrario: acima do
     primeiro e success. E para o que e bom quando alto (fps, tick).
   - o anel padrao e space-12 vezes 2 (96px, a largura do sparkline) com o
     valor em fs-lg; --sm e space-8 vezes 2 (64px) com o valor em fs-sm, e
     trilho space-1 na linha. Foi medido em 2026-09-14: num anel de 64px
     com fs-lg um "6/8 GB" vazava para os lados; nos dois tamanhos de agora
     um valor/max com unidade cabe dentro do traco. O texto do header nao
     muda com --sm: fs-sm e o piso.
   - sob prefers-reduced-motion a base encurta as transicoes: o fill e a
     cor trocam no lugar, e continuam dizendo o mesmo. */
@layer aqua.componente {
	.aqua-meter {
		--aqua-meter-pct: 0;
		--aqua-meter-cor: var(--aqua-accent);
		--aqua-meter-trilho: var(--aqua-space-2);
		--aqua-meter-anel: calc(var(--aqua-space-12) * 2);
		display: flex;
		flex-direction: column;
		gap: var(--aqua-space-1);
		min-width: 0;
	}

	/* ---- o tom: escrito pelo JS a partir dos limites ------------------------------- */
	.aqua-meter[data-aqua-tom="success"] { --aqua-meter-cor: var(--aqua-success); }
	.aqua-meter[data-aqua-tom="warning"] { --aqua-meter-cor: var(--aqua-warning); }
	.aqua-meter[data-aqua-tom="danger"] { --aqua-meter-cor: var(--aqua-danger); }

	/* ---- rotulo e valor ------------------------------------------------------------ */
	.aqua-meter__header {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--aqua-space-3);
		font-size: var(--aqua-fs-sm);
		line-height: var(--aqua-lh-base);
	}
	.aqua-meter__label {
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-weight: 500;
		color: var(--aqua-text-muted);
	}
	.aqua-meter__value {
		flex: none;
		font-family: var(--aqua-font-mono);
		font-variant-numeric: tabular-nums;
		font-weight: 500;
		color: var(--aqua-text);
		transition: color var(--aqua-t-base) var(--aqua-ease-out);
	}
	.aqua-meter[data-aqua-tom] .aqua-meter__value { color: var(--aqua-meter-cor); }

	/* ---- o trilho e o fill: a linha fina, sem cabeca ------------------------------- */
	.aqua-meter__track {
		position: relative;
		height: var(--aqua-meter-trilho);
		overflow: hidden;
		border-radius: var(--aqua-radius-full);
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-rest));
	}
	.aqua-meter__fill {
		position: absolute;
		inset: 0 auto 0 0;
		width: calc(var(--aqua-meter-pct) * 1%);
		border-radius: var(--aqua-radius-full);
		background-color: var(--aqua-meter-cor);
		transition:
			width var(--aqua-t-base) var(--aqua-ease-out),
			background-color var(--aqua-t-base) var(--aqua-ease-out);
	}

	/* ---- segmentado: a mascara divide o trilho em blocos ----------------------------- */
	.aqua-meter--segmented .aqua-meter__track {
		--aqua-meter-folga: calc(var(--aqua-space-1) / 2);
		--aqua-meter-casa: calc((100% + var(--aqua-meter-folga)) / var(--aqua-meter-segmentos, 12));
		border-radius: calc(var(--aqua-radius-xs) / 2);
		-webkit-mask-image: repeating-linear-gradient(to right, currentColor 0, currentColor calc(var(--aqua-meter-casa) - var(--aqua-meter-folga)), transparent calc(var(--aqua-meter-casa) - var(--aqua-meter-folga)), transparent var(--aqua-meter-casa));
		mask-image: repeating-linear-gradient(to right, currentColor 0, currentColor calc(var(--aqua-meter-casa) - var(--aqua-meter-folga)), transparent calc(var(--aqua-meter-casa) - var(--aqua-meter-folga)), transparent var(--aqua-meter-casa));
	}
	.aqua-meter--segmented .aqua-meter__fill { border-radius: 0; }

	/* ---- anel: dois circulos, o de valor desenhado por dashoffset --------------------- */
	.aqua-meter--ring {
		display: inline-grid;
		grid-template-columns: var(--aqua-meter-anel);
		grid-template-rows: var(--aqua-meter-anel) auto;
		justify-items: center;
		gap: var(--aqua-space-1);
	}
	.aqua-meter--ring .aqua-meter__header { display: contents; }
	.aqua-meter--ring .aqua-meter__track { display: none; }
	.aqua-meter__ring {
		grid-area: 1 / 1;
		display: block;
		width: var(--aqua-meter-anel);
		height: var(--aqua-meter-anel);
		transform: rotate(-90deg);
	}
	.aqua-meter__ring circle {
		fill: none;
		stroke-width: 4;
		stroke-linecap: butt;
	}
	.aqua-meter__ring-track { stroke: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-active)); }
	.aqua-meter__ring-fill {
		stroke: var(--aqua-meter-cor);
		stroke-dasharray: 100 100;
		stroke-dashoffset: calc(100 - var(--aqua-meter-pct));
		transition:
			stroke-dashoffset var(--aqua-t-base) var(--aqua-ease-out),
			stroke var(--aqua-t-base) var(--aqua-ease-out);
	}
	.aqua-meter--ring .aqua-meter__value {
		grid-area: 1 / 1;
		align-self: center;
		font-size: var(--aqua-fs-lg);
		font-weight: 600;
	}
	.aqua-meter--ring .aqua-meter__label {
		grid-area: 2 / 1;
		max-width: 100%;
		text-align: center;
	}

	/* ---- tamanho: a linha densa e o anel de 64px --------------------------------------- */
	.aqua-meter--sm {
		--aqua-meter-trilho: var(--aqua-space-1);
		--aqua-meter-anel: calc(var(--aqua-space-8) * 2);
	}
	.aqua-meter--sm.aqua-meter--ring .aqua-meter__value { font-size: var(--aqua-fs-sm); }
}

/* ==== 101-rolling-number.css ==== */
/* 101-rolling-number.css - aqua-rolling-number. O numero que muda ao vivo.

   Gota: NENHUMA. E leitura, como o stat (17-stat.css) e o preco
   (83-price.css): o fundo quieto contra o qual o botao se destaca. O que se
   move aqui e o VALOR, e so por transform.

   A ideia com nome: A FITA ANDA, O NUMERO NAO PISCA. Cada algarismo e uma
   janela de 1em de altura (overflow hidden) com uma fita de vinte casas
   dentro (0 a 9, duas vezes), e a fita e transladada ate o algarismo atual
   em t-base ease-out. Quando o valor sobe, a fita anda para cima; quando
   desce, para baixo - e o odometro, que o olho le como "mudou de 1.284 para
   1.285" em vez de "trocou o texto". A satisfacao e essa: o dono ve a
   contagem de jogadores subir, nao aparecer. Separador de milhar, virgula,
   sinal, prefixo e sufixo sao __char parados: so o que e algarismo rola.

   O JS (js/101-rolling-number.js) monta tudo a partir de data-aqua-valor,
   formata em pt-BR e escreve aria-label com o texto inteiro; as janelas sao
   aria-hidden. Escrever o atributo basta: o observador do init segue
   data-aqua-valor. Algarismo que aparece (999 vira 1.000) entra por
   .aqua-entra; o que some sai por sair().

   Decisoes, para ninguem "corrigir":
   - Geist Mono tabular, 600: 1.284 e 1.285 tem a mesma largura, e a janela
     de cada algarismo tambem, entao nada em volta respira quando rola. E o
     numero do stat, com o mesmo peso.
   - a cor NAO e declarada: herda (currentColor), como o sparkline. E o que
     deixa o countdown pintar os numeros de warning quando urge e o meter
     por dentro do __value, sem que esta folha saiba deles.
   - o tamanho padrao herda da linha em que mora (celula de tabela, badge de
     contagem, stat); --lg e fs-2xl (o valor do stat) e --xl e fs-3xl (hero
     de HUD). Os dois levam o tracking negativo de titulo (§3).
   - line-height 1 e altura 1em na janela: o algarismo de Geist Mono nao tem
     descendente e cabe na caixa do em. A fita usa a mesma medida, entao
     translateY(-N em) e exatamente a casa N.
   - a fita tem vinte casas, nao dez: e o que faz o 9 que vira 0 numa subida
     continuar subindo (para a casa 10) em vez de descer nove casas. O JS
     recoloca a fita na primeira volta sem transicao (data-aqua-salto) so na
     mudanca seguinte, que e quando ninguem esta olhando para aquela casa.
   - white-space: pre no bloco, porque prefixo e sufixo carregam o espaco
     ("R$ ", " ms") e o navegador o colapsaria.
   - sob prefers-reduced-motion a base encurta a transicao a quase zero: o
     algarismo troca no lugar, e a fita nao anda. */
@layer aqua.componente {
	.aqua-rolling-number {
		display: inline-flex;
		align-items: flex-start;
		vertical-align: baseline;
		font-family: var(--aqua-font-mono);
		font-variant-numeric: tabular-nums;
		font-weight: 600;
		line-height: 1;
		white-space: pre;
	}

	/* ---- a janela: 1em de altura, e so uma casa a mostra ------------------------- */
	.aqua-rolling-number__digit {
		position: relative;
		display: inline-block;
		height: 1em;
		overflow: hidden;
		vertical-align: top;
	}

	/* ---- a fita: vinte casas empilhadas, transladada ate a atual ------------------- */
	.aqua-rolling-number__strip {
		display: block;
		transition: transform var(--aqua-t-base) var(--aqua-ease-out);
	}
	/* Recolocada na primeira volta sem ser vista: o JS liga, move e desliga. */
	.aqua-rolling-number__strip[data-aqua-salto] { transition: none; }
	.aqua-rolling-number__n {
		display: block;
		height: 1em;
		line-height: 1;
	}

	/* ---- o que nao rola: separador, sinal, prefixo, sufixo ------------------------- */
	.aqua-rolling-number__char {
		display: inline-block;
		height: 1em;
		line-height: 1;
		vertical-align: top;
	}

	/* A entrada de um algarismo novo abre de baixo, de onde a fita vem. */
	.aqua-rolling-number__digit.aqua-entra,
	.aqua-rolling-number__char.aqua-entra { --aqua-origem: 50% 100%; }

	/* ---- os dois tamanhos com dono: o valor do stat, e o hero do HUD --------------- */
	.aqua-rolling-number--lg { font-size: var(--aqua-fs-2xl); letter-spacing: -0.01em; }
	.aqua-rolling-number--xl { font-size: var(--aqua-fs-3xl); letter-spacing: -0.01em; }
}

/* ==== 102-countdown.css ==== */
/* 102-countdown.css - aqua-countdown. O que falta ate o restart, o fim do
   evento, a expiracao do ban.

   Gota: NENHUMA NOVA. Os digitos rolam: e a fita do rolling-number
   (101-rolling-number.css), agora em cadencia de um segundo. O composto usa
   a parte pela classe dela e nao a redesenha (CONVENCOES §11): esta folha
   nao tem uma regra sequer sobre .aqua-rolling-number - o tamanho do numero
   e o modificador da parte (--lg, --xl), escolhido pelo JS a partir do
   modificador do countdown, e a cor de urgencia e a do __unit, que o numero
   herda porque a parte nao declara cor.

   A ideia com nome: UM __unit POR UNIDADE, E O RELOGIO E DO ELEMENTO. O JS
   (js/102-countdown.js) monta d, h, m e s (dias somem quando zero, salvo
   data-aqua-unidades fixo), cada um com o rolling-number em cima e o
   __label embaixo ("dias", "horas", "min", "seg"), e um setInterval de 1s
   por elemento, alinhado ao segundo do alvo, que para quando o elemento sai
   do DOM. E a excecao declarada ao "nunca listener em elemento": o relogio
   nao e evento, e um por elemento, e morre com ele. Ao chegar a zero,
   data-aqua-terminou na raiz e o texto de data-aqua-fim ("Reiniciando") no
   lugar dos numeros, entrando pela lei 4. Abaixo de data-aqua-alerta
   segundos, data-aqua-urgente: os numeros ficam warning.

   Decisoes, para ninguem "corrigir":
   - warning como cor de numero esta fora da prova de contraste do §3, e e
     pedido pelo spec: o numero e fs-2xl ou maior, o piso de texto grande, e
     a urgencia e a informacao inteira do estado. Em --compact, que e fs-lg,
     o warning vale o mesmo aviso do meter.
   - o rotulo e fs-sm text-muted, 500: a palavra, nao a sigla, porque "min"
     e "seg" ja sao curtos e "d" e "h" sozinhos nao se leem a um metro.
   - --compact e 09:59 em linha, sem rotulo: o __sep (":") aparece so aqui,
     e o dia, quando existe, vira "3d" seguido de espaco. E o HUD.
   - --lg sobe o numero para --xl (fs-3xl): e o unico tamanho acima do
     padrao, e o dono e o restart em tela cheia.
   - role="timer" e aria-live="off" sao escritos pelo JS: um leitor de tela
     nao le todo segundo; o aria-label e refeito a cada minuto, e no fim.
   - o __unit esconde por regra explicita ([hidden]): o atributo perde para
     o display da camada. */
@layer aqua.componente {
	.aqua-countdown {
		display: inline-flex;
		align-items: flex-start;
		gap: var(--aqua-space-4);
		min-width: 0;
		color: var(--aqua-text);
	}

	/* ---- a unidade: o numero em cima, a palavra embaixo -------------------------------- */
	.aqua-countdown__unit {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--aqua-space-1);
		min-width: 0;
		color: var(--aqua-text);
		transition: color var(--aqua-t-base) var(--aqua-ease-out);
	}
	.aqua-countdown__label {
		font-size: var(--aqua-fs-sm);
		font-weight: 500;
		line-height: var(--aqua-lh-base);
		color: var(--aqua-text-muted);
	}
	.aqua-countdown__sep { display: none; }
	/* Tres classes de peso, para vencer o inline-block do --compact abaixo. */
	.aqua-countdown .aqua-countdown__unit[hidden],
	.aqua-countdown .aqua-countdown__sep[hidden] { display: none; }

	/* ---- urgente: abaixo de data-aqua-alerta, os numeros ficam warning ---------------- */
	.aqua-countdown[data-aqua-urgente] .aqua-countdown__unit { color: var(--aqua-warning); }

	/* ---- terminou: o texto de data-aqua-fim no lugar dos numeros ---------------------- */
	.aqua-countdown__done {
		font-size: var(--aqua-fs-xl);
		font-weight: 600;
		line-height: var(--aqua-lh-tight);
		letter-spacing: -0.01em;
		color: var(--aqua-text);
	}
	.aqua-countdown[data-aqua-terminou][data-aqua-fim] .aqua-countdown__unit,
	.aqua-countdown[data-aqua-terminou][data-aqua-fim] .aqua-countdown__sep { display: none; }

	/* ---- compacto: 09:59 em linha, sem rotulo ------------------------------------------ */
	.aqua-countdown--compact {
		align-items: baseline;
		gap: 0;
		font-size: var(--aqua-fs-lg);
	}
	.aqua-countdown--compact .aqua-countdown__unit { flex-direction: row; align-items: baseline; gap: 0; }
	.aqua-countdown--compact .aqua-countdown__label { display: none; }
	.aqua-countdown--compact .aqua-countdown__unit[data-aqua-unidade="d"] .aqua-countdown__label {
		display: inline;
		font-family: var(--aqua-font-mono);
		font-size: inherit;
		font-weight: 600;
		line-height: 1;
		color: inherit;
	}
	.aqua-countdown--compact .aqua-countdown__sep {
		display: inline-block;
		font-family: var(--aqua-font-mono);
		font-weight: 600;
		line-height: 1;
		white-space: pre;
		color: var(--aqua-text-muted);
	}
	.aqua-countdown--compact .aqua-countdown__done { font-size: inherit; }

	/* ---- grande: o restart em tela cheia ------------------------------------------------ */
	.aqua-countdown--lg { gap: var(--aqua-space-6); }
	.aqua-countdown--lg .aqua-countdown__done { font-size: var(--aqua-fs-2xl); }
}

/* ==== 103-sortable-list.css ==== */
/* 103-sortable-list.css - aqua-sortable-list. A lista que se reordena.

   Gota: O ERGUIDO A CARREGA. A linha em repouso e a da aqua-list (67): vidro-1,
   contato interno, radius-md, sem assinatura, porque uma linha de 600px passa
   do limite e o que lista marca por fundo. Ao ser erguida (data-aqua-erguido,
   pela alca ou pelo teclado) a linha recebe o canto da Gota (gota-bl), a borda
   accent 45%, sobe para vidro-2 com a sombra que so o vidro tem, e levanta
   1px: e a regra da paleta (§13, aqua-command), a Gota vai ao que vai ser
   acionado, e aqui o que vai ser acionado e o item que esta na mao. A alca com
   aria-pressed carrega o selecionado do icon-btn, pela classe dele.

   A ideia com nome: OS IRMAOS DESLIZAM PARA ABRIR ESPACO. O item erguido segue
   o ponteiro por transform, sem transicao (data-aqua-arrastando na lista tira o
   transform da lista de transicoes dele, e so dele); os irmaos, quando o
   erguido cruza o centro de um, trocam no DOM e o JS os anima da posicao antiga
   para a nova (FLIP) pela transicao de transform em t-base que esta aqui. O
   olho ve a fila abrir e fechar; nada teleporta. Ao soltar, o erguido desliza
   ao lugar pela mesma transicao, e a Gota volta ao canto de campo.

   Decisoes, para ninguem "corrigir":
   - a alca e um aqua-icon-btn (--ghost --sm, com grip-handle) pela classe dele:
     a folha so acrescenta cursor grab e touch-action none, para o toque
     arrastar em vez de rolar. Sem alca-inteira, so a alca pega o ponteiro: o
     resto da linha continua selecionando texto e clicando nos botoes dela.
   - data-aqua-alca-inteira na lista faz a linha inteira pegar o ponteiro; a
     alca continua existindo, porque e ela que recebe o foco do teclado e o
     aria-label "Reordenar ...".
   - a lista e position relative: o offsetTop de cada item, que o FLIP le,
     passa a ser relativo a ela.
   - a linha erguida transiciona border-radius em t-base, como a aba e o card:
     a mudanca de forma e VISTA, nao trocada.
   - a alca disabled (o vrp que fica sempre primeiro) esmaece pelo icon-btn e
     o JS nao a ergue; os outros passam por cima dela.
   - sob prefers-reduced-motion a base zera as transicoes: os irmaos trocam de
     lugar sem deslizar, e a ordem continua certa. */
@layer aqua.componente {
	.aqua-sortable-list {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: var(--aqua-space-2);
		min-width: 0;
	}
	.aqua-sortable-list[data-aqua-arrastando] { user-select: none; -webkit-user-select: none; }

	/* ---- a linha: a da aqua-list, com a transicao de transform que o FLIP usa ---- */
	.aqua-sortable-list__item {
		position: relative;
		display: flex;
		align-items: center;
		gap: var(--aqua-space-3);
		width: 100%;
		min-width: 0;
		padding: var(--aqua-space-3);
		border: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border));
		border-radius: var(--aqua-radius-md);
		background: var(--aqua-vidro-1-bg);
		-webkit-backdrop-filter: var(--aqua-vidro-1-filtro);
		backdrop-filter: var(--aqua-vidro-1-filtro);
		box-shadow: inset 0 1px 0 rgb(var(--aqua-white-rgb) / 7%);
		color: var(--aqua-text);
		font-size: var(--aqua-fs-md);
		font-weight: 400;
		line-height: var(--aqua-lh-base);
		text-align: left;
		transition:
			transform var(--aqua-t-base) var(--aqua-ease-out),
			border-radius var(--aqua-t-base) var(--aqua-ease-out),
			backdrop-filter var(--aqua-t-rapido) var(--aqua-ease-out),
			background-color var(--aqua-t-rapido) var(--aqua-ease-out),
			border-color var(--aqua-t-rapido) var(--aqua-ease-out),
			box-shadow var(--aqua-t-rapido) var(--aqua-ease-out);
	}

	.aqua-sortable-list__handle { cursor: grab; touch-action: none; }
	.aqua-sortable-list__text { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
	.aqua-sortable-list__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--aqua-text); }
	.aqua-sortable-list__meta { font-size: var(--aqua-fs-sm); line-height: var(--aqua-lh-base); color: var(--aqua-text-muted); }
	.aqua-sortable-list__end { display: inline-flex; flex: none; align-items: center; gap: var(--aqua-space-2); }

	/* ---- a linha inteira como alca ------------------------------------------------------ */
	.aqua-sortable-list[data-aqua-alca-inteira] > .aqua-sortable-list__item { cursor: grab; touch-action: none; }

	/* ---- erguida: a Gota, vidro-2 com a sombra do vidro, 1px acima --------------------- */
	.aqua-sortable-list__item[data-aqua-erguido] {
		z-index: 1;
		border-color: rgb(var(--aqua-accent-rgb) / 45%);
		border-radius: var(--aqua-gota-bl);
		background: var(--aqua-vidro-2-bg);
		-webkit-backdrop-filter: var(--aqua-vidro-2-filtro);
		backdrop-filter: var(--aqua-vidro-2-filtro);
		box-shadow:
			inset 0 1px 0 rgb(var(--aqua-white-rgb) / 7%),
			0 1px 2px rgb(var(--aqua-black-rgb) / 20%),
			0 12px 32px -12px rgb(var(--aqua-black-rgb) / 40%);
		transform: translateY(-1px);
	}
	.aqua-sortable-list__item[data-aqua-erguido] .aqua-sortable-list__handle,
	.aqua-sortable-list[data-aqua-alca-inteira] > .aqua-sortable-list__item[data-aqua-erguido] { cursor: grabbing; }

	/* Arrastando pelo ponteiro, o erguido segue a mao por transform inline e nao
	   pode transicionar o transform; tudo o mais nele continua transicionando. */
	.aqua-sortable-list[data-aqua-arrastando] > .aqua-sortable-list__item[data-aqua-erguido] {
		transition-property: border-radius, backdrop-filter, background-color, border-color, box-shadow;
	}
}

/* ==== 104-tree.css ==== */
/* 104-tree.css - aqua-tree. O navegador de pastas.

   Gota: NENHUMA. Quieto de proposito: a linha selecionada marca por fundo
   accent 10% e borda accent 45% (o selecionado do §4), sem o canto, pelo mesmo
   motivo da linha de tabela e da lista: uma linha de 300px passa dos 24px, e o
   que lista marca por fundo. O icone da linha selecionada vai a accent, como
   o do nav-item atual. O unico movimento de repouso e o chevron, que gira 90
   graus fechado e 0 aberto em t-base.

   A ideia com nome: OS FILHOS ENTRAM EM CASCATA, PENDURADOS NUMA LINHA-GUIA.
   Abrir um no mostra o grupo de filhos, e cada filho entra por aqua-entrar
   (a lei 4, do canto superior esquerdo, de onde pendem) com atraso de
   --aqua-cascata vezes o indice, ate o oitavo: do nono em diante o atraso
   satura, como no esqueleto, porque uma pasta de quarenta arquivos com
   quatro segundos de cascata parece quebrada. A linha-guia e uma borda de
   alpha-border a esquerda do grupo, alinhada ao centro do chevron do pai.

   O ARIA mora na LINHA, nao no li: __row e o treeitem (tabindex rodante,
   aria-expanded, aria-selected, aria-level, aria-owns apontando o __children),
   o li e role=none e o __children e role=group. Se o li fosse o treeitem, o
   anel de foco (o da base e o desenhado) contornaria o no INTEIRO, filhos
   abertos incluidos; com o treeitem na linha, o anel contorna a linha.

   Decisoes, para ninguem "corrigir":
   - a linha e um clicavel completo (§4): hover text mais alpha-hover e sobe
     1px; press adensa e fecha o canto (a Gota que o toque revela, como todo
     item de lista); foco clareia com o anel da base; aria-disabled esmaece.
   - o __toggle e um <span aria-hidden> de fs-lg, nunca um botao: o teclado
     abre pela seta e um botao dentro do treeitem seria um segundo foco. Na
     folha o toggle fica vazio e guarda o lugar, para os rotulos alinharem.
   - __children esconde por regra explicita quando a linha nao esta
     aria-expanded="true" (o hidden perderia para o display da camada).
   - carregando: data-aqua-carregar no li, aberto sem filhos, mostra um
     aqua-spinner--sm no lugar do chevron, e o spinner nao gira com o toggle.
   - __meta e fs-xs mono text-muted, o __count do nav-item: e contagem ou
     tamanho, e mono tabular nao muda de largura entre 9 e 10. */
@layer aqua.componente {
	.aqua-tree {
		display: flex;
		flex-direction: column;
		gap: var(--aqua-space-1);
		min-width: 0;
	}
	.aqua-tree__item { display: block; min-width: 0; }

	/* ---- a linha: o treeitem, um clicavel completo -------------------------------------- */
	.aqua-tree__row {
		display: flex;
		align-items: center;
		gap: var(--aqua-space-2);
		min-width: 0;
		padding: var(--aqua-space-1) var(--aqua-space-2);
		border: 1px solid transparent;
		border-radius: var(--aqua-radius-sm);
		color: var(--aqua-text);
		font-size: var(--aqua-fs-sm);
		font-weight: 400;
		line-height: var(--aqua-lh-base);
		cursor: pointer;
		transition:
			transform var(--aqua-t-toque) var(--aqua-ease-out),
			border-radius var(--aqua-t-toque) var(--aqua-ease-out),
			backdrop-filter var(--aqua-t-toque) var(--aqua-ease-out),
			background-color var(--aqua-t-rapido) var(--aqua-ease-out),
			border-color var(--aqua-t-rapido) var(--aqua-ease-out),
			color var(--aqua-t-rapido) var(--aqua-ease-out),
			filter var(--aqua-t-rapido) var(--aqua-ease-out);
	}
	.aqua-tree__row:hover {
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-hover));
		transform: translateY(-1px);
	}
	.aqua-tree__row:focus-visible { filter: brightness(1.06); }
	.aqua-tree__row:active {
		transform: translateY(-1px) scale(0.97);
		border-radius: var(--aqua-radius-btn-fechado);
		background-color: rgb(var(--aqua-surface-rgb) / var(--aqua-press-tint));
		-webkit-backdrop-filter: var(--aqua-press-filtro);
		backdrop-filter: var(--aqua-press-filtro);
	}
	.aqua-tree__row[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; transform: none; filter: none; }

	/* ---- selecionada: fundo e borda, sem a Gota ------------------------------------------ */
	.aqua-tree__row[aria-selected="true"],
	.aqua-tree__row[aria-selected="true"]:hover {
		border-color: transparent;
		background-color: var(--aqua-selecao-bg);
		box-shadow: var(--aqua-selecao-sombra);
	}
	.aqua-tree__row[aria-selected="true"] > .aqua-tree__icon { color: var(--aqua-text); }

	/* ---- as partes da linha ----------------------------------------------------------- */
	.aqua-tree__toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: none;
		width: var(--aqua-fs-lg);
		height: var(--aqua-fs-lg);
		color: var(--aqua-text-muted);
		transition: transform var(--aqua-t-base) var(--aqua-ease-out);
	}
	.aqua-tree__toggle > svg { width: 100%; height: 100%; }
	.aqua-tree__row:not([aria-expanded="true"]) > .aqua-tree__toggle { transform: rotate(-90deg); }
	.aqua-tree__icon { flex: none; width: var(--aqua-fs-lg); height: var(--aqua-fs-lg); color: var(--aqua-text-muted); }
	.aqua-tree__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.aqua-tree__meta {
		flex: none;
		font-family: var(--aqua-font-mono);
		font-variant-numeric: tabular-nums;
		font-size: var(--aqua-fs-xs);
		color: var(--aqua-text-muted);
	}

	/* ---- os filhos: escondidos por regra, e a linha-guia sob o centro do chevron ------ */
	.aqua-tree__children {
		display: flex;
		flex-direction: column;
		gap: var(--aqua-space-1);
		margin-left: calc(var(--aqua-space-2) + var(--aqua-fs-lg) / 2);
		padding-top: var(--aqua-space-1);
		padding-left: var(--aqua-space-3);
		border-left: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border));
	}
	.aqua-tree__row:not([aria-expanded="true"]) ~ .aqua-tree__children { display: none; }

	/* ---- a entrada em cascata, limitada a oito ------------------------------------------ */
	.aqua-tree__row[aria-expanded="true"] ~ .aqua-tree__children > .aqua-tree__item {
		transform-origin: 0% 0%;
		animation: aqua-entrar var(--aqua-t-base) var(--aqua-ease-out) both;
		animation-delay: calc(var(--aqua-cascata) * var(--aqua-tree-i, 0));
	}
	.aqua-tree__item:nth-child(2) { --aqua-tree-i: 1; }
	.aqua-tree__item:nth-child(3) { --aqua-tree-i: 2; }
	.aqua-tree__item:nth-child(4) { --aqua-tree-i: 3; }
	.aqua-tree__item:nth-child(5) { --aqua-tree-i: 4; }
	.aqua-tree__item:nth-child(6) { --aqua-tree-i: 5; }
	.aqua-tree__item:nth-child(7) { --aqua-tree-i: 6; }
	.aqua-tree__item:nth-child(n + 8) { --aqua-tree-i: 7; }
}

/* ==== 105-checklist.css ==== */
/* 105-checklist.css - aqua-checklist. Configure seu servidor: 3 de 5.

   Gota: A DO PROGRESS (62-progress.css), pela classe dele: a cabeca que
   percorre enquanto falta item e ASSENTA ao chegar ao total, com o canto
   virado para a parede da direita. A caixa de cada item e a do checkbox (29),
   que marcada recebe a Gota; o __mark do item feito pela aplicacao cita essa
   caixa marcada, parada, sem ser um input. O __done cita o rosto do empty
   (63): o check numa Gota em repouso de 48px. Nada de novo se move.

   A ideia com nome: O FECHAMENTO EM CASCATA. A lista e um card (aqua-card,
   pela classe) com um cabecalho (titulo, "3 de 5" em mono, e um
   aqua-progress--sm) sobre os itens; cada item e uma caixa de selecao com
   titulo e texto, e uma acao pequena a direita que SOME quando o item esta
   feito, junto com o titulo indo a text-muted. Quando o ultimo item e
   marcado, a raiz recebe data-aqua-completo e o JS tira os itens um a um por
   .aqua-sai, em cascata de --aqua-cascata, de cima para baixo; quando o
   ultimo saiu, o __done entra por .aqua-entra. O card fecha como uma lista
   que foi sendo riscada, nao como uma tela que troca.

   Decisoes, para ninguem "corrigir":
   - a folha nao redesenha o card, o checkbox, o progress nem o empty: so as
     partes proprias. Vidro, raio, sombra e padding sao do card.
   - o item feito NAO risca o titulo: text-muted ja diz "passou", e o risco e
     o default de todo app de tarefas. A acao some porque ja foi feita.
   - __mark e a caixa marcada do checkbox, desenhada com o mesmo L de borda:
     nao depende do pack de icones, e um leitor de tela ouve "Feito" pelo
     aria-label que o JS escreve.
   - --collapsible e um <details> com o cabecalho na <summary>: a summary e
     clicavel (§4) sem subir 1px, porque e rotulo e nao item, como a do
     nav-group; o __caret gira 180 graus em t-base quando abre.
   - __items, __item e __done escondem por regra explicita ([hidden]): o
     atributo perde para o display da camada. */
@layer aqua.componente {
	.aqua-checklist { min-width: 0; }

	/* ---- o cabecalho: titulo, contagem em mono, e o progress pela classe dele ------ */
	.aqua-checklist__header {
		display: flex;
		flex-direction: column;
		gap: var(--aqua-space-2);
		min-width: 0;
	}
	.aqua-checklist__heading {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--aqua-space-3);
		min-width: 0;
	}
	.aqua-checklist__header .aqua-checklist__title {
		flex: 1 1 auto;
		min-width: 0;
		font-size: var(--aqua-fs-lg);
		font-weight: 600;
		line-height: var(--aqua-lh-tight);
		letter-spacing: -0.01em;
		color: var(--aqua-text);
	}
	.aqua-checklist__count {
		flex: none;
		font-family: var(--aqua-font-mono);
		font-variant-numeric: tabular-nums;
		font-size: var(--aqua-fs-sm);
		color: var(--aqua-text-muted);
		transition: color var(--aqua-t-rapido) var(--aqua-ease-out);
	}
	.aqua-checklist[data-aqua-completo] .aqua-checklist__count { color: var(--aqua-text); }

	/* ---- os itens ------------------------------------------------------------------- */
	.aqua-checklist__items {
		display: flex;
		flex-direction: column;
		gap: var(--aqua-space-3);
		min-width: 0;
	}
	.aqua-checklist__items[hidden] { display: none; }
	.aqua-checklist__item {
		display: flex;
		align-items: flex-start;
		gap: var(--aqua-space-3);
		min-width: 0;
	}
	.aqua-checklist__item[hidden] { display: none; }
	.aqua-checklist__task { flex: 1 1 auto; min-width: 0; }
	.aqua-checklist__text { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
	.aqua-checklist__item .aqua-checklist__title {
		font-size: var(--aqua-fs-md);
		line-height: var(--aqua-lh-base);
		color: var(--aqua-text);
		transition: color var(--aqua-t-rapido) var(--aqua-ease-out);
	}
	.aqua-checklist__body { font-size: var(--aqua-fs-sm); line-height: var(--aqua-lh-base); color: var(--aqua-text-muted); }
	.aqua-checklist__action { flex: none; }
	.aqua-checklist__item[data-aqua-feito] .aqua-checklist__title { color: var(--aqua-text-muted); }
	.aqua-checklist__item[data-aqua-feito] .aqua-checklist__action { display: none; }

	/* ---- a marca de leitura: a caixa marcada do checkbox, parada ----------------------- */
	.aqua-checklist__mark {
		position: relative;
		display: inline-grid;
		place-items: center;
		flex: none;
		width: calc(var(--aqua-space-4) + var(--aqua-space-1));
		height: calc(var(--aqua-space-4) + var(--aqua-space-1));
		font-size: var(--aqua-fs-md);
		border: 1px solid transparent;
		border-radius: calc(var(--aqua-radius-xs) / 2);
		background-color: var(--aqua-escolha-bg);
	}
	.aqua-checklist__mark::after {
		content: "";
		width: 0.4em;
		height: 0.75em;
		border: solid var(--aqua-escolha-fg);
		border-width: 0 2px 2px 0;
		transform: translateY(-0.08em) rotate(45deg);
	}

	/* ---- tudo pronto: o rosto do empty, pela classe dele ------------------------------- */
	.aqua-checklist__done[hidden] { display: none; }

	/* ---- --collapsible: o cabecalho e a summary de um details --------------------------- */
	.aqua-checklist--collapsible > .aqua-checklist__header {
		list-style: none;
		cursor: pointer;
		border-radius: var(--aqua-radius-sm);
		transition:
			backdrop-filter var(--aqua-t-toque) var(--aqua-ease-out),
			background-color var(--aqua-t-rapido) var(--aqua-ease-out),
			filter var(--aqua-t-rapido) var(--aqua-ease-out);
	}
	.aqua-checklist--collapsible > .aqua-checklist__header::-webkit-details-marker { display: none; }
	.aqua-checklist--collapsible > .aqua-checklist__header:focus-visible { filter: brightness(1.06); }
	.aqua-checklist--collapsible > .aqua-checklist__header:active {
		background-color: rgb(var(--aqua-surface-rgb) / var(--aqua-press-tint));
		-webkit-backdrop-filter: var(--aqua-press-filtro);
		backdrop-filter: var(--aqua-press-filtro);
	}
	.aqua-checklist__caret { flex: none; width: 1em; height: 1em; color: var(--aqua-text-muted); transition: transform var(--aqua-t-base) var(--aqua-ease-out); }
	.aqua-checklist--collapsible[open] > .aqua-checklist__header .aqua-checklist__caret { transform: rotate(180deg); }
}

/* ==== 106-hover-card.css ==== */
/* 106-hover-card.css - aqua-hover-card. A ficha que aparece ao apontar.

   Gota: NENHUMA. E o popover (50): superficie vidro-2, e a assinatura fica
   no que o consumidor poe dentro (o botao primario da acao, o avatar
   --square). Quieto de proposito, como todo overlay que e superficie (§13).

   A ideia com nome: O POPOVER QUE ABRE SOB O PONTEIRO E SOB O FOCO. Apontar
   um jogador na tabela e ver a ficha; apontar um recurso e ver estado e
   versao. Um gatilho [data-aqua-hover-card="#id"] arma 400 ms ao receber o
   ponteiro e 200 ms ao perde-lo; o cartao --interactive cancela o
   fechamento enquanto o ponteiro estiver dentro dele. O foco abre na hora e
   fecha ao sair; Esc e clicar fora sao do flutuante (§10): largura auto,
   embaixo, alinhado ao inicio, com saida. O JS escreve aria-describedby no
   gatilho ao montar. A animacao satisfatoria e a entrada da lei 4, com
   --aqua-origem escrito pelo flutuante no centro do gatilho: o cartao
   cresce de quem foi apontado, e sai por .aqua-sai.

   Decisoes, para ninguem "corrigir":
   - a receita e a do popover, repetida por texto (CSS sem @extend): vidro-2,
     borda alpha-border, radius-lg, a sombra curta e a longa, ate 320px. Nao
     e .aqua-popover com outra classe porque o popover recebe o foco ao
     abrir e este NAO: um cartao que rouba o foco de quem so apontou e bug.
   - sem --interactive o cartao nao recebe o ponteiro (pointer-events none),
     como o tooltip: passar o mouse para ele e sair do gatilho, e o cartao
     fecha. Com --interactive ele segura o ponteiro, e o foco pode entrar
     (Tab do gatilho vai a primeira acao) sem fechar. Interatividade e
     variante, como no card, e por isso e modificador e nao atributo.
   - __header e uma linha: o avatar do consumidor e o __heading, uma coluna
     com __title (fs-md 600) e __meta (fs-sm text-muted). __body e text-
     muted em fs-sm, porque e apoio; __actions alinha a direita, como o
     rodape do popover. O que vai entre eles (badge, descriptions) e do
     consumidor, pela classe da parte.
   - esconde por regra explicita ([hidden]): o atributo perde para o display
     da camada. Aberto, o cartao esta no body, nao ao lado do gatilho.
   - o gatilho NAO ganha aria-expanded: o cartao descreve, nao revela.
     aria-describedby e o vinculo, como no tooltip. */
@layer aqua.componente {
	.aqua-hover-card {
		display: flex;
		flex-direction: column;
		gap: var(--aqua-space-3);
		width: max-content;
		max-width: 320px;
		padding: var(--aqua-space-4);
		border: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border));
		border-radius: var(--aqua-radius-lg);
		background: var(--aqua-vidro-2-bg);
		-webkit-backdrop-filter: var(--aqua-vidro-2-filtro);
		backdrop-filter: var(--aqua-vidro-2-filtro);
		box-shadow:
			inset 0 1px 0 rgb(var(--aqua-white-rgb) / 7%),
			0 1px 2px rgb(var(--aqua-black-rgb) / 20%),
			0 12px 32px -12px rgb(var(--aqua-black-rgb) / 40%);
		color: var(--aqua-text);
		font-size: var(--aqua-fs-sm);
		line-height: var(--aqua-lh-base);
		pointer-events: none;
	}
	.aqua-hover-card[hidden] { display: none; }
	/* Interativo: segura o ponteiro, e o foco pode entrar. */
	.aqua-hover-card--interactive { pointer-events: auto; }

	/* ---- o cabecalho: avatar do consumidor, titulo e meta numa coluna ------------------ */
	.aqua-hover-card__header { display: flex; align-items: center; gap: var(--aqua-space-3); min-width: 0; }
	.aqua-hover-card__heading { display: flex; flex-direction: column; min-width: 0; }
	.aqua-hover-card__title {
		font-size: var(--aqua-fs-md);
		font-weight: 600;
		line-height: var(--aqua-lh-tight);
		color: var(--aqua-text);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.aqua-hover-card__meta { font-size: var(--aqua-fs-sm); color: var(--aqua-text-muted); }

	/* ---- o corpo e as acoes ---------------------------------------------------------- */
	.aqua-hover-card__body { color: var(--aqua-text-muted); }
	.aqua-hover-card__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--aqua-space-2); padding-top: var(--aqua-space-1); }
}

/* ==== 107-carousel.css ==== */
/* 107-carousel.css - aqua-carousel. As imagens do produto, os destaques da loja.

   Gota: NENHUMA. E superficie (§13), como o product-card que ele carrega:
   os cards dentro trazem as suas. O que anima e o PONTO ATUAL, que alonga
   de 8px para 20px em t-base, em accent, e encolhe de volta quando a
   pagina muda. E width animando, admitido pelo spec da fase porque o
   elemento e pequeno e a duracao e t-base; o olho le a assinatura migrando
   de ponto em ponto, como a Gota migra na paginacao.

   A ideia com nome: UM VIEWPORT QUE ROLA COM SNAP, E O KIT SO LE. O
   __viewport e overflow-x auto com scroll-snap-type x mandatory e a barra
   escondida por ::-webkit-scrollbar (o substituto medido do scrollbar-
   width, §9); o __track e flex com gap space-3; cada __slide e flex 0 0
   100% com scroll-snap-align start. Rolar com o dedo, com a roda ou com
   Shift+roda ja funciona sem JS. O JS (js/107-carousel.js) acrescenta o que
   a plataforma nao da: __prev e __next (aqua-icon-btn com back e forward,
   disabled nas pontas salvo data-aqua-loop), os __dots (role=tablist de
   role=tab, aria-selected no atual, setas entre eles), setas do teclado no
   viewport, o atual lido por um IntersectionObserver (a excecao declarada
   no spec da fase) e data-aqua-auto="5000", que avanca e pausa sob o
   ponteiro ou com foco dentro. Evento aqua-carousel { indice } quando a
   pagina muda.

   Decisoes, para ninguem "corrigir":
   - a raiz e uma grade de duas linhas: o viewport em cima, nas tres
     colunas; embaixo __prev, __dots e __next, cada um na sua area. O
     consumidor escreve as partes em qualquer ordem e a grade as poe no
     lugar; sem __dots a linha de baixo continua alinhada.
   - data-aqua-por-pagina="3" vira --aqua-carousel-n na raiz, escrito pelo
     JS ao montar, e o slide ocupa (100% - (n - 1) gaps) / n. Sem JS, n e
     1. O ponto conta PAGINAS, nao slides: com 6 slides e 3 por pagina ha 2
     pontos, porque o que se navega e o que cabe na tela.
   - --peek: o track ganha padding space-8 dos lados e o viewport o mesmo
     em scroll-padding; a base do slide continua a mesma (o percentual e do
     conteudo do track), as beiradas dos vizinhos aparecem e o snap continua
     no inicio.
   - o dot e um botao de 8px com os cinco estados, porque clicavel de 8px
     continua clicavel: hover sobe 1px e clareia, press encolhe a 0.9, foco
     e o anel da base, o atual e accent e alongado. Os outros sao text a
     30% e 50%: alfa em fundo e permitido, e alpha-rest em 8px nao se ve.
   - o viewport e focavel (tabindex 0, escrito pelo JS se faltar) para as
     setas terem onde cair, e o anel de foco e o da base, sem redefinir.
   - o slide e role=group com aria-roledescription="slide" e aria-label
     "1 de 6", escritos pelo JS; a section leva aria-roledescription
     "carousel" e o aria-label do consumidor, como o padrao WAI-ARIA pede.
   - sem setas sobre a imagem: as setas sao icon-buttons do kit, embaixo,
     e cabem em qualquer superficie sem competir com o conteudo. */
@layer aqua.componente {
	.aqua-carousel {
		--aqua-carousel-n: 1;
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas:
			"viewport viewport viewport"
			"prev dots next";
		align-items: center;
		gap: var(--aqua-space-3);
		min-width: 0;
	}

	/* ---- o viewport que rola com snap, e o track ------------------------------------ */
	.aqua-carousel__viewport {
		grid-area: viewport;
		min-width: 0;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		overscroll-behavior-x: contain;
		border-radius: var(--aqua-radius-lg);
	}
	.aqua-carousel__viewport::-webkit-scrollbar { display: none; }
	.aqua-carousel__track { display: flex; align-items: stretch; gap: var(--aqua-space-3); }
	.aqua-carousel__slide {
		display: flex;
		flex: 0 0 calc((100% - (var(--aqua-carousel-n) - 1) * var(--aqua-space-3)) / var(--aqua-carousel-n));
		min-width: 0;
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}
	.aqua-carousel__slide > * { flex: 1 1 auto; min-width: 0; }

	/* ---- --peek: as beiradas dos vizinhos ----------------------------------------------- */
	.aqua-carousel--peek .aqua-carousel__viewport { scroll-padding-inline: var(--aqua-space-8); }
	.aqua-carousel--peek .aqua-carousel__track { padding-inline: var(--aqua-space-8); }

	/* ---- as setas e os pontos ------------------------------------------------------------ */
	.aqua-carousel__prev { grid-area: prev; }
	.aqua-carousel__next { grid-area: next; }
	.aqua-carousel__dots {
		grid-area: dots;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--aqua-space-2);
		min-width: 0;
		min-height: var(--aqua-space-2);
	}
	.aqua-carousel__dot {
		flex: none;
		width: var(--aqua-space-2);
		height: var(--aqua-space-2);
		padding: 0;
		border: 0;
		border-radius: var(--aqua-radius-full);
		background-color: rgb(var(--aqua-text-rgb) / 30%);
		cursor: pointer;
		transition:
			width var(--aqua-t-base) var(--aqua-ease-out),
			transform var(--aqua-t-toque) var(--aqua-ease-out),
			background-color var(--aqua-t-rapido) var(--aqua-ease-out);
	}
	.aqua-carousel__dot:hover { background-color: rgb(var(--aqua-text-rgb) / 50%); transform: translateY(-1px); }
	.aqua-carousel__dot:active { transform: scale(0.9); }
	.aqua-carousel__dot:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
	/* O atual alonga: e a assinatura migrando de ponto em ponto. */
	.aqua-carousel__dot[aria-selected="true"],
	.aqua-carousel__dot[aria-selected="true"]:hover {
		width: calc(var(--aqua-space-4) + var(--aqua-space-1));
		background-color: var(--aqua-accent);
	}
}

/* ==== 108-avatar-group.css ==== */
/* 108-avatar-group.css - aqua-avatar-group. Jogadores online, membros do staff.

   Gota: NENHUMA. O avatar e quieto (16) e o grupo tambem: e o fundo contra
   o qual o botao se destaca (§13). O que anima e O LEQUE: ao apontar (ou
   focar) um item, os que vem depois deslizam space-2 para a direita em
   t-base, so transform, e o apontado sobe 1px e vem para a frente. Ao
   sair, tudo volta em t-base. --spread deixa o grupo sempre aberto.

   A ideia com nome: AVATARES SOBREPOSTOS COM ANEL DA SURFACE, E O LEQUE QUE
   ABRE SOB O PONTEIRO. Cada __item e um aqua-avatar, pela classe dele e sem
   redesenho: o grupo so escreve a sobreposicao (margin-inline-start
   negativo, a unica margem que o kit admite porque ela E o layout do
   grupo), o anel de 2px na cor da surface por box-shadow (o recorte que
   separa um do outro sem borda dupla) e o leque. O __more e um avatar de
   texto com "+3", escrito pelo JS (js/108-avatar-group.js) a partir de
   data-aqua-max, ou pelo consumidor a mao.

   Decisoes, para ninguem "corrigir":
   - o tamanho e do avatar: o consumidor poe aqua-avatar--sm ou --lg em cada
     item (e no __more), como faz num avatar solto. --sm e --lg no GRUPO so
     ajustam a sobreposicao (space-1 e space-3): 8px sobre 24px cobre um
     terco, e sobre 48px nao se le. Composto usa a parte pela classe dela e
     nao a redesenha (§11).
   - o anel e box-shadow, nao border: a borda do avatar continua a dele, e o
     anel cresce por fora sem mexer na medida.
   - o leque e transform nos irmaos seguintes (~), que e o que o CSS alcanca
     sem :has(): o apontado nao anda para o lado, sobe 1px e ganha z-index.
     O focado abre o leque do mesmo jeito, para o teclado ver o mesmo.
   - position relative e z-index so no apontado: o grupo nao cria contexto
     de empilhamento alem do que a sobreposicao exige.
   - __item[hidden] e __more[hidden] escondem por regra explicita, porque o
     display inline-flex do avatar vence o atributo.
   - __more e text-muted: e contagem, nao pessoa, e nao pode parecer um
     jogador a mais. O fundo e o do avatar de iniciais. */
@layer aqua.componente {
	.aqua-avatar-group {
		--aqua-avatar-group-passo: var(--aqua-space-2);
		display: inline-flex;
		align-items: center;
		vertical-align: middle;
	}
	.aqua-avatar-group > .aqua-avatar-group__item,
	.aqua-avatar-group > .aqua-avatar-group__more {
		position: relative;
		margin-inline-start: calc(-1 * var(--aqua-avatar-group-passo));
		box-shadow: 0 0 0 2px var(--aqua-surface);
		transition: transform var(--aqua-t-base) var(--aqua-ease-out);
	}
	.aqua-avatar-group > :first-child { margin-inline-start: 0; }
	.aqua-avatar-group > .aqua-avatar-group__item[hidden],
	.aqua-avatar-group > .aqua-avatar-group__more[hidden] { display: none; }
	.aqua-avatar-group__more { color: var(--aqua-text-muted); }

	/* ---- a sobreposicao por tamanho ------------------------------------------------------ */
	.aqua-avatar-group--sm { --aqua-avatar-group-passo: var(--aqua-space-1); }
	.aqua-avatar-group--lg { --aqua-avatar-group-passo: var(--aqua-space-3); }

	/* ---- o leque: o apontado vem a frente, os seguintes abrem espaco ---------------------- */
	.aqua-avatar-group > .aqua-avatar-group__item:hover,
	.aqua-avatar-group > .aqua-avatar-group__item:focus-visible { z-index: 1; transform: translateY(-1px); }
	.aqua-avatar-group > .aqua-avatar-group__item:hover ~ .aqua-avatar-group__item,
	.aqua-avatar-group > .aqua-avatar-group__item:hover ~ .aqua-avatar-group__more,
	.aqua-avatar-group > .aqua-avatar-group__item:focus-visible ~ .aqua-avatar-group__item,
	.aqua-avatar-group > .aqua-avatar-group__item:focus-visible ~ .aqua-avatar-group__more { transform: translateX(var(--aqua-avatar-group-passo)); }

	/* ---- --spread: sempre aberto; nada a deslizar ------------------------------------------ */
	.aqua-avatar-group--spread { gap: var(--aqua-space-1); }
	.aqua-avatar-group--spread > .aqua-avatar-group__item,
	.aqua-avatar-group--spread > .aqua-avatar-group__more { margin-inline-start: 0; }
	.aqua-avatar-group--spread > .aqua-avatar-group__item:hover ~ .aqua-avatar-group__item,
	.aqua-avatar-group--spread > .aqua-avatar-group__item:hover ~ .aqua-avatar-group__more,
	.aqua-avatar-group--spread > .aqua-avatar-group__item:focus-visible ~ .aqua-avatar-group__item,
	.aqua-avatar-group--spread > .aqua-avatar-group__item:focus-visible ~ .aqua-avatar-group__more { transform: none; }
}

/* ==== 109-bar-chart.css ==== */
/* 109-bar-chart.css - aqua-bar-chart. A serie curta, em barras.

   Gota: NENHUMA. E leitura, como o sparkline e o stat em que os dois moram
   (§13: "badge, avatar e stat sao o fundo quieto"). O que se move e o dado
   chegando, e so uma vez.

   A ideia com nome: SO O MAXIMO E MARCADO. O sparkline marca o agora; aqui
   se marca o pico. A barra maxima e accent solido, as outras sao accent a
   55%, e nada mais tem cor: rotulo e valor sao texto (text-muted e text), o
   eixo e um fio de alpha-border. E a forma "enfase" da skill dataviz (uma
   em cor, o resto atras), sem eixo Y, sem grade, sem legenda: uma serie so,
   e o titulo do consumidor diz o que e. O valor de cada barra aparece em
   cima dela ao apontar (o <title> do svg cobre o ponteiro que espera), e a
   lista inteira esta no aria-label do host, que o kit escreve.

   O <svg> e montado pelo aqua-ui.js por createElementNS a partir de
   data-aqua-valores e data-aqua-rotulos (regra 11: nada por innerHTML), no
   tamanho REAL do host (viewBox em pixels), porque texto num svg esticado
   deforma. Um ResizeObserver partilhado redesenha quando a caixa muda de
   tamanho, sem reanimar (data-aqua-parado).

   A animacao, decidida: A BARRA CRESCE DA BASE. transform: scaleY de 0 a 1
   com transform-origin na base, em t-base ease-out, uma barra atras da outra
   por um quarto da cascata (110ms / 4 = 27ms). So transform anima. Sete
   barras terminam em 220 + 6 x 27 = 385ms. Trocar data-aqua-valores
   redesenha e as barras crescem de novo: e o dado chegando, nao enfeite.

   Decisoes, para ninguem "corrigir":
   - a barra tem no maximo space-6 (24px) de grosso, e a sobra da faixa e
     ar (dataviz: "cap it, never fill the slot"); entre duas barras ha
     sempre 2px de superficie, nunca borda.
   - o canto de cima e radius-xs / 2 (5.5px), e nao radius-xs: em barra de
     24px, 11px seria uma cupula, e o dataviz pede 4px. E o menor raio que
     o §5 admite. O de baixo e quadrado: um clipPath corta o arredondamento
     abaixo da base, porque <rect> so tem rx uniforme. O clip fica num <g>
     em volta da barra, e nao nela: clip-path no proprio rect viajaria com
     o scaleY e mostraria o canto de baixo durante a animacao.
   - o alvo de hover e a faixa inteira (__hit, transparente), da base ao
     topo, e nao os pixels pintados da barra: uma barra de 8px de valor
     baixo continua facil de apontar (dataviz: "the hit target is bigger
     than the mark").
   - ao apontar, a barra clareia (brightness) e o __value aparece; nada
     sobe nem escala, porque grafico nao e clicavel.
   - o texto e SEMPRE texto: fill em text-muted e text, nunca na cor da
     serie (dataviz: "text never wears the data color").
   - a altura e do LAYOUT: space-12 x 2 por padrao, o consumidor sobrepoe
     com style ou classe. A largura e a do pai.
   - --horizontal deita o grafico: rotulos a esquerda, barras crescendo
     da esquerda por scaleX, valor na ponta.
   - role="img" o kit escreve se faltar; aria-label o kit escreve com
     "seg 12, ter 30" e reescreve a cada troca de valores, salvo se o
     consumidor trouxe o seu (data-aqua-descrito marca o que e do kit). */
@layer aqua.componente {
	.aqua-bar-chart {
		display: block;
		position: relative;
		width: 100%;
		min-width: 0;
		height: calc(var(--aqua-space-12) * 2);
		line-height: 0;
	}
	.aqua-bar-chart > svg { display: block; width: 100%; height: 100%; overflow: visible; }

	/* ---- a base: um fio, solido, uma parada acima da superficie -------------------------- */
	.aqua-bar-chart__baseline {
		stroke: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border-strong));
		stroke-width: 1;
		shape-rendering: crispEdges;
	}

	/* ---- a barra: cresce da base, e so a maxima e accent ---------------------------------- */
	.aqua-bar-chart__bar {
		fill: rgb(var(--aqua-accent-rgb) / 55%);
		transform-box: fill-box;
		transform-origin: 50% 100%;
		animation: aqua-bar-chart-cresce var(--aqua-t-base) var(--aqua-ease-out) both;
		animation-delay: calc(var(--aqua-cascata) / 4 * var(--aqua-bar-chart-i, 0));
		transition: fill var(--aqua-t-rapido) var(--aqua-ease-out), filter var(--aqua-t-rapido) var(--aqua-ease-out);
	}
	.aqua-bar-chart__bar--max { fill: var(--aqua-accent); }
	.aqua-bar-chart[data-aqua-parado] .aqua-bar-chart__bar { animation: none; }

	/* ---- o alvo: a faixa inteira, invisivel ----------------------------------------------- */
	.aqua-bar-chart__hit { fill: transparent; pointer-events: all; }

	/* ---- o texto: sempre texto ------------------------------------------------------------ */
	.aqua-bar-chart__label {
		fill: var(--aqua-text-muted);
		font-family: var(--aqua-font-sans);
		font-size: var(--aqua-fs-xs);
		font-weight: 500;
		text-anchor: middle;
	}
	.aqua-bar-chart__value {
		fill: var(--aqua-text);
		font-family: var(--aqua-font-mono);
		font-variant-numeric: tabular-nums;
		font-size: var(--aqua-fs-xs);
		text-anchor: middle;
		opacity: 0;
		transition: opacity var(--aqua-t-rapido) var(--aqua-ease-out);
	}

	/* ---- apontar: a barra clareia e o valor aparece ---------------------------------------- */
	.aqua-bar-chart__item:hover .aqua-bar-chart__bar { fill: rgb(var(--aqua-accent-rgb) / 80%); }
	.aqua-bar-chart__item:hover .aqua-bar-chart__bar--max { fill: var(--aqua-accent); filter: brightness(1.08); }
	.aqua-bar-chart__item:hover .aqua-bar-chart__value { opacity: 1; }

	/* ---- deitado: cresce da esquerda, rotulo antes, valor na ponta ------------------------ */
	.aqua-bar-chart--horizontal .aqua-bar-chart__bar {
		transform-origin: 0% 50%;
		animation-name: aqua-bar-chart-cresce-x;
	}
	.aqua-bar-chart--horizontal .aqua-bar-chart__label { text-anchor: end; dominant-baseline: middle; }
	.aqua-bar-chart--horizontal .aqua-bar-chart__value { text-anchor: start; dominant-baseline: middle; }
}

/* Fora de camada, como os do 02-movimento: keyframes nao cascateiam. */
@keyframes aqua-bar-chart-cresce {
	from { transform: scaleY(0); }
	to   { transform: none; }
}
@keyframes aqua-bar-chart-cresce-x {
	from { transform: scaleX(0); }
	to   { transform: none; }
}

/* ==== 110-heatmap.css ==== */
/* 110-heatmap.css - aqua-heatmap. A grade de intensidade: dias por horas.

   Gota: NENHUMA. E leitura, como o bar-chart e o sparkline. O que se move e
   o dado chegando, uma vez.

   A ideia com nome: UMA COR, CINCO DEGRAUS, E O ZERO NAO E COR. A escala e
   sequencial de um matiz so (dataviz: "sequential = one hue, light to
   dark"), e o matiz e o accent: nivel 1 a 4 sao accent a 25%, 45%, 70% e
   100%. O nivel 0 e alpha-rest de text, a mesma cor de um controle em
   repouso: uma hora sem ninguem online nao e "pouco accent", e "nada", e o
   olho le a grade pelo que se acende. A legenda "menos ... mais" mostra os
   cinco degraus, e cada celula carrega title e aria-label ("seg, 21h: 47"),
   entao o valor exato nunca depende de cor (dataviz: a tabela e o tooltip
   sao o caminho sem cor).

   O nivel e um ATRIBUTO (data-aqua-nivel, 0 a 4, por quartil do maximo),
   escrito pelo aqua-ui.js, e a cor mora aqui: o modulo nao tem literal de
   cor e a paleta troca sem tocar em JS. A grade e CSS grid montada por
   createElement (regra 11): um canto vazio, os rotulos de coluna (um a cada
   data-aqua-passo-coluna, padrao 6), e por linha o rotulo e as celulas.

   A animacao, decidida: AS CELULAS ACENDEM EM DIAGONAL. Cada celula entra
   por opacity de 0 a 1 em t-base, com atraso de (linha + coluna) vezes um
   oitavo da cascata (110ms / 8 = 14ms): a grade acende do canto superior
   esquerdo para o inferior direito, como uma onda. Em 7 por 24 a ultima
   celula comeca em 29 x 14 = 400ms. So opacity anima. Trocar
   data-aqua-valores remede e acende de novo.

   Decisoes, para ninguem "corrigir":
   - a celula e quadrada (aspect-ratio 1) e a largura e da grade: o pai
     decide, a grade divide em N colunas iguais. --sm fixa a celula em
     space-2 (8px) e a grade encolhe ao conteudo: e o heatmap de canto de
     card. Em 8px nenhum rotulo de coluna cabe, entao --sm esconde a linha
     de cima (o aria-label da celula continua dizendo a coluna); os
     rotulos de linha ficam.
   - o raio da celula e radius-xs / 2, o menor que o §5 admite; a folga
     entre celulas e space-1 / 2 (2px), derivada da escala, o "surface gap"
     do dataviz: separa por vazio, nunca por borda.
   - ao apontar, a celula clareia (brightness), como a barra; nada sobe,
     porque grafico nao e clicavel.
   - rotulo de linha e de coluna sao fs-xs em text-muted e aria-hidden: o
     aria-label da celula ja diz linha e coluna.
   - o host recebe role="group" se nao trouxer role, para o aria-label do
     consumidor contar; as celulas sao role="img" com o valor. */
@layer aqua.componente {
	.aqua-heatmap {
		display: flex;
		flex-direction: column;
		gap: var(--aqua-space-2);
		min-width: 0;
		font-size: var(--aqua-fs-xs);
		line-height: var(--aqua-lh-base);
		color: var(--aqua-text-muted);
	}

	/* ---- a grade: um canto, N rotulos de coluna, e por linha o rotulo e as celulas ------ */
	.aqua-heatmap__grid {
		display: grid;
		grid-template-columns: auto repeat(var(--aqua-heatmap-colunas, 24), minmax(0, 1fr));
		gap: calc(var(--aqua-space-1) / 2);
		align-items: center;
	}
	.aqua-heatmap__row { padding-right: var(--aqua-space-1); text-align: right; white-space: nowrap; }
	.aqua-heatmap__col { min-width: 0; overflow: visible; white-space: nowrap; }
	.aqua-heatmap__corner { min-width: 0; }

	/* ---- a celula: um degrau de accent, e o zero e repouso ------------------------------ */
	.aqua-heatmap__cell {
		aspect-ratio: 1;
		min-width: 0;
		border-radius: calc(var(--aqua-radius-xs) / 2);
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-rest));
		animation: aqua-heatmap-acende var(--aqua-t-base) var(--aqua-ease-out) both;
		animation-delay: calc(var(--aqua-cascata) / 8 * var(--aqua-heatmap-i, 0));
		transition: filter var(--aqua-t-rapido) var(--aqua-ease-out);
	}
	.aqua-heatmap__cell:hover { filter: brightness(1.15); }
	.aqua-heatmap__cell[data-aqua-nivel="1"], .aqua-heatmap__sample[data-aqua-nivel="1"] { background-color: rgb(var(--aqua-accent-rgb) / 25%); }
	.aqua-heatmap__cell[data-aqua-nivel="2"], .aqua-heatmap__sample[data-aqua-nivel="2"] { background-color: rgb(var(--aqua-accent-rgb) / 45%); }
	.aqua-heatmap__cell[data-aqua-nivel="3"], .aqua-heatmap__sample[data-aqua-nivel="3"] { background-color: rgb(var(--aqua-accent-rgb) / 70%); }
	.aqua-heatmap__cell[data-aqua-nivel="4"], .aqua-heatmap__sample[data-aqua-nivel="4"] { background-color: var(--aqua-accent); }

	/* ---- a legenda: menos, os cinco degraus, mais ----------------------------------------- */
	.aqua-heatmap__legend {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: var(--aqua-space-1);
	}
	.aqua-heatmap__sample {
		display: inline-block;
		width: var(--aqua-space-3);
		height: var(--aqua-space-3);
		border-radius: calc(var(--aqua-radius-xs) / 2);
		background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-rest));
	}

	/* ---- tamanho: a celula de 8px, para o canto de um card ------------------------------ */
	.aqua-heatmap--sm .aqua-heatmap__grid {
		grid-template-columns: auto repeat(var(--aqua-heatmap-colunas, 24), var(--aqua-space-2));
		justify-content: start;
	}
	/* Em 8px nenhum rotulo de coluna cabe (tres letras medem 20px): a linha de
	   cima sai, e o aria-label da celula continua dizendo a coluna. */
	.aqua-heatmap--sm .aqua-heatmap__corner,
	.aqua-heatmap--sm .aqua-heatmap__col { display: none; }
	.aqua-heatmap--sm .aqua-heatmap__sample { width: var(--aqua-space-2); height: var(--aqua-space-2); }
}

/* Fora de camada, como os do 02-movimento: keyframes nao cascateiam. */
@keyframes aqua-heatmap-acende {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* ==== 111-console.css ==== */
/* 111-console.css - aqua-console. O console do servidor, no painel.

   Gota: NENHUMA NA LINHA. O console e leitura que corre, e a linha de
   comando embaixo e campo (§13: a Gota aparece no que se escolhe ou se
   aciona, nunca no que se digita). A Gota fica no __new, o botao que leva
   ao fim: e o unico que se aciona, e carrega radius-btn. Os chips da barra
   carregam a deles (o chip pressionado, a selecao do §13).

   A ideia com nome: OS CODIGOS DO FIVEM VIRAM CLASSE, NUNCA COR. Um servidor
   FiveM imprime ^1 a ^7 (regra 30 do aquanuis): o aqua-ui.js divide o texto
   em <span class="__tone --danger|--success|--warning|--info"> por
   textContent, e a cor mora aqui, nos tokens de sinal, que o tokens.json
   declara medidos como texto sobre a superficie (6.46 a 9.30; info 5.18).
   Nada e escrito em cor inline, e a paleta troca sem tocar em JS. O tom da
   linha (__level) e um ponto, como no badge e no toast: a cor nunca e o
   fundo da linha.

   E uma caixa de campo composta, grande: borda alpha-border-strong,
   radius-md, fundo vidro-1, e por dentro a __toolbar (chips de nivel, o
   Limpar e o interruptor Seguir), o __body com o __output (Geist Mono fs-sm,
   rola por dentro com a barra da base, role="log") e o __new flutuando
   sobre ele, e a linha __input com o __prompt e o campo. A altura e do
   LAYOUT: o consumidor da a altura e o output ocupa o que sobra.

   A animacao, decidida: A LINHA NOVA ENTRA. Cada linha que chega entra por
   .aqua-entra (lei 4), e o __new sobe por .aqua-entra tambem quando o dono
   rolou para cima e uma linha chegou. Nada percorre, nada pisca: um console
   que anima mais do que isso cansa em dez segundos.

   Decisoes, para ninguem "corrigir":
   - a linha e uma grade de tres colunas: hora (text-muted, tabular), o
     ponto de tom (0.5em, transparente quando a linha nao tem nivel, para
     a coluna nao pular) e o texto, que quebra e mantem espacos
     (white-space: pre-wrap), porque log tem alinhamento por espaco.
   - a linha esconde por regra explicita ([hidden]): e o filtro de nivel,
     escrito pelo JS; o display da camada venceria o atributo.
   - o __new e vidro-2 com a sombra do vidro, porque flutua sobre texto e
     precisa de chao proprio; fica centrado por margin auto e width
     max-content, e NAO por transform, que o .aqua-entra anima. E clicavel:
     os cinco estados, com a Gota que fecha ao toque.
   - a linha de comando e campo composto (§4). Sem traco de foco desde
     2026-09-29; a linha so ganha brightness em :focus-within, e o <input>
     apaga o proprio outline. Hover e o fundo subindo, sem transform: e campo.
   - overflow hidden na raiz e para os cantos recortarem o output; o
     flutuante nao mora aqui dentro (o __new e parte, nao painel). */
@layer aqua.componente {
	.aqua-console {
		display: flex;
		flex-direction: column;
		min-height: 0;
		min-width: 0;
		border: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border-strong));
		border-radius: var(--aqua-radius-md);
		background: var(--aqua-vidro-1-bg);
		-webkit-backdrop-filter: var(--aqua-vidro-1-filtro);
		backdrop-filter: var(--aqua-vidro-1-filtro);
		color: var(--aqua-text);
		overflow: hidden;
	}

	/* ---- a barra: filtros por nivel, limpar, seguir ---------------------------------------- */
	.aqua-console__toolbar {
		display: flex;
		flex: none;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--aqua-space-2);
		padding: var(--aqua-space-2) var(--aqua-space-3);
		border-bottom: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border));
	}
	.aqua-console__toolbar-end { display: inline-flex; align-items: center; gap: var(--aqua-space-2); margin-left: auto; }

	/* ---- o corpo: o output rola por dentro, e o __new flutua sobre ele -------------------- */
	.aqua-console__body { position: relative; display: flex; flex: 1 1 auto; min-height: 0; }
	.aqua-console__output {
		flex: 1 1 auto;
		min-height: 0;
		min-width: 0;
		padding: var(--aqua-space-2) var(--aqua-space-3);
		overflow: auto;
		overscroll-behavior: contain;
		font-family: var(--aqua-font-mono);
		font-variant-numeric: tabular-nums;
		font-size: var(--aqua-fs-sm);
		line-height: var(--aqua-lh-base);
	}

	/* ---- a linha: hora, o ponto de tom, o texto ------------------------------------------- */
	.aqua-console__line {
		display: grid;
		grid-template-columns: auto auto minmax(0, 1fr);
		align-items: baseline;
		gap: var(--aqua-space-2);
		padding: calc(var(--aqua-space-1) / 2) 0;
		--aqua-origem: 0% 100%;
	}
	.aqua-console__line[hidden] { display: none; }
	.aqua-console__time { color: var(--aqua-text-muted); white-space: nowrap; }
	/* O ponto centra na PRIMEIRA linha do texto (lh-base 1.5em, ponto de
	   0.5em: sobra 0.5em em cima), e nao no meio de uma linha que quebrou. */
	.aqua-console__level {
		align-self: start;
		margin-top: 0.5em;
		width: 0.5em;
		height: 0.5em;
		border-radius: var(--aqua-radius-full);
		background-color: transparent;
	}
	.aqua-console__line[data-aqua-nivel="success"] .aqua-console__level { background-color: var(--aqua-success); }
	.aqua-console__line[data-aqua-nivel="warning"] .aqua-console__level { background-color: var(--aqua-warning); }
	.aqua-console__line[data-aqua-nivel="danger"] .aqua-console__level { background-color: var(--aqua-danger); }
	.aqua-console__line[data-aqua-nivel="info"] .aqua-console__level { background-color: var(--aqua-info); }
	.aqua-console__text { min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }

	/* ---- os codigos do FiveM: ^1 ^2 ^3 ^5, e ^7 volta ao texto ----------------------------- */
	.aqua-console__tone--danger { color: var(--aqua-danger); }
	.aqua-console__tone--success { color: var(--aqua-success); }
	.aqua-console__tone--warning { color: var(--aqua-warning); }
	.aqua-console__tone--info { color: var(--aqua-info); }

	/* ---- "N novas linhas": flutua sobre o output, e leva ao fim ---------------------------- */
	.aqua-console__new {
		position: absolute;
		left: 0;
		right: 0;
		bottom: var(--aqua-space-2);
		width: max-content;
		margin: 0 auto;
		display: inline-flex;
		align-items: center;
		gap: var(--aqua-space-2);
		padding: var(--aqua-space-1) var(--aqua-space-3);
		border: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border));
		border-radius: var(--aqua-radius-btn);
		background: var(--aqua-vidro-2-bg);
		-webkit-backdrop-filter: var(--aqua-vidro-2-filtro);
		backdrop-filter: var(--aqua-vidro-2-filtro);
		box-shadow:
			inset 0 1px 0 rgb(var(--aqua-white-rgb) / 7%),
			0 1px 2px rgb(var(--aqua-black-rgb) / 20%),
			0 12px 32px -12px rgb(var(--aqua-black-rgb) / 40%);
		color: var(--aqua-text);
		font-size: var(--aqua-fs-sm);
		font-weight: 500;
		line-height: var(--aqua-lh-base);
		white-space: nowrap;
		cursor: pointer;
		--aqua-origem: 50% 100%;
		transition:
			transform var(--aqua-t-toque) var(--aqua-ease-out),
			border-radius var(--aqua-t-toque) var(--aqua-ease-out),
			background-color var(--aqua-t-rapido) var(--aqua-ease-out),
			border-color var(--aqua-t-rapido) var(--aqua-ease-out),
			filter var(--aqua-t-rapido) var(--aqua-ease-out);
	}
	.aqua-console__new[hidden] { display: none; }
	.aqua-console__new:hover { transform: translateY(-1px); border-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border-strong)); }
	.aqua-console__new:focus-visible { filter: brightness(1.06); }
	.aqua-console__new:active { transform: translateY(-1px) scale(0.97); border-radius: var(--aqua-radius-btn-fechado); }
	.aqua-console__new:disabled { opacity: 0.5; cursor: not-allowed; transform: none; filter: none; }

	/* ---- a linha de comando: campo composto, o anel na linha ------------------------------- */
	.aqua-console__input {
		display: flex;
		flex: none;
		align-items: center;
		gap: var(--aqua-space-2);
		padding: var(--aqua-space-1) var(--aqua-space-3);
		border-top: 1px solid rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border));
		font-family: var(--aqua-font-mono);
		font-size: var(--aqua-fs-sm);
		line-height: var(--aqua-lh-base);
		transition:
			background-color var(--aqua-t-rapido) var(--aqua-ease-out),
			filter var(--aqua-t-rapido) var(--aqua-ease-out);
	}
	.aqua-console__input:hover { background-color: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-rest)); }
	.aqua-console__input:focus-within {
		filter: brightness(1.06);
	}
	.aqua-console__prompt { color: var(--aqua-text-muted); user-select: none; }
	.aqua-console__field {
		flex: 1 1 auto;
		min-width: 0;
		padding: var(--aqua-space-1) 0;
		border: 0;
		background: none;
		color: inherit;
		font: inherit;
		caret-color: var(--aqua-accent);
		-webkit-appearance: none;
		appearance: none;
	}
	.aqua-console__field:focus-visible { outline: 0; }
	.aqua-console__field:disabled { cursor: not-allowed; }
}