/* As peças que a home e as telas de investimento desenham iguais: a faixa
   empilhada de áreas com a lista que a acompanha, e a dobra que esconde o
   conteúdo longo até alguém pedir.

   Estavam no home.css e saíram de lá quando cada uma passou a servir a segunda
   tela. Mudança aqui aparece nas duas, que é justamente o motivo de o arquivo
   existir: a mesma área com a mesma cor, e o mesmo controle de dobra com o
   mesmo comportamento, nas duas pontas do site. */

/* Faixa empilhada: a composição inteira numa barra só, sem trilha vazia em
   lugar nenhum. Blocos chapados de canto reto, encostados, como no folder.
   flex-grow com base zero: assim a soma das fatias ocupa a largura exata da
   faixa, sem arredondamento sobrando na ponta. */
.jw-faixa { display: flex; height: 62px; overflow: hidden; }
.jw-faixa__bloco { flex: var(--jw-fatia) 1 0; min-width: 2px; }

/* O rótulo da fatia: o nome da área e a porcentagem, no ponteiro e no toque.

   Existe porque a faixa sozinha não diz o que cada cor é, e uma fatia de 0,8% é
   indistinguível de uma de 1%. Quem carrega o dado continua sendo a lista logo
   abaixo, por extenso: isto é melhoria, não requisito. Sem JavaScript a faixa
   segue desenhada e a lista segue completa, e o rótulo simplesmente não aparece.

   Ele mora FORA da faixa, num campo em volta, porque a faixa é aria-hidden e
   tem overflow: hidden. Fora dela, nada aqui entra na árvore de acessibilidade
   nem na ordem de tabulação, e o rótulo pode passar por cima das bordas.

   Só a página da cidade traz o campo e o script que o move. Na home a faixa
   continua exatamente como era. */
.jw-faixa-campo { position: relative; }

/* Nasce fora do fluxo e invisível, e é assim que ele não custa salto de layout
   nenhum: não é criado nem revelado depois da pintura, só ganha opacidade.

   Fica LOGO ABAIXO da faixa, e não em cima dela: dentro da faixa ele tapava
   justamente as fatias finas que existe para explicar, e quando é empurrado
   para a ponta, para não vazar, ele tapa quatro ou cinco de uma vez. Aqui ele
   cabe no vão de 28px entre a faixa e a lista. */
.jw-faixa__rotulo {
	position: absolute; top: calc(100% + 14px); left: 0;
	transform: translate(-50%, -50%);
	/* Sem isto o ponteiro entraria nele em vez de na fatia, e o rótulo sumiria e
	   voltaria a cada movimento do mouse. */
	pointer-events: none;
	display: flex; align-items: center; gap: 7px;
	padding: 5px 9px; background: #FFFFFF; color: #004F5F;
	font-size: .78rem; line-height: 1.2; white-space: nowrap;
	box-shadow: 0 1px 8px rgba(0, 30, 36, .28);
	opacity: 0; visibility: hidden;
	transition: opacity .14s ease;
}
.jw-faixa__rotulo.is-visivel { opacity: 1; visibility: visible; }
/* O ponto repete a cor da fatia apontada. Quando o rótulo é empurrado para
   dentro da faixa, para não vazar pela borda, ele deixa de estar exatamente
   sobre a fatia, e é o ponto que segura a ligação. */
.jw-faixa__ponto { width: 10px; height: 10px; flex: 0 0 auto; background: currentColor; }

/* O destaque nos dois sentidos: apontar a fatia acende a linha da lista, e
   apontar ou focar a linha acende a fatia. Quem casa uma com a outra é o
   data-jw-area, o mesmo índice nas duas, escrito pelo PHP no mesmo laço.

   O destaque tem de ser um GANHO da fatia apontada, não só perda das outras.
   Só apagar as vizinhas foi a primeira tentativa e desbotava a faixa inteira:
   a meio tom, o lime deixava de ser lime e a composição perdia a identidade
   justo no instante em que se olha para ela. Pior nas áreas de cor clara, como
   Educação, onde apagar o resto não faz a apontada aparecer.

   Então as vizinhas recuam de altura e perdem só um quarto do tom, e a
   apontada fica inteira e passa a ser a única de altura cheia. Recuo por
   transform, que não mexe no fluxo: a largura de cada fatia continua sendo a
   porcentagem dela, e é a largura que carrega o dado. Vale para fatia de 2px
   igual, porque não depende de área para brilhar. */
