/* 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-ui) 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("instrument-sans-latin.woff2") 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("geist-mono-latin.woff2") 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 (lei 3 do movimento: anel, nao glow) ------------------------- */
	/* Global e unico. Componente NAO redefine o anel.

	   Este outline e o PISO, e ele existe sempre: e o que a NUI ve quando o
	   aqua-ui.js nao carregou. Com o kit vivo, o anel passa a ser DESENHADO -
	   um traco que nasce no canto afiado da Gota e percorre o contorno (§13) -
	   e a raiz ganha data-aqua-anel-vivo, que apaga este. Melhoria progressiva:
	   apague o JS e o anel volta inteiro, sem nada a corrigir.

	   O segundo seletor cobre o campo COMPOSTO (§4): quando o focavel mora
	   dentro de uma caixa marcada com data-aqua-anel, quem carrega o anel e a
	   caixa. A base nao conhece o nome de componente nenhum; conhece o atributo. */
	:focus-visible { outline: 2px solid var(--aqua-accent); outline-offset: 2px; }
	:focus:not(:focus-visible) { outline: 0; }
	[data-aqua-anel-vivo] :focus-visible,
	[data-aqua-anel-vivo] [data-aqua-anel]:focus-within { outline-color: transparent; }

	/* ---- 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;
		}
	}

	/* ---- 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;
	}
}

@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; }
}

/* ==== 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: rgb(var(--aqua-accent-rgb) / 10%);
		border-color: rgb(var(--aqua-accent-rgb) / 45%);
	}
}

@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 (lei 3 do §7, expressao da Gota do §13) -------------
	   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 que
	   tem foco 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 foco: 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.5: o anel de 2px do piso lia como
	   moldura, e o que aqui carrega a atencao e o movimento, nao a massa.
	   prefers-reduced-motion corta a transicao pela base, e o traco simplesmente
	   aparece inteiro - continua sendo um anel visivel. */
	.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.5;
		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);
	}
	.aqua-anel[data-aqua-anel-estado="sai"] path {
		stroke-dashoffset: -100;
		transition: stroke-dashoffset var(--aqua-t-base) var(--aqua-ease-in-out);
	}

	/* 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-gota-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). */
