/*
 * Metron — o layout.
 *
 * Terceiro arquivo da cascata. A casca da página e o RITMO: a coluna de
 * leitura, as duas barras fixas, o botão flutuante, e os espaçamentos que
 * separam um assunto do seguinte.
 *
 * O ritmo mora aqui e não em componentes.css de propósito: `.mtr-secao` é a
 * peça mais usada do app (46 chamadas) e não desenha nada — só decide a que
 * distância um bloco fica do anterior. É layout, não componente.
 */

/* ── Layout do app ───────────────────────────────────────────────────────── */

.mtr-app {
	display: flex;
	flex-direction: column;
	min-height: 100svh;
}

.mtr-tela {
	flex: 1;
	padding: var(--mtr-e-4) var(--mtr-gutter);
	/* Espaço para a nav inferior E o botão flutuante não cobrirem o último
	   item: 56px do FAB mais o respiro dele. Sem isso o valor da última linha
	   de qualquer lista ficava escondido atrás do botão. */
	padding-bottom: calc(var(--mtr-nav-altura) + var(--mtr-safe-baixo) + var(--mtr-e-4) + var(--mtr-fab) + var(--mtr-e-4));
	max-width: var(--mtr-largura);
	width: 100%;
	margin: 0 auto;
}

/* Os títulos vão em Fraunces. O eixo óptico dela faz o trabalho sozinho: no
   tamanho de tela o contraste sobe e o desenho fica caracteristico, na meta de
   13px ela seria quase um texto de livro — por isso a meta não usa serif. */
.mtr-titulo-tela {
	font-family: var(--mtr-fonte-titulo);
	font-size: var(--mtr-t-tela);
	font-weight: var(--mtr-peso-forte);
	line-height: var(--mtr-lh-titulo);
	letter-spacing: var(--mtr-ls-manchete);
	margin-bottom: var(--mtr-e-4);
}

/* Rótulo de seção em caixa baixa, serif, do tamanho de um subtítulo de
   verdade. Era CAIXA ALTA com tracking — o tique mais reconhecível de
   interface gerada, e aqui ele empatava com a meta de 13px, deixando seção e
   metadado com o mesmo peso visual. */
.mtr-secao-rotulo {
	font-family: var(--mtr-fonte-titulo);
	font-size: var(--mtr-t-secao);
	font-weight: var(--mtr-peso-medio);
	line-height: var(--mtr-lh-titulo);
	letter-spacing: var(--mtr-ls-titulo);
	color: var(--mtr-tinta);
	margin-bottom: var(--mtr-e-2);
}

/* Rótulo e lista são UM bloco, não dois. A lista traz o próprio fio de topo,
   então rótulo seguido de lista desenhava um fio solto logo abaixo do texto e
   os dois liam-se como peças separadas. Aqui o rótulo assenta sobre o fio: a
   lista dispensa o dela e o par vira uma unidade. */
.mtr-secao-rotulo + .mtr-lista {
	border-top: 0;
}

/* O ritmo entre seções. Morava em nove `style="margin-top:…"` dentro do
   telas.js, ou seja: o espaçamento mais visível do app não era auditável
   lendo o CSS.

   São DOIS, não um. Com um valor só — e eram 46 chamadas de 32px — espaço
   igual significa importância igual: nada agrupa e nada separa, e a tela
   vira uma coluna contínua que obriga a LER para achar onde um assunto
   termina. O olho agrupa pelo espaço antes de ler; é esse o degrau que
   torna uma tela escaneável.

   `.mtr-secao` abre assunto novo. `--junto` continua o anterior: o bloco é
   outro, o assunto é o mesmo. */
.mtr-secao {
	margin-top: var(--mtr-e-6);
}

.mtr-secao--junto {
	margin-top: var(--mtr-e-4);
}

/* Nota de rodapé de bloco: a frase cinza que explica o que está ACIMA.

   Vai no degrau de CORPO, não no de meta. Prosa para ler não é metadado: as
   duas estavam em 13px junto com mais dezoito coisas, e era parte do motivo
   de a tela não ter relevo — o texto que explica tinha o mesmo tamanho do
   carimbo que acompanha um valor. */
.mtr-nota {
	font-size: var(--mtr-t-base);
	color: var(--mtr-tinta-3);
	margin: var(--mtr-e-2) 0 0;
	max-width: 46ch;
}

/* O par da nota: o parágrafo que explica o que vem ABAIXO — tipicamente
   antes de um campo ou de um botão. Os dois juntos substituem 21
   `style="margin-…"` escritos à mão pelo JS. */
.mtr-intro {
	font-size: var(--mtr-t-base);
	color: var(--mtr-tinta-2);
	margin: 0 0 var(--mtr-e-4);
	max-width: 46ch;
}

/* Um <a> com classe de botão não herda o centro do flex do mesmo jeito que
   um <button>, e precisa da margem que o irmão acima não dá. */
.mtr-nota-acao {
	justify-content: center;
	margin-top: var(--mtr-e-2);
}

/* O único botão vermelho do app, e o único destrutivo sem desfazer. */

/* ── Cabeçalho do app ────────────────────────────────────────────────────── */

/* Fica grudado no topo porque é onde perfil e tema moram, e a alternativa era
   rolar a lista inteira de volta para alcançá-los. 48px é o preço; com a nav
   embaixo são duas barras, e por isso esta é só uma linha.

   Sem backdrop-filter: a nav já paga esse custo, e dois elementos com blur
   numa tela que rola é onde o celular barato começa a engasgar. */
.mtr-topo {
	position: sticky;
	top: 0;
	z-index: var(--mtr-z-topo);
	background: var(--mtr-papel);
	border-bottom: 1px solid var(--mtr-pauta);
}

