/* ===========================================================================
   Confere.la · GEOGRAFIA
   A folha da frente 2: a tela do mapa e as 27 páginas de estado. Ela herda
   os tokens de `/sistema.css` e não redefine nenhum: o que está aqui é
   posição, e posição é assunto de tela, como diz o cabeçalho daquela folha.

   `arena.css` não entra aqui e não pode entrar: aquela folha é da arena e é
   estrutural até o osso (fundo preto forçado, página sem rolagem, elemento
   suprimido). Uma página de estado que a importasse nasceria preta e travada.

   O alvo do desenho é o telefone de 375 por 812. Toda consulta de mídia
   abaixo sobe (`min-width`): a tela pequena é o estado natural da folha, e a
   grande é a exceção que ganha colunas. Nenhuma consulta desce.
   =========================================================================== */

/* ============================================================== 1 · A CASCA
   A dívida que este bloco declarava foi paga em 31/08.

   O que estava escrito aqui: "guia, mapa e elenco vão escrever a mesma casca
   três vezes e vão divergir na primeira mudança. A saída é mover este bloco
   para uma `casca.css` e apagá-lo daqui." A previsão estava certa: quando
   fomos olhar, as três já divergiam em altura de aba, forma da aba acesa e no
   topo grudar ou não no alto. A folha existe (`/casca.css`, carregada por
   `casca()` em toda tela) e o bloco saiu inteiro, como estava previsto.

   Fica só o que é DESTA tela. `body` continua aqui porque o mapa é a única
   tela que pede a superfície de trás em vez do papel: o desenho do país é um
   objeto sobre a mesa, não uma folha impressa nela.
   ======================================================================= */

body {
  background: var(--bg-2);
}

.conteudo {
  max-width: var(--coluna);
  margin: 0 auto;
  /* O topo é fixo: o conteúdo desce a altura dele antes do próprio respiro.
     `calc` sobre o token, nunca número solto. */
  padding: calc(var(--topo-h) + var(--gap-lg)) var(--pad-x) calc(var(--gap-lg) * 2);
}

/* ======================================================= 2 · O BLOCO BASE
   Toda seção das duas telas é um bloco: uma régua em cima, um título e o
   conteúdo. A profundidade vem daí, de régua e moldura, nunca de sombra
   difusa, que está fora do sistema visual.
   ======================================================================= */

.bloco {
  margin-top: var(--gap-lg);
  padding-top: var(--gap-lg);
  border-top: var(--rule) solid var(--line);
}

.bloco-sub {
  margin: var(--gap-lg) 0 var(--gap-md);
  color: var(--ink-3);
}

.bloco-sub:first-of-type {
  margin-top: var(--gap-md);
}

/* O bloco que não some: a camada nacional. A moldura inteira, e não só a
   régua de cima, é o que diz na tela que aquilo ali é fixo. */
.bloco--fixo {
  padding: var(--gap-lg) var(--gap-md);
  border: 2px solid var(--line-hard);
  border-radius: var(--radius);
  background: var(--surface);
}

/* A resposta escrita para quando não há nada. Um estado sem transmissão
   marcada diz isso com todas as letras: cinza mudo parece defeito. */
.vazio {
  margin-top: var(--gap-md);
  padding: var(--gap-md);
  border: var(--rule) dashed var(--line);
  border-radius: var(--radius-sm);
  color: var(--muted);
}

/* ================================================== 3 · A TELA DO MAPA
   A ordem no documento é regra dura desta frente e está no HTML, não aqui:
   busca, lista, mapa. Nenhuma regra abaixo reordena nada, porque `order` de
   flexbox move o desenho e deixa o teclado para trás, e aí a tela mente
   para quem navega por tabulação.
   ======================================================================= */

.mapa-topo > * + * {
  margin-top: var(--gap-md);
}

.mapa-numeros {
  color: var(--muted);
}

/* --- a busca de cidade ------------------------------------------------- */

.busca-forma {
  display: grid;
  gap: var(--gap-sm);
  margin-top: var(--gap-md);
}