@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 rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border-strong));
		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;
		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);
	}
	.aqua-btn:focus-visible { filter: brightness(1.06); }
	.aqua-btn:active {
		transform: translateY(-1px) scale(0.97);
		border-radius: var(--aqua-gota-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-text);
		background-color: rgb(var(--aqua-accent-rgb) / 10%);
		border-color: rgb(var(--aqua-accent-rgb) / 45%);
		filter: brightness(1.06);
	}

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

	/* 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--primary:hover { background-color: var(--aqua-accent); filter: brightness(1.08); }
	.aqua-btn--danger:hover { background-color: var(--aqua-danger); filter: brightness(1.08); }
	.aqua-btn--primary:active,
	.aqua-btn--danger:active {
		filter: brightness(0.96);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
	.aqua-btn--primary:active { background-color: var(--aqua-accent); }
	.aqua-btn--danger:active { background-color: var(--aqua-danger); }

	/* ---- 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 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);
		line-height: 0;
		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);
	}
	.aqua-icon-btn:focus-visible { filter: brightness(1.06); }
	.aqua-icon-btn:active {
		transform: translateY(-1px) scale(0.90);
		border-radius: var(--aqua-gota-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-text);
		background-color: rgb(var(--aqua-accent-rgb) / 10%);
		border-color: rgb(var(--aqua-accent-rgb) / 45%);
		filter: brightness(1.06);
	}

	/* ---- 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-gota-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 rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border-strong));
		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-gota-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-text);
		background-color: rgb(var(--aqua-accent-rgb) / 10%);
		border-color: rgb(var(--aqua-accent-rgb) / 45%);
		border-radius: var(--aqua-gota-bl);
		filter: brightness(1.06);
	}
	.aqua-chip[aria-pressed="true"] .aqua-chip__icon { color: var(--aqua-accent); }
	button.aqua-chip[aria-pressed="true"]:active { border-radius: var(--aqua-gota-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 rgb(var(--aqua-text-rgb) / var(--aqua-alpha-border));
		border-radius: var(--aqua-radius-sm);
		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: 1px solid rgb(var(--aqua-accent-rgb) / 45%);
		border-radius: var(--aqua-gota-bl);
		background-color: rgb(var(--aqua-accent-rgb) / 10%);
		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; }
	.aqua-segmented[data-aqua-seg-parede="esquerda"]::before { border-radius: var(--aqua-gota-bl); }
	.aqua-segmented[data-aqua-seg-parede="direita"]::before { border-radius: var(--aqua-gota-br); }

	/* ---- 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-gota-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: rgb(var(--aqua-accent-rgb) / 10%);
		border-color: rgb(var(--aqua-accent-rgb) / 45%);
	}
	/* 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-gota-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: a Gota migra para o card escolhido. */
	.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: rgb(var(--aqua-accent-rgb) / 45%);
		border-radius: var(--aqua-gota-bl);
		filter: brightness(1.06);
	}
	.aqua-card--interactive[aria-pressed="true"]:active,
	.aqua-card--interactive[aria-selected="true"]:active { border-radius: var(--aqua-gota-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. */
	.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-gota-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-gota-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, e o anel de foco fica fora por
   outline-offset, entao nao e cortado. Campo composto (§4): o anel vai na
   caixa por :focus-within, e o input e os botoes apagam o proprio.

   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)); }
	/* O anel na caixa e a excecao do §4 para campo composto. data-aqua-anel na
	   marcacao diz ao anel desenhado que o hospedeiro e a caixa, e nao o <input>
	   transparente de dentro; este outline continua sendo o piso sem JS. */
	.aqua-number-input:focus-within {
		outline: 2px solid var(--aqua-accent);
		outline-offset: 2px;
		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-radius: var(--aqua-gota-bl);
		border-color: rgb(var(--aqua-accent-rgb) / 45%);
		background-color: rgb(var(--aqua-accent-rgb) / 10%);
		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, entao o anel vai na
   caixa por :focus-within, e o input apaga o proprio com outline 0. E a
   unica excecao a "o componente nao redefine o anel", declarada no §4: o
   anel em volta do <input> transparente, e nao da caixa, e o que parece
   quebrado.

   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)); }
	/* O anel na caixa e a excecao do §4 para campo composto. data-aqua-anel na
	   marcacao diz ao anel desenhado que o hospedeiro e a caixa, e nao o <input>
	   transparente de dentro; este outline continua sendo o piso sem JS. */
	.aqua-search:focus-within {
		outline: 2px solid var(--aqua-accent);
		outline-offset: 2px;
		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-accent);
		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 {
		border-radius: var(--aqua-gota-bl);
		border-color: rgb(var(--aqua-accent-rgb) / 45%);
		background-color: rgb(var(--aqua-accent-rgb) / 10%);
		filter: brightness(1.06);
	}
	.aqua-checkbox__input:indeterminate {
		border-radius: var(--aqua-radius-xs);
		border-color: rgb(var(--aqua-accent-rgb) / 45%);
		background-color: rgb(var(--aqua-accent-rgb) / 10%);
	}
	.aqua-checkbox__input:checked:active:not(:disabled),
	.aqua-checkbox:active .aqua-checkbox__input:checked:not(:disabled) { border-radius: var(--aqua-gota-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-accent);
		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: rgb(var(--aqua-accent-rgb) / 45%);
		background-color: rgb(var(--aqua-accent-rgb) / 10%);
	}

	/* ---- 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-accent);
	}
	/* 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: rgb(var(--aqua-accent-rgb) / 45%);
		background-color: rgb(var(--aqua-accent-rgb) / 10%);
	}

	/* ---- 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-radius: var(--aqua-gota-bl);
		border-color: rgb(var(--aqua-accent-rgb) / 45%);
		background-color: rgb(var(--aqua-accent-rgb) / 10%);
	}
}

/* ==== 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, item em radius-xs. 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 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 {
		display: flex;
		flex-direction: column;
		gap: var(--aqua-space-1);
		min-width: 0;
		max-height: calc(var(--aqua-space-12) * 6);
		padding: var(--aqua-space-1);
		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-radius-xs);
		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-gota-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-radius: var(--aqua-gota-bl);
		border-color: rgb(var(--aqua-accent-rgb) / 45%);
		background-color: rgb(var(--aqua-accent-rgb) / 10%);
	}
	.aqua-opcoes__item[aria-selected="true"]:active { border-radius: var(--aqua-gota-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-accent); }
	.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 {
		border-color: rgb(var(--aqua-accent-rgb) / 45%);
		background-color: rgb(var(--aqua-accent-rgb) / 10%);
	}
	.aqua-filter-select[data-aqua-escolhido] .aqua-select__icon { color: var(--aqua-accent); }

	/* ---- 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: rgb(var(--aqua-accent-rgb) / 45%);
		background-color: rgb(var(--aqua-accent-rgb) / 10%);
	}
	.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) e sobe 1px; press escurece um degrau, encolhe a 0.90
     (alvo de 20px, como a caixa) e fecha o canto. Foco e o anel da base em
     volta do controle inteiro, como o range nativo faz, mais brightness na
     alca: o componente nao redefine o anel.
   - 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. */
