/* ===========================================================================
   Confere.la · TELA DO ELENCO
   A folha desta tela e de mais nenhuma. Os tokens, as vozes de texto e os dois
   temas vêm de `/sistema.css`, que entra antes desta em `casca()`. Aqui mora
   só o que é layout: onde a coisa fica, quanto ela mede, como ela responde ao
   dedo. Nenhum valor de cor é escrito à mão; tudo é token.

   O desenho é de telefone. Toda medida de base é a de 375 de largura, e as
   três ampliações no fim do arquivo sobem por `min-width`. Nenhuma consulta
   desce: a tela grande é a exceção, não o ponto de partida.

   Por que o cartão daqui não é o cartão escuro da arena
   -------------------------------------------------------------------------
   O `DESIGN.md` diz que o cartão de candidato é escuro nos dois temas, e diz
   por quê: na arena ele é o objeto de marca, três raias num painel de operação.
   Aqui são 524 cartões numa grade de descoberta. Quinhentas massas pretas no
   papel claro viram um paredão, e o retrato, que é a informação, perde para a
   moldura. Então a massa escura desta tela é a própria foto, e o cartão fica
   em superfície com fio de contorno. Profundidade por régua e moldura, como
   manda o sistema, sem uma sombra difusa em lugar nenhum.
   =========================================================================== */

/* ============================================================== 1 · A CASCA
   Este bloco nasceu marcado: "no dia em que existir uma folha de casca
   compartilhada, estas regras saem daqui inteiras". O dia foi 31/08, a folha é
   `/casca.css`, e elas saíram.

   Elas precisavam sair: a mesma casca estava escrita aqui, em guia.css e em
   mapa.css, e as três já discordavam. A aba desta tela tinha 34px de altura, a
   do guia tinha 44. Um site com uma navegação declarada tinha três desenhos.

   Fica só o que é DESTA tela: a moldura de leitura, mais larga que a das
   outras porque aqui a grade tem 524 cartões e uma coluna de 1120px
   desperdiçaria metade de um monitor. */

.conteudo {
  max-width: 1360px;
  margin: 0 auto;
  /* O topo é fixo agora: o conteúdo desce a altura dele. Em `calc` sobre o
     token, nunca um número solto, senão isto vira mentira quando o topo mudar. */
  padding: var(--topo-h) var(--pad-x) 64px;
}

/* ========================================================== 2 · A ABERTURA
   Título e uma linha dizendo o que a pessoa está vendo e o que pode fazer.
   Duas frases, porque a tela é para usar e não para ler. */

.abertura {
  padding: var(--gap-lg) 0 var(--gap-md);
}

.abertura-linha {
  max-width: 62ch;
  margin-top: var(--gap-sm);
}

/* =========================================================== 3 · O RECORTE
   Quatro controles: nome, cargo, estado e partido.

   No telefone o painel NÃO gruda no topo, e isso é decisão medida, não
   esquecimento. Empilhado em 375 ele passa de 250 pixels, quase um terço da
   tela de um aparelho de 812: grudado, ele cobraria esse terço para sempre,
   em troca de uma comodidade que a gaveta já resolveu. Com os estados
   fechados, o resultado de um recorte cabe em poucas telas, e voltar ao
   painel é uma rolagem curta. Da largura de 560 para cima o painel vira
   duas faixas baixas, aí ele gruda: lá a altura sobra. */