/* Alinhado com o conteúdo das telas, que tem o mesmo teto. */
.mtr-topo__dentro {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mtr-e-3);
	height: var(--mtr-topo-altura);
	max-width: var(--mtr-largura);
	margin: 0 auto;
	padding: 0 var(--mtr-gutter);
}

.mtr-topo__marca {
	display: flex;
	align-items: center;
	gap: var(--mtr-e-2);
	font-weight: var(--mtr-peso-forte);
	letter-spacing: var(--mtr-ls-titulo);
	color: var(--mtr-tinta);
}

.mtr-topo__marca svg {
	width: var(--mtr-icone);
	height: var(--mtr-icone);
	color: var(--mtr-destaque);
}

.mtr-topo__acoes {
	display: flex;
	align-items: center;
	gap: var(--mtr-e-1);
}

/* O piso de toque vale aqui também. Era 40px — uma exceção sem registro ao
   `--mtr-toque` que o próprio tokens.css diz ser "um piso, não sete". Cabe
   nos 48px da barra com 2px de folga de cada lado. */
.mtr-topo__botao {
	width: var(--mtr-toque);
	height: var(--mtr-toque);
	display: grid;
	place-items: center;
	border: 0;
	border-radius: var(--mtr-raio-cheio);
	background: transparent;
	color: var(--mtr-tinta-2);
	cursor: pointer;
	touch-action: manipulation;
}

.mtr-topo__botao:active {
	background: var(--mtr-papel-fundo);
}

/* O par sol/lua: um está sempre escondido. O botão oferece o tema OPOSTO ao
   que está na tela, que é o que se espera de um alternador. */
:root[data-tema='escuro'] .mtr-icone--se-claro,
:root[data-tema='claro'] .mtr-icone--se-escuro {
	display: none;
}


/* ── Navegação inferior ──────────────────────────────────────────────────── */

.mtr-nav {
	position: fixed;
	inset: auto 0 0 0;
	z-index: var(--mtr-z-nav);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	background: color-mix(in srgb, var(--mtr-papel-alto) 88%, transparent);
	backdrop-filter: saturate(180%) blur(12px);
	border-top: 1px solid var(--mtr-pauta);
	/* A área segura vira padding, senão no iPhone a nav fica debaixo da
	   barrinha de gesto. */
	padding-bottom: var(--mtr-safe-baixo);
	box-shadow: var(--mtr-sombra-3);
}

.mtr-nav__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	height: var(--mtr-nav-altura);
	background: none;
	border: 0;
	color: var(--mtr-tinta-3);
	font-size: var(--mtr-t-micro);
	font-weight: var(--mtr-peso-medio);
	cursor: pointer;
	user-select: none;
	touch-action: manipulation;
	transition: color var(--mtr-rapido) var(--mtr-curva);
}

.mtr-nav__item[aria-current='page'] {
	color: var(--mtr-destaque);
}


/* ── Botão flutuante de lançar ───────────────────────────────────────────── */

.mtr-fab {
	position: fixed;
	right: var(--mtr-gutter);
	bottom: calc(var(--mtr-nav-altura) + var(--mtr-safe-baixo) + var(--mtr-e-4));
	z-index: var(--mtr-z-fab);
	width: var(--mtr-fab);
	height: var(--mtr-fab);
	border: 0;
	border-radius: var(--mtr-raio-cheio);
	background: var(--mtr-destaque);
	color: var(--mtr-destaque-texto);
	box-shadow: var(--mtr-sombra-2);
	cursor: pointer;
	display: grid;
	place-items: center;
	touch-action: manipulation;
	transition: transform var(--mtr-rapido) var(--mtr-curva);
}

.mtr-fab:active {
	transform: scale(0.92);
}

.mtr-fab svg {
	width: var(--mtr-icone-forte);
	height: var(--mtr-icone-forte);
}


/* ── Cabeçalho de tela com ação ──────────────────────────────────────────── */

.mtr-cabeca {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mtr-e-3);
	margin-bottom: var(--mtr-e-4);
}

.mtr-cabeca .mtr-titulo-tela {
	margin-bottom: 0;
	min-width: 0;
}


/* ── Esperando dado novo ─────────────────────────────────────────────────── */

/* O cabeçalho fica firme: é onde estão o mês e as setas, e é justamente o que
   a pessoa está tocando quando a espera começa. O resto esmaece. Antes a tela
   inteira era substituída por "carregando…", então o alvo sumia debaixo do
   dedo a cada toque na seta. */
.mtr-tela[data-carregando] > *:not(.mtr-cabeca) {
	opacity: 0.4;
	pointer-events: none;
	transition: opacity var(--mtr-rapido) var(--mtr-curva);
}



/* ── A virada de assunto ─────────────────────────────────────────────────── */

/* Quando um bloco responde OUTRA pergunta que não a da tela. É o caso dos
   indicadores no rodapé do Panorama: eles falam do agora, e as setas acima
   escolhem um mês — duas coisas que não se somam.

   Um fio e um respiro maior, porque `.mtr-secao` (32px) é o mesmo que separa
   "Para onde foi" de "De onde veio", que são o MESMO assunto. Usar o mesmo
   valor para as duas relações é dizer que elas são iguais. */
.mtr-virada {
	margin-top: var(--mtr-e-7);
	padding-top: var(--mtr-e-5);
	border-top: 2px solid var(--mtr-pauta-forte);
}

/* A nota que explica o que vem ABAIXO, colada no rótulo que a antecede.
   A `.mtr-nota` normal explica o que está acima e por isso tem margem no
   topo; aqui o papel se inverte. */
.mtr-nota--acima {
	margin: calc(var(--mtr-e-1) * -1) 0 var(--mtr-e-4);
}