/*
 * Metron — as telas.
 *
 * Terceiro e último arquivo da cascata: o que é específico de uma tela. O que
 * aparece em mais de uma é componente e mora em componentes.css — foi para lá
 * que `.mtr-lista` e `.mtr-item` voltaram, depois de passarem um tempo aqui
 * sendo usadas por todas as quatro telas e por quase toda folha.
 */


/* ── A manchete ──────────────────────────────────────────────────────────── */

/* O herói é a DATA, não o saldo. É a promessa do produto: os outros apps
   contam o passado, este diz a data em que o dinheiro acaba.

   Alinhada à esquerda, não ao centro. Centralizar um bloco de três linhas de
   comprimentos diferentes cria três eixos ópticos e nenhum deles coincide com
   a coluna em que o resto da tela está lendo. */
.mtr-manchete {
	padding: var(--mtr-e-5) 0 var(--mtr-e-6);
	border-bottom: 1px solid var(--mtr-pauta-forte);
}

.mtr-manchete__rotulo {
	margin: 0;
	font-size: var(--mtr-t-base);
	color: var(--mtr-tinta-2);
}

/* 44px em Fraunces. O eixo óptico da fonte sobe o contraste sozinho neste
   tamanho: a mesma família que desenha a meta de 13px vira um display aqui,
   e é isso que dá personalidade sem precisar de uma segunda fonte. */
.mtr-manchete__data {
	margin: var(--mtr-e-1) 0 var(--mtr-e-3);
	font-family: var(--mtr-fonte-titulo);
	font-size: var(--mtr-t-manchete);
	font-weight: var(--mtr-peso-medio);
	line-height: var(--mtr-lh-apertada);
	letter-spacing: var(--mtr-ls-manchete);
	color: var(--mtr-tinta);
	text-wrap: balance;
}

.mtr-manchete--alerta .mtr-manchete__data {
	color: var(--mtr-alerta);
}

.mtr-manchete--critico .mtr-manchete__data {
	color: var(--mtr-saida);
}

.mtr-manchete__apoio {
	margin: 0;
	font-size: var(--mtr-t-base);
	color: var(--mtr-tinta-2);
	max-width: 42ch;
}

.mtr-manchete__apoio strong {
	font-weight: var(--mtr-peso-medio);
	color: var(--mtr-tinta);
}

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

/* ── Extrato ─────────────────────────────────────────────────────────────── */

/* O cabeçalho do dia é a entrada do livro: data à esquerda, líquido do dia na
   mesma coluna em que os valores das linhas caem. */
.mtr-dia {
	margin-top: var(--mtr-e-5);
}

.mtr-dia__cabeca {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding-bottom: var(--mtr-e-2);
	font-size: var(--mtr-t-mini);
	font-weight: var(--mtr-peso-medio);
	color: var(--mtr-tinta-2);
}

/* ── Panorama ────────────────────────────────────────────────────────────── */

/* Cada indicador tem o NÚMERO como herói e a frase como apoio. Antes era o
   contrário: uma parede de parágrafos de 15px, todos do mesmo peso, que é
   onde a camada de Administração do app se perdia. */
.mtr-indicador {
	padding: var(--mtr-e-4) 0;
	border-top: 1px solid var(--mtr-pauta);
}

.mtr-indicador:first-child {
	border-top: 0;
}

.mtr-indicador__valor {
	font-family: var(--mtr-fonte-titulo);
	font-size: var(--mtr-t-numero);
	font-weight: var(--mtr-peso-medio);
	line-height: var(--mtr-lh-apertada);
	letter-spacing: var(--mtr-ls-titulo);
	font-variant-numeric: tabular-nums;
}

.mtr-indicador--bom .mtr-indicador__valor {
	color: var(--mtr-entrada);
}

.mtr-indicador--ruim .mtr-indicador__valor {
	color: var(--mtr-saida);
}

.mtr-indicador__frase {
	margin: var(--mtr-e-1) 0 0;
	font-size: var(--mtr-t-base);
	color: var(--mtr-tinta-2);
	max-width: 46ch;
}

/* Uma categoria do mês: nome, valor e a fatia como barra. NÃO é o mesmo que
   `.mtr-insight` — os dois dividiam a classe sendo coisas sem relação, uma
   categoria com barra aqui e uma frase de alerta de conta no Fluxo. Um
   componente servindo a dois assuntos é como um sistema começa a derreter:
   mexer num quebra o outro, e nada no nome avisa. */