.filtros {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 0;
  border-bottom: var(--rule) solid var(--line);
  background: var(--bg-2);
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

/* Um controle de formulário só, com a mesma altura de toque em todos eles.
   `font: inherit` é o que impede o Safari de trocar a família por conta. */
.escolha {
  min-height: var(--toque);
  padding: 0 12px;
  border: var(--rule) solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
}

/* 16px no campo de texto não é gosto: abaixo disso o iOS dá zoom ao focar, e a
   página inteira sai do lugar. */
.busca {
  font-size: 16px;
  -webkit-appearance: none;
  appearance: none;
}

.busca::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.dupla {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

/* O cargo é a divisão mais usada, então é a única que fica sempre à vista, sem
   abrir menu. Quatro botões que quebram linha em vez de rolarem para o lado. */
.segmentos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.seg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 11px;
  border: var(--rule) solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: var(--t-nota);
  font-weight: var(--peso-medio);
  letter-spacing: var(--ls-lab-tight);
  text-transform: uppercase;
  cursor: pointer;
}

.seg-n {
  color: var(--faint);
  font-size: 10px;
}

/* Escolhido é tinta cheia com o papel por cima, o mesmo acento de marca do
   `chip` do sistema. Cor de estado não entra aqui: verde e vermelho são do
   veredito, e um filtro de cargo não acerta nem erra nada. */
.seg[aria-pressed='true'] {
  border-color: var(--chip-bg);
  background: var(--chip-bg);
  color: var(--chip-ink);
}

.seg[aria-pressed='true'] .seg-n {
  color: var(--chip-ink);
  opacity: 0.7;
}

.conta-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-sm);
  min-height: 22px;
}

.conta {
  margin: 0;
  color: var(--ink-2);
}

/* Cada metade da conta quebra inteira ou não quebra: partir "734 candidatos"
   no meio deixa um número órfão no fim da linha. */
.conta > span {
  white-space: nowrap;
}

.conta-sep {
  padding: 0 4px;
  color: var(--faint);
}

.limpar {
  flex: none;
  min-height: 30px;
  white-space: nowrap;
  padding: 0 10px;
  border: var(--rule) solid var(--line);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
}

.limpar:hover {
  border-color: var(--ink);
  color: var(--ink);
}

/* ============================================================ 4 · AS GAVETAS
   A grade é dividida por unidade da federação porque é assim que a disputa
   existe: governador e senador se elegem por estado. Cada estado é um
   `<details>`, e é isso que faz a tela caber num telefone: gaveta fechada não
   gera layout nem baixa foto, então a página começa com 28 títulos em vez de
   262 fileiras de cartão. O Brasil nasce aberto e nunca sai da tela. */

.grupo {
  padding-top: var(--gap-lg);
}

/* O `summary` é o botão da gaveta, então ele tem altura de dedo. O marcador
   nativo sai porque a seta é desenhada aqui do lado e gira com o estado. */
.grupo-topo {
  display: flex;
  align-items: center;
  min-height: var(--toque);
  padding-bottom: 10px;
  border-bottom: var(--rule) solid var(--line);
  cursor: pointer;
  list-style: none;
}

.grupo-topo::-webkit-details-marker {
  display: none;
}

.grupo-nome {
  display: flex;
  align-items: baseline;
  gap: var(--gap-sm);
  width: 100%;
  margin: 0;
  font-family: var(--display);
  font-size: 27px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--ink);
}

.grupo-conta {
  flex: none;
  margin-left: auto;
  color: var(--muted);
}

/* A seta aponta para baixo quando há o que abrir e vira para cima quando a
   gaveta está aberta. `align-self` a puxa para a linha da caixa alta, porque
   com `baseline` ela flutuaria acima do texto. */
.grupo-seta {
  flex: none;
  align-self: center;
  color: var(--muted);
  transition: transform var(--tempo) var(--ease);
}

.grupo[open] > .grupo-topo .grupo-seta {
  transform: rotate(180deg);
}

.grupo-topo:hover .grupo-nome,
.grupo-topo:hover .grupo-seta {
  color: var(--ink);
}

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

.grupo-nota {
  padding-top: 8px;
  color: var(--muted);
}

/* ============================================================= 5 · A GRADE
   Duas colunas no telefone, e o `auto-fill` cuida do resto sozinho conforme a
   tela cresce. `minmax(0, 1fr)` no lugar de `1fr` é o que garante que um nome
   comprido não estufe a coluna e empurre a página para o lado. */

/* A grade vertical virou PRATELEIRA horizontal, no desenho da Netflix. A
   mecânica (fileira, pista, setas, teclado) mora em `/prateleira.css` e
   `/prateleira.js`, que esta tela carrega: ela não tem cópia de nada disso.

   O que continua sendo desta tela é o CARTÃO. A pista é compartilhada porque é
   mecânica; a chapa é daqui porque é conteúdo. */