.jw-faixa.is-apontando .jw-faixa__bloco {
	opacity: .75;
	transform: scaleY(.74); transform-origin: bottom;
	transition: opacity .14s ease, transform .14s ease;
}
.jw-faixa.is-apontando .jw-faixa__bloco.is-ativo { opacity: 1; transform: none; }
.jw-areas__item.is-ativo { background: #F4F7F9; }

/* Movimento reduzido: o destaque continua acontecendo, sem a transição. */
@media (prefers-reduced-motion: reduce) {
	.jw-faixa__rotulo,
	.jw-faixa.is-apontando .jw-faixa__bloco { transition: none; }
}

/* A lista é onde o dado mora e onde toda área tem o mesmo tamanho de linha,
   com valor por extenso. Uma fatia pequena continua sendo pequena, mas para de
   parecer abandono. */
.jw-areas { list-style: none; margin: 28px 0 0; padding: 0; }
.jw-areas__item {
	display: grid; grid-template-columns: auto 1fr auto;
	align-items: baseline; gap: 2px 12px;
	padding: 11px 0; border-bottom: 1px solid #E5EBEE;
}
.jw-areas__item:first-child { border-top: 1px solid #E5EBEE; }
.jw-areas__cor { width: 12px; height: 12px; align-self: center; }
.jw-areas__nome { color: #004F5F; font-size: .95rem; }
/* nowrap porque o valor é um número inteiro, não uma frase: quebrar dentro
   dele deixaria o "R$" ou os centavos órfãos numa linha só. */
.jw-areas__valor { grid-column: 2; font-variant-numeric: tabular-nums; font-size: .8rem; color: #3B4C52; white-space: nowrap; }
/* Peso 400 explícito porque a fonte display só tem esse peso. Herdar negrito
   de um título ou de um <strong> deixava a letra falsificada pelo navegador,
   lavada e com contorno. */
.jw-areas__fatia {
	grid-column: 3; grid-row: 1 / span 2; align-self: center;
	font-family: var(--wp--preset--font-family--display); font-size: 1.35rem; font-weight: 400;
	color: #004F5F; font-variant-numeric: tabular-nums; min-width: 3.4em; text-align: right;
}

/* A dobra: "Ler a trajetória completa" na home, "Ver os outros N repasses" na
   página da cidade. Quem anima a altura é o quem-e.js; sem JavaScript o
   <details> abre e fecha sozinho, de uma vez, e o conteúdo nunca deixa de
   existir no HTML. */
.jw-trajetoria { margin: 26px 0 0; }
.jw-trajetoria__botao {
	display: inline-flex; align-items: center; gap: 12px;
	cursor: pointer; color: #0369A6; font-weight: 600;
	padding: 6px 0; list-style: none;
}
.jw-trajetoria__botao::-webkit-details-marker { display: none; }
.jw-trajetoria__rotulo { text-underline-offset: .25em; text-decoration-thickness: 2px; }
.jw-trajetoria__botao:hover .jw-trajetoria__rotulo { text-decoration: underline; }
.jw-trajetoria__botao:focus-visible { outline: 3px solid #0369A6; outline-offset: 4px; }

/* O sinal é um quadrado chapado com um "mais" recortado, que vira "menos"
   girando quando abre. Quadrado e não seta, pelo mesmo motivo dos blocos. */
.jw-trajetoria__sinal { position: relative; flex: 0 0 auto; width: 26px; height: 26px; background: #85E234; }
.jw-trajetoria__sinal::before,
.jw-trajetoria__sinal::after {
	content: ""; position: absolute; inset: 50% 6px auto 6px; height: 3px;
	background: #004F5F; transform: translateY(-50%);
	transition: transform .38s cubic-bezier(.16, 1, .3, 1);
}
.jw-trajetoria__sinal::after { transform: translateY(-50%) rotate(90deg); }
.jw-trajetoria[open] .jw-trajetoria__sinal::after { transform: translateY(-50%) rotate(0deg); }

.jw-trajetoria__caixa { overflow: hidden; }
.jw-trajetoria__conteudo { padding: 22px 24px 4px; background: #F4F7F9; margin-top: 12px; }
.jw-trajetoria__conteudo p { color: #3B4C52; margin: 0 0 18px; max-width: 52ch; }

@media (prefers-reduced-motion: reduce) {
	.jw-trajetoria__sinal::before,
	.jw-trajetoria__sinal::after { transition: none; }
}