.busca-campo {
  width: 100%;
  min-height: var(--toque);
  padding: 0 var(--gap-md);
  border: 2px solid var(--line-hard);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--sans);
  /* 16px é o piso que impede o telefone de dar zoom ao focar o campo. */
  font-size: 16px;
}

.busca-campo::placeholder {
  color: var(--faint);
}

.busca-campo:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.busca-estado {
  min-height: 1.4em;
  margin-top: var(--gap-sm);
}

.busca-lista {
  margin: var(--gap-sm) 0 0;
  padding: 0;
  list-style: none;
}

.busca-lista:not(:empty) {
  border: var(--rule) solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.busca-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-md);
  min-height: var(--toque);
  padding: var(--gap-sm) var(--gap-md);
  border-bottom: var(--rule) solid var(--line-soft);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
}

.busca-lista li:last-child .busca-item {
  border-bottom: 0;
}

.busca-item:hover,
.busca-item:focus-visible {
  background: var(--bg-3);
  outline: none;
}

.busca-item:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}

.busca-uf {
  flex: none;
  color: var(--muted);
}

/* --- a lista dos 27 ---------------------------------------------------- */

.regiao {
  margin-top: var(--gap-lg);
}

.regiao > h3 {
  margin: 0 0 var(--gap-sm);
}

.uf-lista {
  display: grid;
  gap: var(--gap-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* O botão de estado carrega quatro linhas porque a pergunta de quem chega é
   dupla: quem disputa aqui, e tem alguma coisa marcada. Estado sem evento
   diz isso por escrito, na quarta linha. */
.uf-botao {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    'sigla nome'
    'sigla disputa'
    'sigla grade';
  align-items: center;
  column-gap: var(--gap-md);
  row-gap: 2px;
  min-height: var(--toque);
  padding: var(--gap-sm) var(--gap-md);
  border: var(--rule) solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
}

.uf-botao:hover {
  border-color: var(--line-hard);
}

.uf-botao:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.uf-sigla {
  grid-area: sigla;
  align-self: center;
  padding: var(--gap-sm);
  border-radius: var(--radius-sm);
  background: var(--chip-bg);
  color: var(--chip-ink);
  font-size: var(--t-nota);
}

.uf-nome {
  grid-area: nome;
  font-weight: var(--peso-forte);
}

.uf-disputa {
  grid-area: disputa;
  color: var(--muted);
}

.uf-grade {
  grid-area: grade;
  color: var(--ink-3);
}

.uf-grade[data-vazio] {
  color: var(--faint);
}

/* --- o desenho --------------------------------------------------------- */

.mapa-caixa {
  margin-top: var(--gap-md);
}

.brasil {
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
  margin: 0 auto;
}

/* Os quatro tons do mapa nascem aqui e não no `:root`: são vocabulário desta
   tela, e uma folha de tela não escreve na folha de tokens. */
.brasil {
  --uf-massa: var(--surface);
  --uf-massa-evento: var(--ink-3);
  --uf-linha: var(--line-hard);
  --uf-aceso: var(--chip-bg);
}

.brasil .uf {
  fill: var(--uf-massa);
  stroke: var(--uf-linha);
  /* A divisa tem espessura de tela, não de desenho. Sem isto, a mesma linha
     some no telefone (o mapa cabe em 343 pixels e mil unidades viram um
     terço de pixel) e engorda no monitor. Com isto, ela vale um pixel em
     qualquer largura, que é o que uma divisa precisa ser. */
  vector-effect: non-scaling-stroke;
  stroke-width: 1;
  stroke-linejoin: round;
  cursor: pointer;
  transition: fill var(--tempo) var(--ease);
}

/* Estado com transmissão marcada ganha massa. É a única diferença de tinta
   do mapa, e ela responde à mesma pergunta da quarta linha da lista. */
.brasil .uf[data-evento='1'] {
  fill: var(--uf-massa-evento);
}

.brasil .uf[data-aceso] {
  fill: var(--uf-aceso);
  stroke-width: 2;
}

/* O grupo é o único ponto de tabulação do desenho: 27 paradas de teclado
   seriam uma armadilha, e as setas fazem o trabalho de andar. */
#brasil-ufs:focus {
  outline: none;
}

#brasil-ufs:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

/* A leitura fala o que o desenho mostra. Ela é o que dá ao mapa uma saída
   para quem navega ouvindo a tela, já que os caminhos são decorativos. */
.mapa-leitura {
  min-height: calc(var(--toque) + var(--gap-sm));
  margin: var(--gap-md) 0 0;
  padding: var(--gap-md);
  border: var(--rule) solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-family: var(--mono);
  font-size: var(--t-nota);
  color: var(--ink-2);
}

.mapa-fonte {
  margin-top: var(--gap-lg);
  padding-top: var(--gap-md);
  border-top: var(--rule) solid var(--line-soft);
  color: var(--faint);
}

/* ================================================ 4 · A PÁGINA DE ESTADO */

.uf-topo > * + * {
  margin-top: var(--gap-md);
}

.uf-resumo {
  max-width: 62ch;
}

/* --- os candidatos ----------------------------------------------------- */

/* A GRADE DE COLUNAS SAIU DAQUI em 31/08. Onde ela estava agora corre uma
   prateleira, e a mecânica dela (`.fileira`, `.pista`, `.seta`) mora em
   `/prateleira.css`, a mesma da vitrine, do guia e do elenco. Uma quinta cópia
   de pista não nasce neste projeto.

   Esta página usa a VARIANTE DE DENTRO, porque a pista corre dentro de uma
   coluna de leitura que tem a lateral vendida ao lado, e não de borda a borda
   da janela.

   O que fica aqui é a largura de cada item, que é de cada tela: o cartão de
   candidato é um retrato de 400 por 533, e portanto mais estreito e mais alto
   que o cartão de transmissão, que é 16 por 9. */

.fileira--interna { margin-top: var(--gap-md); }

.pista--interna > li {
  flex: 0 0 clamp(148px, 17vw, 190px);
  scroll-snap-align: start;
  min-width: 0;
}

/* O card do candidato é escuro nos dois temas: é o objeto de marca do
   sistema, e no papel claro é ele que salta. No escuro ganha aresta para
   não sumir no fundo. */
.cand {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: var(--rule) solid var(--card-line);
  border-radius: var(--radius);
  background: var(--card-bg);
  color: var(--card-ink);
  overflow: hidden;
}

.cand-foto {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--card-bg-2);
}