/* DESCENDENTE, e não `.fileira` na raiz. A trava de "só /prateleira.css desenha
   a prateleira" pegou esta linha na estreia dela, e pegou certo: `.fileira` solto
   numa folha de tela carrega DEPOIS da folha da prateleira e muda o espaçamento
   das cinco telas que a usam, para consertar o respiro de uma. O respiro é do
   grupo de estado, então quem o pede é o grupo. */
.grupo .fileira { padding-top: var(--gap-md); }

.chapa {
  /* Dentro de uma pista flex o cartão precisa de largura PRÓPRIA. Sem isto ele
     encolhe até caber, e 13 chapas de São Paulo virariam 13 tiras. O piso de
     132px é o retrato ainda reconhecível; o teto de 168px impede que quatro
     chapas ocupem a tela inteira numa janela larga. */
  flex: 0 0 clamp(132px, 15vw, 168px);
  scroll-snap-align: start;

  display: flex;
  flex-direction: column;
  min-width: 0;
  border: var(--rule) solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

/* O quadro do retrato tem proporção fixa e cor de espera. Junto com a dimensão
   declarada em cada `img`, é o par que segura a grade parada: o espaço já está
   reservado antes de o arquivo chegar, então nada pula quando ele chega. */
.chapa-foto {
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--bg-3);
}

.chapa-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
}

/* O número é como se vota. Fica sobre a foto, em chip sólido, porque é dado de
   urna e não legenda. */
.chapa-numero {
  position: absolute;
  bottom: 8px;
  left: 8px;
}

/* O bloco de texto toma a altura que sobra do cartão. É o que mantém a sigla
   do partido na mesma linha de cartão para cartão quando o nome de registro de
   um deles ocupa duas linhas e o do vizinho ocupa uma. */
.chapa-txt {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 10px;
}

.chapa-onde {
  color: var(--muted);
}

.chapa-nome {
  margin: 0;
  font-family: var(--display);
  font-size: 21px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--ink);
  /* Nome de urna vem do TSE e às vezes é comprido. Quebrar em qualquer ponto é
     feio uma vez a cada cem cartões e evita estourar a coluna nas outras 99. */
  overflow-wrap: anywhere;
}

.chapa-civil {
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--muted);
  overflow-wrap: anywhere;
}

/* Atalho, não caminho principal: quem quer o partido inteiro tem o seletor no
   painel. Este botão existe para o pensamento que nasce olhando o cartão. */
.sigla {
  min-height: 34px;
  margin-top: auto;
  padding: 0 9px;
  border: var(--rule) solid var(--line);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: var(--t-nota);
  font-weight: var(--peso-medio);
  letter-spacing: var(--ls-lab-tight);
  cursor: pointer;
}

.sigla:hover {
  border-color: var(--ink);
  color: var(--ink);
}

/* Quem vem junto na chapa. `margin-top: auto` cola a faixa na base do cartão,
   então numa fileira mista a linha do vice fica alinhada de cartão a cartão. */
.chapa-juntos {
  margin: auto 0 0;
  padding: 0;
  border-top: var(--rule) solid var(--line-soft);
  list-style: none;
}

.junto {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  min-width: 0;
}

.junto-foto {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bg-3);
  object-fit: cover;
  object-position: 50% 15%;
}