@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-toque) 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 ----------------------------- */
	.aqua-slider:hover { --aqua-slider-fundo: rgb(var(--aqua-text-rgb) / var(--aqua-alpha-hover)); }
	.aqua-slider:hover::-webkit-slider-thumb { transform: translateY(-1px); filter: brightness(1.08); }
	.aqua-slider:focus-visible::-webkit-slider-thumb { 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.90); filter: brightness(0.96); cursor: grabbing; }
	.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%; }
}

/* ==== 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.

   Gota: A ABA ATIVA. Botoes soltos sobre uma linha fina que os separa do
   painel; so a aba ativa recebe o canto da Gota (gota-bl), o fundo accent
   10% e a borda accent 45% - o selecionado do §4 - e a assinatura MIGRA
   entre os botoes quando a escolha muda, com border-radius transicionando
   em t-base para a migracao ser vista, como no chip.

   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),
			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-gota-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 Gota migra para ca. */
	.aqua-tabs__tab[aria-selected="true"],
	.aqua-tabs__tab[aria-selected="true"]:hover {
		color: var(--aqua-text);
		border-color: rgb(var(--aqua-accent-rgb) / 45%);
		border-radius: var(--aqua-gota-bl);
		background-color: rgb(var(--aqua-accent-rgb) / 10%);
	}
	.aqua-tabs__tab[aria-selected="true"] .aqua-tabs__icon { color: var(--aqua-accent); }
	.aqua-tabs__tab[aria-selected="true"]:active { border-radius: var(--aqua-gota-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: rgb(var(--aqua-accent-rgb) / 45%);
		border-radius: var(--aqua-gota-bl);
		filter: brightness(1.06);
	}
	.aqua-select-card:has(:checked) .aqua-select-card__icon { color: var(--aqua-accent); }
	.aqua-select-card:has(:checked):active { border-radius: var(--aqua-gota-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-radius: var(--aqua-gota-bl);
		border-color: rgb(var(--aqua-accent-rgb) / 45%);
		background-color: rgb(var(--aqua-accent-rgb) / 10%);
	}
	.aqua-command .aqua-opcoes__item[data-aqua-ativo] .aqua-opcoes__icon { color: var(--aqua-accent); }
}

/* ==== 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-gota-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: rgb(var(--aqua-accent-rgb) / 45%);
		border-radius: var(--aqua-gota-bl);
		background-color: rgb(var(--aqua-accent-rgb) / 10%);
	}
	.aqua-nav-item[aria-current] .aqua-nav-item__icon { color: var(--aqua-accent); }
	.aqua-nav-item[aria-current]:active { border-radius: var(--aqua-gota-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-gota-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: rgb(var(--aqua-accent-rgb) / 45%);
		border-radius: var(--aqua-gota-bl);
		background-color: rgb(var(--aqua-accent-rgb) / 10%);
	}
	.aqua-pagination__page[aria-current]:active { border-radius: var(--aqua-gota-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-accent-rgb) / 45%); }

	/* ---- 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: rgb(var(--aqua-accent-rgb) / 45%);
		background-color: rgb(var(--aqua-accent-rgb) / 10%);
		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-accent);
		border-bottom: calc(var(--aqua-space-1) / 2) solid var(--aqua-accent);
		transform: rotate(45deg);
	}
	.aqua-stepper__step[aria-current="step"] .aqua-stepper__marker {
		border-color: transparent;
		border-radius: var(--aqua-gota-bl);
		background-color: var(--aqua-accent);
		color: var(--aqua-on-accent);
	}

	/* ---- 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-gota-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);
	}
	.aqua-scroll-area--x { overflow-x: auto; overflow-y: hidden; }

	/* ---- "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: rgb(var(--aqua-accent-rgb) / 10%);
		border-bottom-color: rgb(var(--aqua-accent-rgb) / 45%);
	}

	/* ---- 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-gota-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: rgb(var(--aqua-accent-rgb) / 45%);
		border-radius: var(--aqua-gota-bl);
		background-color: rgb(var(--aqua-accent-rgb) / 10%);
	}
	.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-gota-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-accent); }
	.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: rgb(var(--aqua-accent-rgb) / 45%);
		background: rgb(var(--aqua-accent-rgb) / 10%);
	}

	/* ---- 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-gota-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: rgb(var(--aqua-accent-rgb) / 45%); }
}

/* ==== 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. */
@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-gota-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-text);
		border-color: rgb(var(--aqua-accent-rgb) / 45%);
		border-radius: var(--aqua-gota-bl);
		background-color: rgb(var(--aqua-accent-rgb) / 10%);
		filter: brightness(1.06);
	}
	.aqua-calendar__cell[aria-selected="true"] > .aqua-calendar__day:active { border-radius: var(--aqua-gota-fechado); }
}