.cand-foto--vazia {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: 44px;
  color: var(--card-mid);
}

.cand-texto {
  padding: var(--gap-md) var(--gap-sm) var(--gap-md) var(--gap-md);
}

.cand-cargo {
  color: var(--card-mid);
}

.cand-nome {
  margin: 4px 0 6px;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 400;
  line-height: var(--linha-titulo);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--card-ink);
}

.cand-legenda {
  color: var(--card-mid);
}

/* O vice mora dentro do cartão, na massa escura, e é a linha de menor peso
   das quatro: cargo, nome, número e vice, nesta ordem de voz. */
.cand-vice {
  margin: var(--gap-sm) 0 0;
  padding-top: var(--gap-sm);
  border-top: var(--rule) solid var(--card-mid);
  font-size: var(--t-nota);
  line-height: 1.4;
  color: var(--card-mid);
}

.cand-vice strong {
  color: var(--card-ink);
  font-weight: var(--peso-forte);
}

/* --- a agenda ---------------------------------------------------------- */

/* O item de agenda carrega uma capa 16 por 9 e uma manchete: ele é largo, não
   alto, e por isso não cabe na mesma medida do retrato de candidato. Os dois
   andam na mesma mecânica de pista e discordam só na largura, que é
   exatamente o que deve ser de cada tela. */
.pista--interna > .ev {
  flex-basis: clamp(232px, 26vw, 300px);
}

.ev {
  display: flex;
  flex-direction: column;
  border: var(--rule) solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.ev[data-vivo] {
  border-color: var(--line-hard);
  border-width: 2px;
}

.ev-capa {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--screen);
}