.junto-txt {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.junto-nome {
  font-size: 12.5px;
  font-weight: var(--peso-medio);
  line-height: 1.25;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}

.junto-sigla {
  font-size: 10px;
  color: var(--muted);
}

/* ================================================= 6 · O QUE SOBRA DA TELA
   Estado vazio, aviso de quem não tem script e o rodapé que declara a fonte. */

.vazio {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  margin: var(--gap-lg) 0 0;
  padding: var(--gap-lg);
  border: var(--rule) dashed var(--line);
  border-radius: var(--radius);
  text-align: center;
}

.aviso {
  margin: var(--gap-md) 0 0;
  padding: 12px 14px;
  border: var(--rule) dashed var(--line);
  border-radius: var(--radius-sm);
}

.rodape {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: var(--gap-lg);
  padding-top: var(--gap-md);
  border-top: var(--rule) solid var(--line);
}

/* O filtro esconde por atributo. O seletor tem peso maior que o da regra de
   exibição de cada peça, então nenhuma delas precisa de `!important`. */
.chapa[hidden],
.grupo[hidden],
.vazio[hidden],
.limpar[hidden] {
  display: none;
}

/* Foco visível em tudo que recebe teclado. Quem navega de Tab precisa saber
   onde está, e o contorno na tinta do tema funciona nos dois temas.

   `.nav-item` e `.marca` saíram desta lista com o resto da casca: quem cuida
   do foco deles agora é `/casca.css`. Deixar os dois aqui seria a mesma
   divergência de antes, só que menor e mais difícil de achar. */
.seg:focus-visible,
.sigla:focus-visible,
.limpar:focus-visible,
.escolha:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* ======================================================= 7 · AS AMPLIAÇÕES
   Daqui para baixo é tela grande. Só `min-width`, e cada degrau muda o mínimo
   de quanto é possível. */

/* Telefone deitado e tablet pequeno: cabe uma coluna a mais e o painel começa
   a se espalhar na horizontal. */
@media (min-width: 560px) {
  .grade {
    grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  }

  .filtros {
    position: sticky;
    top: 0;
    z-index: 5;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
    gap: 12px;
  }

  .campo--cargo,
  .conta-linha {
    grid-column: 1 / -1;
  }

  .chapa-nome {
    font-size: 23px;
  }

  .grupo-nome {
    font-size: 32px;
  }
}

/* Deitado de verdade: os quatro controles em três faixas e a grade ganha ar.

   A colocação é explícita, e precisa ser. O cargo ocupa a linha inteira, e no
   posicionamento automático da grade um item que atravessa todas as colunas
   empurra tudo o que vem depois dele para uma linha nova: os dois seletores
   caíam numa quarta faixa e o painel passava de 250 pixels, grudado no topo.
   Dizendo linha e coluna de cada um, nome, estado e partido dividem a primeira
   faixa e o painel encolhe para o que ele é. */
@media (min-width: 900px) {
  .filtros {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
    padding: 14px 0;
  }

  .dupla {
    display: contents;
  }

  .campo--busca {
    grid-area: 1 / 1;
  }

  .dupla > .campo:first-child {
    grid-area: 1 / 2;
  }

  .dupla > .campo:last-child {
    grid-area: 1 / 3;
  }

  .campo--cargo {
    grid-area: 2 / 1 / auto / -1;
  }

  .conta-linha {
    grid-area: 3 / 1 / auto / -1;
  }

  .grade {
    grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
    gap: var(--gap-lg);
  }

  .abertura {
    padding: 44px 0 var(--gap-lg);
  }
}

/* Da largura de 1200 em diante cabem os quatro controles lado a lado, e o
   painel vira a faixa baixa que uma barra grudada no topo precisa ser. A
   coluna do cargo é `auto` com mínimo zero: se o espaço apertar, os botões
   quebram linha dentro dela em vez de esticarem a página. */
@media (min-width: 1200px) {
  .filtros {
    grid-template-columns: minmax(190px, 1fr) minmax(0, auto) minmax(140px, 230px) minmax(110px, 180px);
  }

  .campo--cargo {
    grid-area: 1 / 2;
  }

  .dupla > .campo:first-child {
    grid-area: 1 / 3;
  }

  .dupla > .campo:last-child {
    grid-area: 1 / 4;
  }

  .conta-linha {
    grid-area: 2 / 1 / auto / -1;
  }
}

/* Monitor: a coluna de leitura para de crescer, e quem cresce é o número de
   cartões por fileira. */
@media (min-width: 1280px) {
  .grade {
    grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  }

  .chapa-nome {
    font-size: 25px;
  }
}

/* ============================================================ 8 · O REPOUSO
   Nada aqui anima nada, mas há transição de cor no toque e no foco. Quem pediu
   menos movimento recebe a tela sem nenhuma. */

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}