/*
 * Reset mínimo, escopado ao container do app (#ritual-app), para não
 * vazar estilo para o resto do site nem herdar estilo do tema do WP.
 *
 * As duas regras de html/body abaixo são a única exceção ao escopo: sem
 * elas, a largura/margem padrão que o CSS global do tema aplica a esses
 * dois elementos (ex.: `body { max-width: ...; margin: 0 auto }` de
 * layouts de blog) pode sobrar mesmo depois que `AppRouter` para de
 * enfileirar o CSS do tema, e isso quebra a centralização de qualquer
 * tela do app (ex.: `.ritual-conta`, que centraliza via `margin: 0 auto`
 * assumindo que o body ocupa 100% da viewport). Corrige a causa raiz;
 * `AppRouter::strip_foreign_assets()` cobre o CSS do tema em si.
 */

html,
body {
	margin: 0;
	padding: 0;
	width: 100%;
}

/*
 * Correção (validação M4, item 1): este seletor usava `#ritual-app *`
 * puro, que carrega um ID na composição (especificidade 1-0-0) e por
 * isso vencia QUALQUER regra de classe de módulo — inclusive
 * `.ritual-biblioteca`/`.ritual-conta { margin: 0 auto; }`, cancelando a
 * centralização dessas telas (o login escapava do bug só porque
 * centraliza via flexbox, não via margin). `:where()` zera a
 * especificidade do seletor inteiro, então o reset continua limpando
 * margin/padding por padrão, mas qualquer regra de componente — atual
 * ou futura, sem precisar lembrar disso de novo — vence naturalmente.
 */
:where(
	#ritual-app,
	#ritual-app *,
	#ritual-app *::before,
	#ritual-app *::after
) {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

#ritual-app {
	min-height: 100vh;
	background: var(--color-bg-primary);
	color: var(--color-text-primary);
	font-family: var(--font-body);
	font-size: var(--font-size-body);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

#ritual-app img {
	max-width: 100%;
	display: block;
}

#ritual-app button {
	font: inherit;
	color: inherit;
	background: none;
	border: none;
	cursor: pointer;
}

#ritual-app a {
	color: inherit;
	text-decoration: none;
}

#ritual-app ul,
#ritual-app ol {
	list-style: none;
}

.ritual-app__noscript {
	padding: var(--spacing-lg, 24px);
	text-align: center;
}

.ritual-app__loading {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
}

.ritual-app__loading-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--color-accent-gold);
	animation: ritual-app-pulse 1.2s ease-in-out infinite;
}

@keyframes ritual-app-pulse {
	0%, 100% { opacity: 0.3; transform: scale(0.85); }
	50% { opacity: 1; transform: scale(1); }
}