.mtr-categoria {
	padding: var(--mtr-e-3) 0;
	border-top: 1px solid var(--mtr-pauta);
	font-size: var(--mtr-t-base);
}

.mtr-categoria:first-child {
	border-top: 0;
}

/* Cada insight é UMA frase, não um gráfico. Vive no Fluxo, no aviso por
   conta. */
.mtr-insight {
	padding: var(--mtr-e-3) 0;
	border-top: 1px solid var(--mtr-pauta);
	font-size: var(--mtr-t-base);
}

.mtr-insight:first-child {
	border-top: 0;
}

.mtr-insight strong {
	font-weight: var(--mtr-peso-medio);
}
/* ── Fluxo: o gráfico ────────────────────────────────────────────────────── */

/* A altura tem de casar com o W/H do grafico.js: o SVG é desenhado em unidades
   de usuário e NÃO usa `preserveAspectRatio="none"`. E a matemática do arraste
   (grafico.js, em `ler()`) depende desse casamento — se os dois se separarem,
   o desenho é centralizado com tarja e o dia lido sai deslocado do dedo, sem
   nada na tela denunciando.

   340/232 e não 340/170: ~165px era pouco para a promessa central do produto
   num celular. Esta é a figura que responde "quando falta dinheiro"; ela paga
   a altura.

   Havia TRÊS declarações de .mtr-grafico com alturas que se contradiziam
   (duas em componentes.css, uma aqui) e a ordem da cascata decidia qual valia. */
.mtr-grafico {
	width: 100%;
	height: auto;
	aspect-ratio: 340 / 232;
	display: block;
	touch-action: pan-y;
	cursor: crosshair;
}

/* `hidden` não é atributo de apresentação em SVG: num <g> ele não esconde
   nada, e o cursor do arraste ficava desenhado parado no canto esquerdo. */
.mtr-grafico [hidden] {
	display: none;
}

/* A espessura vem do token, como no resto do app. Era `stroke-width="2"`
   escrito no markup — a exceção não documentada à regra de que traço nunca
   vem de atributo. */
.mtr-grafico__linha {
	fill: none;
	stroke: var(--mtr-tinta);
	stroke-width: var(--mtr-traco-forte);
	stroke-linejoin: round;
	stroke-linecap: round;
}

/* A régua: base, divisa de mês e os rótulos. Fio fino, tinta fraca — a linha
   do saldo é a figura e a régua não pode competir com ela. */
.mtr-grafico__base,
.mtr-grafico__divisa,
.mtr-grafico__zero {
	stroke: var(--mtr-pauta-forte);
	stroke-width: 1;
}

.mtr-grafico__divisa {
	stroke: var(--mtr-pauta);
	stroke-dasharray: 2 3;
}

.mtr-grafico__minimo {
	stroke: var(--mtr-alerta);
	stroke-width: 1;
	stroke-dasharray: 3 3;
}

/* O menor tipo do app, e agora pelo token: eram cinco `font-size="9"` escritos
   à mão dentro do JS, fora da escala inteira. */
.mtr-grafico__rotulo {
	font-family: var(--mtr-fonte);
	font-size: var(--mtr-t-micro);
	fill: var(--mtr-tinta-3);
}

.mtr-grafico__rotulo--alerta {
	fill: var(--mtr-alerta);
}

/* O preenchimento só existe onde há notícia — ver o cabeçalho do grafico.js.
   Era um degradê de tinta cobrindo metade do cartão sem dizer nada. */
.mtr-grafico__area--alerta {
	fill: var(--mtr-alerta);
	opacity: 0.12;
}

.mtr-grafico__area--negativa {
	fill: var(--mtr-saida);
	opacity: 0.16;
}

/* Os dias em que alguma coisa mexe no caixa. */
.mtr-grafico__tique {
	stroke-width: var(--mtr-traco);
	stroke-linecap: round;
	opacity: 0.55;
}

.mtr-grafico__tique--saida {
	stroke: var(--mtr-saida);
}

.mtr-grafico__tique--entrada {
	stroke: var(--mtr-entrada);
}

.mtr-grafico__marca {
	fill: var(--mtr-tinta);
}

.mtr-grafico__marca--alerta {
	fill: var(--mtr-alerta);
}

.mtr-grafico__marca--critica {
	fill: var(--mtr-saida);
}

.mtr-grafico__partida {
	fill: var(--mtr-tinta);
}