/* ==== 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, e a zona carrega o anel por :focus-within e data-aqua-anel, a
   excecao do §4 para campo composto, 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 {
		outline: 2px solid var(--aqua-accent);
		outline-offset: 2px;
		filter: brightness(1.06);
	}
	.aqua-file-picker__zone[data-aqua-sobre] {
		border-color: rgb(var(--aqua-accent-rgb) / 45%);
		background-color: rgb(var(--aqua-accent-rgb) / 10%);
		filter: brightness(1.06);
	}
	.aqua-file-picker__zone[data-aqua-sobre] .aqua-file-picker__icon { color: var(--aqua-accent); }
	.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, entao o anel vai na caixa
   por :focus-within e data-aqua-anel (a excecao do §4 para campo composto),
   e a textarea apaga o proprio 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 {
		outline: 2px solid var(--aqua-accent);
		outline-offset: 2px;
		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, e o anel
     se desenha em volta do label por data-aqua-anel. position relative para
     o input absoluto ficar dentro dele.
   - a __input perde borda, fundo, raio, hover e anel 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). O anel e da caixa, por :focus-within e data-aqua-anel,
     a excecao do §4 para campo composto.
   - os estados sao os do campo: hover sobe o fundo da caixa sem translateY;
     :focus-within tem o anel da base mais 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 {
		outline: 2px solid var(--aqua-accent);
		outline-offset: 2px;
		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 {
		outline: 2px solid var(--aqua-accent);
		outline-offset: 2px;
		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: rgb(var(--aqua-accent-rgb) / 45%);
		background-color: rgb(var(--aqua-accent-rgb) / 10%);
		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, em Geist Mono 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 E MONO E TABULAR, E O RESTO E APOIO. A moeda
   (__currency) e o periodo (__period) sao fs-sm text-muted; o valor
   (__value, um <data value> com o numero em ponto para a aplicacao ler sem
   parsear virgula) e 600 em text; o preco antigo (__old, um <s>) vem ANTES
   do atual, riscado e em text-muted, porque o olho le "de 79,90 por 49,90";
   o desconto e um aqua-badge--success irmao, que esta folha nao toca.

   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-mono);
		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, e o anel de 2px do 00-base.css desaparece sem erro nenhum.
	   Quem carrega so o CSS, sem o aqua-ui.js, ficaria sem piso de foco, entao o
	   indicador mora DENTRO da mascara, em duas pistas que 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);
	}
}