/**
 * Banner de instalação do PWA (Sprint 21, ver pwa-install.js).
 *
 * Decisão: o banner é anexado a `document.body`, NÃO dentro de `#ritual-app`
 * — cada troca de tela hoje substitui `#ritual-app.innerHTML` inteiro (ver
 * app.js, "não existe chrome persistente entre elas ainda"), o que apagaria
 * o banner a cada navegação se ele vivesse lá dentro. Como consequência, os
 * tokens de `tokens.css` (escopados em `#ritual-app { ... }`) não chegam
 * até aqui por herança de CSS custom properties — por isso todo `var(...)`
 * abaixo tem um valor de fallback igual ao token correspondente, em vez de
 * depender da cascata. Se um sprint futuro introduzir um "chrome" real
 * persistente (M10), vale revisitar essa decisão.
 */

.ritual-pwa-install-banner {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9999;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-sm, 8px);
	padding: var(--spacing-sm, 8px) var(--spacing-md, 16px);
	background: var(--color-bg-elevated, #1A1E35);
	border-bottom: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
	box-shadow: var(--shadow-card, 0 4px 24px rgba(0, 0, 0, 0.4));
}

.ritual-pwa-install-banner__texto {
	margin: 0;
	flex: 1 1 220px;
	font-family: var(--font-body, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
	font-size: var(--font-size-small, 0.875rem);
	color: var(--color-text-primary, #F0EDE8);
}

.ritual-pwa-install-banner__acoes {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm, 8px);
	flex: 0 0 auto;
}

.ritual-pwa-install-banner__botao {
	font-family: var(--font-body, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
	font-size: var(--font-size-small, 0.875rem);
	font-weight: 600;
	color: var(--color-bg-primary, #0D0F1E);
	background: var(--color-accent-gold, #C9923A);
	border: none;
	border-radius: var(--radius-full, 9999px);
	padding: var(--spacing-xs, 4px) var(--spacing-md, 16px);
	cursor: pointer;
}

.ritual-pwa-install-banner__fechar {
	font-family: var(--font-body, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
	font-size: var(--font-size-small, 0.875rem);
	color: var(--color-text-secondary, #A8A5B0);
	background: transparent;
	border: none;
	cursor: pointer;
	padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);
}