.mtr-grafico__cursor {
	stroke: var(--mtr-tinta);
	stroke-width: 1;
}

.mtr-grafico__cursor-ponto {
	fill: var(--mtr-papel);
	stroke: var(--mtr-tinta);
	stroke-width: var(--mtr-traco-forte);
}

/* ── Fluxo: a leitura do dedo ────────────────────────────────────────────── */

.mtr-cartao--grafico {
	padding: var(--mtr-e-3);

	/* Arrastar sobre o gráfico não pode selecionar o texto da leitura: o
	   dedo que vai ler um dia acabaria pintando a legenda. */
	-webkit-user-select: none;
	user-select: none;
}

/* A linha que o arraste preenche, e que agora mora ABAIXO do desenho.
   Morava acima, onde "arraste para ler um dia" era a primeira coisa que o
   olho encontrava e se lia como o TÍTULO do cartão — sendo uma dica de
   interação. Embaixo é onde o dedo já está.

   Reserva a altura desde o início para o gráfico não pular no primeiro toque. */
.mtr-leitura {
	display: flex;
	align-items: baseline;
	gap: var(--mtr-e-2);
	min-height: var(--mtr-toque-mini);
	padding-top: var(--mtr-e-2);
	margin-top: var(--mtr-e-1);
	border-top: 1px solid var(--mtr-pauta);
	font-size: var(--mtr-t-mini);
	color: var(--mtr-tinta-3);
}

.mtr-leitura[data-ativo] {
	color: var(--mtr-tinta);
}

/* A data é o que ancora a leitura, então ela não encolhe. */
.mtr-leitura__dia {
	flex: none;
	font-weight: var(--mtr-peso-medio);
	font-variant-numeric: tabular-nums;
}

/* O fato do dia fica no meio e cede primeiro: um nome comprido não pode
   empurrar o saldo para fora da coluna da direita. */
.mtr-leitura__fato {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--mtr-tinta-2);
}

.mtr-leitura__resto {
	color: var(--mtr-tinta-3);
}

/* O saldo cai na mesma coluna à direita em que todo valor do app cai. */
.mtr-leitura__saldo {
	flex: none;
	margin-left: auto;
	font-weight: var(--mtr-peso-medio);
}

/* ── Fluxo: o alternador de horizonte ────────────────────────────────────── */

/* O número de colunas vem do dado (o horizonte salvo entra na lista), e era o
   único `style=""` de GEOMETRIA que sobrava no app — a regra do CLAUDE.md diz
   inline só para cor vinda do dado. */
.mtr-alternador--horizonte {
	grid-template-columns: repeat(var(--mtr-colunas, 3), 1fr);
	margin-bottom: var(--mtr-e-3);
}

/* ── Fluxo: a frase que legenda o gráfico ────────────────────────────────── */

/* O que a manchete dizia, em uma linha. A manchete de 44px saiu daqui porque
   era a MESMA da Hoje, com o mesmo texto: quem vinha de lá reencontrava o
   bloco inteiro e as duas telas liam-se como uma só.

   Aqui o herói é o desenho; esta frase é o apoio imediato dele, e por isso
   vem logo abaixo do cartão, ainda dentro do mesmo respiro. */
.mtr-grafico-apoio {
	margin: var(--mtr-e-3) 0 0;
	font-size: var(--mtr-t-base);
	line-height: var(--mtr-lh-base);
	color: var(--mtr-tinta-2);
	max-width: 46ch;
}

/* A data continua sendo o que importa na frase, mesmo sem os 44px. */
.mtr-grafico-apoio__data {
	font-family: var(--mtr-fonte-titulo);
	font-weight: var(--mtr-peso-medio);
	color: var(--mtr-tinta);
}

.mtr-grafico-apoio .mtr-num {
	font-weight: var(--mtr-peso-medio);
	color: var(--mtr-tinta);
}

/* O alerta como COR DE TEXTO. A classe `.mtr-alerta` não existe — só o token
   —, e sem isto o caso de ruptura ficava igual ao caso bom na única peça da
   tela que deveria mudar de tom. */
.mtr-alerta-texto {
	color: var(--mtr-alerta);
}

/* A dica some assim que o dedo encosta: ela ocupa a linha inteira e, com um
   valor lido ao lado, viraria ruído. */
.mtr-leitura__dica {
	flex: 1;
}

.mtr-leitura[data-ativo] .mtr-leitura__dica {
	display: none;
}