.ev-capa--vazia {
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--screen);
}

.ev-texto {
  /* ESTICA. Numa pista todo item tem a altura do mais alto, e sem isto a
     moldura do evento sem convidado terminava no meio da fileira enquanto a do
     vizinho ia até embaixo. Na grade antiga o `grid` resolvia isso sozinho. */
  flex: 1 1 auto;
  padding: var(--gap-md);
}

.ev-texto > * + * {
  margin-top: var(--gap-sm);
}

.ev-manchete {
  font-size: var(--t-corpo);
}

.ev-titulo {
  color: var(--ink);
}

.ev-canal,
.ev-quando {
  color: var(--muted);
}

/* O relógio tem duas metades: a contagem, que o navegador escreve e que só
   existe quando falta pouco, e a hora marcada, que já vem escrita. Elas
   ficam lado a lado e a contagem some sem deixar buraco quando está vazia. */
.ev-quando {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm);
}

.ev-conta:empty {
  display: none;
}

.ev-conta {
  color: var(--ink);
  font-weight: var(--peso-forte);
}

/* Quem o reconhecedor achou no anúncio da transmissão. É a informação que
   traz alguém a esta página, então ela tem a tinta cheia e não a apagada. */
.ev-gente {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm);
  margin: 0;
}

.ev-quem {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 9px;
  border: var(--rule) solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  font-size: var(--t-nota);
  font-weight: var(--peso-forte);
  color: var(--ink);
}

/* --- trocar de estado -------------------------------------------------- */

.troca-grade {
  display: grid;
  gap: var(--gap-lg);
  margin-top: var(--gap-md);
}

.troca-regiao h3 {
  margin: 0 0 var(--gap-sm);
}

.troca-regiao ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.troca-item {
  display: inline-flex;
  align-items: center;
  min-height: var(--toque);
  padding: 0 var(--gap-md);
  border: var(--rule) solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  font-size: var(--t-nota);
}

a.troca-item:hover {
  border-color: var(--line-hard);
}

a.troca-item:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.troca-item[aria-current='page'] {
  background: var(--chip-bg);
  border-color: var(--chip-bg);
  color: var(--chip-ink);
  font-weight: var(--peso-forte);
}

/* ============================================ 5 · AS TELAS QUE CRESCERAM
   Daqui para baixo é ampliação. Tudo acima já funciona sozinho em 375.
   ======================================================================= */

@media (min-width: 600px) {
  .uf-lista {
    grid-template-columns: 1fr 1fr;
  }

}

@media (min-width: 900px) {
  .uf-lista {
    grid-template-columns: repeat(3, 1fr);
  }

  .bloco--fixo {
    padding: var(--gap-lg);
  }

  /* Na tela larga o desenho e a leitura convivem lado a lado: o mapa deixa
     de ser uma parada da rolagem e vira painel. */
  .mapa-caixa {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
    align-items: start;
    gap: var(--gutter);
  }

  .mapa-leitura {
    margin-top: 0;
  }

  .troca-grade {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* A lateral do estado só é lateral onde cabe. Abaixo de 1000px o anúncio fica
   na rolagem, logo depois da lista de candidatos, que é exatamente o que o
   cadastro promete ao anunciante; daqui para cima ele vira coluna de verdade.
   Sem isto, o formato meia-página (300 por 600) caía no meio da leitura de uma
   página de coluna única e empurrava a agenda 600px para baixo. */
@media (min-width: 1000px) {
  .uf-coluna {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 332px;
    align-items: start;
    gap: var(--gutter);
  }

  .uf-coluna > .anuncio {
    position: sticky;
    top: var(--gap-lg);
    margin-top: 0;
  }
}

@media (min-width: 1100px) {
  .troca-grade {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ===================================================== 6 · MENOS MOVIMENTO
   Quem pediu menos movimento recebe menos movimento. Nada aqui carrega
   informação por si: a tinta do estado aceso continua trocando, só que sem
   a passagem. */

@media (prefers-reduced-motion: reduce) {
  .brasil .uf {
    transition: none;
  }
}