/* santinho.art — estética de santinho impresso, mobile-first, tela única */

/* ---------------------------------------------------------------- tokens */
:root {
  /* paleta de partido derivada por hash da sigla (§16) — nunca a cor real
     do partido, para preservar a neutralidade exigida pelo §46 */
  /* Cinzas puros de propósito: qualquer matiz no cromo do produto competiria
     com as cores dos partidos e deixaria de ser neutro (§46). A única cor na
     tela é a derivada da sigla do partido. */
  --paper:      #ececee;
  --paper-2:    #dcdce0;
  --ink:        #17181b;
  --ink-soft:   #6b6d73;
  --card:       #fbfbfc;
  --neutral:    #9a9ca2;
  --focus:      #17181b;
  --c:          var(--neutral);      /* cor do santinho, sobrescrita por card */

  --photo-h:    78cqh;
  --photo-w:    calc(var(--photo-h) * 3 / 4);   /* proporção 3:4 obrigatória (§17) */
  --btn:        clamp(30px, 9vw, 38px);     /* altura das abas do rodapé */
  /* Controles do cabeçalho um pouco mais baixos: assim o subtítulo, que é de
     largura cheia, passa por baixo deles sem encavalar, e a distância até o
     título fica curta sem precisar de margem negativa. */
  --btn-topo:   calc(var(--btn) * .84);
  --flag-w:     calc(var(--btn-topo) * 10 / 7);  /* bandeira em 10:7 na altura da placa */
  --gap:        clamp(5px, 1.1vh, 10px);
  --pad-x:      clamp(9px, 3.2vw, 18px);
  --radius:     clamp(7px, 1.4vh, 12px);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  height: 100dvh;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: max(6px, env(safe-area-inset-top)) var(--pad-x)
           env(safe-area-inset-bottom, 0px);
  gap: var(--gap);

  font-family: "Helvetica Neue", Helvetica, Arial, system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(120% 60% at 50% 0%, #f5f5f7 0%, transparent 60%),
    repeating-linear-gradient(135deg, rgba(0,0,0,.014) 0 2px, transparent 2px 5px),
    var(--paper);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- header */
/* direto sobre o background: sem card, sem contorno, sem caixa (§31) */
.header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  /* start, não end: com end o título descia até a base dos controles e sobrava
     faixa branca em cima dele. Assim título e controles começam na mesma linha,
     e o subtítulo segue em faixa de largura cheia, sem quebrar em duas. */
  align-items: start;
  column-gap: 10px;
  padding-top: clamp(1px, .6vh, 6px);
}

.brand { min-width: 0; }

.brand-name {
  margin: 0;
  font-size: clamp(18px, 5.7vw, 27px);
  white-space: nowrap;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
}
/* o ".art" é irrelevante para quem usa: fica num cinza discreto. --ink-soft
   mantém 4,4:1 contra o fundo, acima do 3:1 exigido para texto grande. */
.brand-sufixo { color: var(--ink-soft); }

.controls { display: flex; align-items: center; gap: clamp(6px, 2vw, 8px); }

/* Placa de estado no cabeçalho: bandeira + sigla em duas metades exatas,
   clicável, e também puxa a ficha. */
.uf-placa-botao {
  flex: none;
  display: flex;
  align-items: stretch;
  height: var(--btn-topo);
  padding: 0;
  overflow: hidden;
  font: inherit;
  color: var(--ink);
  background: var(--card);
  border: 0;
  border-radius: calc(var(--radius) * .62);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .14), 0 5px 12px -9px rgba(0, 0, 0, .55);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.uf-placa-botao:active { transform: scale(.96); }
.uf-placa-botao:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (hover: hover) {
  .uf-placa-botao:hover {
    box-shadow: 0 1px 0 rgba(0, 0, 0, .18), 0 7px 16px -9px rgba(0, 0, 0, .6);
  }
}

/* Gatilho de UF no rodapé: só o rótulo, já que a bandeira subiu.
   Usa o mesmo material dos cards — preenchimento creme, raio pequeno e sombra
   suave — em vez de contorno grosso: precisa parecer clicável sem brigar com os
   números, que são o elemento mais alto da tela (§56). */
.uf-trigger {
  display: flex;
  align-items: center;
  height: var(--btn);            /* mesma altura do botão de compartilhar */
  padding: 0 0 0 clamp(9px, 2.8vw, 12px);
  overflow: hidden;
  font: inherit;
  color: var(--ink);
  background: var(--card);
  border: 0;
  border-radius: calc(var(--radius) * .62);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .14), 0 5px 12px -9px rgba(0, 0, 0, .55);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.uf-trigger:active { transform: scale(.96); }
.uf-trigger:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (hover: hover) {
  .uf-trigger:hover {
    box-shadow: 0 1px 0 rgba(0, 0, 0, .18), 0 7px 16px -9px rgba(0, 0, 0, .6);
  }
}

/* a placa mantém as duas metades exatas: bandeira à esquerda, sigla centrada
   à direita; o rótulo vem depois, dentro do mesmo botão */
.uf-placa {
  display: grid;
  grid-template-columns: var(--flag-w) var(--flag-w);
  align-items: stretch;
  flex: none;
}

/* bandeira encostada na borda, como a foto encosta na faixa do card */
.uf-flag {
  width: 100%;
  height: 100%;
  object-fit: cover;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
  background: var(--paper-2);
}

.uf-sigla {
  display: grid;
  place-items: center;
  font-size: clamp(13px, 3.9vw, 15px);
  font-weight: 800;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------- puxar e devolver ------
   A folha sobe do rodapé e volta para lá ao fechar. O fechamento precisa de
   ajuda do JS: <dialog> sai da top layer na hora, sem dar tempo de animar (ver
   fecharComAnimacao em app.js). */
@media (prefers-reduced-motion: no-preference) {
  /* o :not(.is-fechando) é essencial: durante o fechamento o diálogo ainda é
     [open], e sem isso a regra de subida vence por especificidade */
  .uf-dialog[open]:not(.sem-animacao):not(.is-fechando) {
    animation: folha-sobe .26s cubic-bezier(.22, .9, .24, 1);
  }
  .uf-dialog[open]:not(.sem-animacao):not(.is-fechando)::backdrop {
    animation: fundo-entra .26s ease-out;
  }
  .uf-dialog[open].is-fechando {
    animation: folha-desce .17s ease-in forwards;
  }
  .uf-dialog[open].is-fechando::backdrop {
    animation: fundo-sai .17s ease-in forwards;
  }
}

/* 100% - --btn: nessa posição a fileira de abas fica exatamente onde estão os
   botões do rodapé, então a aba parece sair de lá */
@keyframes folha-sobe  { from { transform: translateY(calc(100% - var(--btn))); } }
@keyframes folha-desce { to   { transform: translateY(calc(100% - var(--btn))); } }
@keyframes fundo-entra { from { opacity: 0; } }
@keyframes fundo-sai   { to   { opacity: 0; } }

/* ------------------------------------------------------------ folha e abas */
/* A folha é uma ficha: as abas ficam no TOPO dela, então sobem junto com a folha
   — o botão do rodapé parece virar a aba da ficha. O corpo é a superfície que
   encosta por baixo das abas, com a borda de cima reta. */
.folha-corpo {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--card);
  border-radius: 18px 18px 0 0;
}

.folha-abas {
  flex: none;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: clamp(7px, 2.4vw, 10px);
  padding: 0 var(--pad-x);
  background: transparent;
}

/* ------------------------------------------------- diálogo de escolha de UF */
.uf-dialog {
  margin: 0 auto;
  padding: 0;
  width: min(440px, 100%);
  /* o navegador aplica max-width: calc(100% - 38px) a dialog, sobra do padding
     e da borda padrão que zeramos acima — sem isto a folha fica estreita */
  max-width: 100%;
  /* altura fixa: a folha tem sempre 80% da tela, mesmo com pouco conteúdo */
  height: 80dvh;
  max-height: 80dvh;
  position: fixed;
  inset: auto 0 0 0;                 /* folha inferior no celular */
  border: 0;
  border-radius: 0;
  background: transparent;      /* quem tem fundo é .folha-corpo */
  color: var(--ink);
  filter: drop-shadow(0 -12px 26px rgba(0, 0, 0, .35));
  overflow: visible;
  display: flex;
  flex-direction: column;
}
/* o `display: flex` acima sobrescreveria o `display: none` que o navegador
   aplica a dialog fechado (estilo de autor vence o do agente), e a folha ficaria
   desenhada no rodapé cobrindo o último card */
.uf-dialog:not([open]) { display: none; }

.uf-dialog::backdrop {
  background: rgba(27, 23, 18, .55);
  backdrop-filter: blur(2px);
}

.uf-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 14px 11px 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--neutral) 28%, transparent);
}
.uf-dialog-title {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.01em;
}
.uf-close {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  color: var(--ink-soft);
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
.uf-close svg { width: 17px; height: 17px; }
.uf-close:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }

.uf-list {
  margin: 0;
  padding: 6px 0 max(8px, env(safe-area-inset-bottom));
  list-style: none;
  overflow-y: auto;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;       /* não arrasta a página atrás */
  -webkit-overflow-scrolling: touch;
}

.uf-opcao {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 10px 18px;
  font: inherit;
  text-align: left;
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.uf-opcao-flag {
  width: 34px;
  height: auto;
  aspect-ratio: 10 / 7;
  object-fit: cover;
  flex: none;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .22);
  background: var(--paper-2);
}
.uf-opcao-nome {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.uf-opcao-sigla {
  flex: none;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--ink-soft);
  padding: 3px 6px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--neutral) 18%, transparent);
}
.uf-opcao:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: -3px;
}
@media (hover: hover) {
  .uf-opcao:hover { background: color-mix(in srgb, var(--neutral) 12%, transparent); }
}
.uf-opcao.is-atual {
  background: color-mix(in srgb, var(--neutral) 22%, transparent);
}
.uf-opcao.is-atual .uf-opcao-nome { font-weight: 800; }
.uf-opcao.is-atual .uf-opcao-sigla {
  color: var(--card);
  background: var(--ink);
}

/* ------------------------------------------------------- busca por nome */
/* Folha inferior, igual à do estado. O campo fica no topo da folha, então
   permanece visível mesmo com o teclado virtual aberto. */
.busca-head { padding: 12px 12px 10px 14px; gap: 8px; }

.busca-campo {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 11px;
  height: 40px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--neutral) 16%, transparent);
}
.busca-campo:focus-within {
  background: var(--card);
  box-shadow: inset 0 0 0 2px var(--ink);
}
.busca-lupa { width: 16px; height: 16px; flex: none; color: var(--ink-soft); }

.busca-input {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: 16px;            /* evita zoom automático no iOS ao focar */
  font-weight: 600;
  color: var(--ink);
  background: transparent;
  border: 0;
  outline: 0;
  padding: 0;
  -webkit-appearance: none;
}
.busca-input::placeholder { color: var(--ink-soft); font-weight: 500; }

.filtros-chips {
  display: flex;
  gap: 7px;
  padding: 10px 16px 7px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  flex: none;
  cursor: grab;
}
.filtros-chips::-webkit-scrollbar { display: none; }
.filtros-chips.is-arrastando { cursor: grabbing; user-select: none; }
.chip-filtro {
  flex: none;
  min-height: 30px;
  padding: 4px 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--neutral) 55%, transparent);
  border-radius: 999px;
  cursor: pointer;
}
.chip-filtro.is-ativo {
  color: var(--card);
  background: var(--ink);
  border-color: var(--ink);
}
.chip-partido { color: var(--c); border-color: var(--c); }
.chip-partido.is-ativo {
  color: var(--c-txt);
  background: var(--c);
  border-color: var(--c);
}
.chip-filtro:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.limpar-filtros {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  padding: 0;
  color: var(--ink-soft);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.limpar-filtros svg { width: 16px; height: 16px; }
.limpar-filtros:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (hover: hover) {
  .limpar-filtros:hover { color: var(--ink); background: var(--paper-2); }
}

.busca-contagem {
  margin: 0;
  padding: 9px 16px 3px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.busca-contagem:empty { display: none; }

.busca-fim { height: 1px; }

.busca-lista {
  margin: 0;
  padding: 4px 0 max(10px, env(safe-area-inset-bottom));
  list-style: none;
  overflow-y: auto;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
}

.busca-opcao {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 8px 16px;
  font: inherit;
  text-align: left;
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.busca-foto {
  width: 34px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 22%;
  flex: none;
  border-radius: 3px;
  background: linear-gradient(160deg, #fff, var(--paper-2));
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .16);
}
.busca-ident { min-width: 0; display: grid; gap: 3px; }
.busca-nome {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.busca-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 11px;
  color: var(--ink-soft);
}
.busca-partido {
  flex: none;
  font-weight: 800;
  letter-spacing: .05em;
  padding: 2px 5px;
  border-radius: 3px;
  color: var(--c-txt, var(--card));
  background: var(--c, var(--neutral));
}
.busca-cargo {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 700;
}
.busca-numero {
  flex: none;
  font-size: 17px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  color: var(--c-escura, var(--ink));
  padding: 3px 7px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--c, var(--neutral)) 10%, transparent);
}
.busca-opcao:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
@media (hover: hover) {
  .busca-opcao:hover { background: color-mix(in srgb, var(--neutral) 12%, transparent); }
}

/* no desktop o diálogo vira um cartão centrado */
@media (min-width: 700px) {
  /* A ficha continua sendo puxada do rodapé, também no desktop. Centrá-la na
     tela quebrava a metáfora: as abas ficavam soltas no meio, desconectadas dos
     botões de onde saíram. Só a largura acompanha a coluna dos cards e a altura
     ganha um teto absoluto, senão 80dvh viraria um cartão gigante. */
  .uf-dialog {
    width: min(620px, 100vw - 32px);
    height: min(80dvh, 620px);
    max-height: min(80dvh, 620px);
  }
}

.icone, .share {
  display: grid; place-items: center;
  height: var(--btn-topo);
  color: var(--card);
  background: var(--ink);
  border: 0; border-radius: calc(var(--radius) * .62);
  cursor: pointer;
  transition: transform .12s ease, background .12s ease;
}

/* o de ícone puro continua quadrado */
.icone { width: var(--btn); }

/* rótulo dentro dos botões, para a ação ficar explícita */
.rotulo-botao {
  align-self: center;
  padding: 0 clamp(8px, 2.6vw, 12px);
  font-size: clamp(9.5px, 2.8vw, 11.5px);
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1;
  white-space: nowrap;
}

/* as abas do rodapé usam o mesmo material do seletor de estado */
.busca-botao,
.ajuda-botao {
  display: flex;
  align-items: center;
  gap: 0;
  height: var(--btn);
  padding: 0 0 0 clamp(9px, 2.8vw, 12px);
  color: var(--ink);
  background: var(--card);
  border: 0;
  border-radius: calc(var(--radius) * .62);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .14), 0 5px 12px -9px rgba(0, 0, 0, .55);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.uf-trigger svg,
.busca-botao svg,
.ajuda-botao svg { width: clamp(13px, 3.8vw, 16px); height: auto; flex: none; }
.uf-trigger .rotulo-botao,
.busca-botao .rotulo-botao { padding-left: clamp(6px, 1.8vw, 8px); }
.busca-botao:active,
.ajuda-botao:active { transform: scale(.96); }

/* Aba só de ícone. O padding direito das outras mora no .rotulo-botao, então sem
   rótulo a aba precisa de padding simétrico próprio, senão o ícone encosta na
   borda. Largura resultante: ~38px, contra ~90px de folga no rodapé em 320px. */
.aba-icone {
  padding-right: clamp(9px, 2.8vw, 12px);
  justify-content: center;
}
.busca-botao:focus-visible,
.ajuda-botao:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (hover: hover) {
  .busca-botao:hover,
  .ajuda-botao:hover {
    box-shadow: 0 1px 0 rgba(0, 0, 0, .18), 0 7px 16px -9px rgba(0, 0, 0, .6);
  }
}

/* compartilhar ganhou rótulo: sobrou espaço no cabeçalho */
.share {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 clamp(10px, 3vw, 14px);
}
.share svg { width: clamp(14px, 4vw, 17px); height: auto; flex: none; }
.share-rotulo {
  font-size: clamp(10.5px, 3vw, 13px);
  font-weight: 800;
  letter-spacing: .04em;
  white-space: nowrap;
}
.icone svg { width: 55%; height: 55%; }
.icone { display: grid; place-items: center; }
.icone:active { transform: scale(.93); }
.icone:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* o de busca é secundário: contorno em vez de preenchimento cheio */
#busca-trigger {
  color: var(--ink);
  background: var(--card);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .14), 0 5px 12px -9px rgba(0, 0, 0, .55);
}

/* Só o aviso de status vive aqui. O subtítulo saiu: ele não dizia ao usuário
   nada que ele precisasse para montar a cola, e custava uma faixa de altura
   mais toda uma escada de responsividade para não encavalar nos controles. */
/* As duas escolhas, na linha que o subtítulo desocupou. Aparecem só quando a URL
   trouxe uma cola e nada foi editado, então em visita limpa não custam altura.
   São a peça que faz a cola recebida parecer editável sem depender de leitura:
   agem no toque, e tocar em qualquer uma delas decide. */
/* `display: flex` de autor vence o `[hidden] { display: none }` do navegador -
   a mesma armadilha do <dialog> (ver 59.10). Sem esta linha o par ficava na tela
   para sempre, mesmo com a propriedade `hidden` ligada. */
.refazer-par[hidden] { display: none; }

.refazer-par {
  grid-column: 1 / -1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 5px 0 0;
}

/* o ponteiro chama o toque indo de uma opção para a outra */
.refazer-chamada {
  position: absolute;
  left: 0; top: 50%;
  width: 15px; height: 15px;
  margin-top: 2px;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3));
}
.refazer-chamada svg { width: 100%; height: 100%; display: block; }
/* O anel de toque, o mesmo das figuras da ficha: viaja junto com o ponteiro e
   pulsa duas vezes em cada parada. É o que dá o "clica aqui... ou aqui". */
.refazer-anel {
  position: absolute;
  left: 50%; top: 50%;
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border: 2px solid color-mix(in srgb, var(--ink) 40%, transparent);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

/* As percentagens de `left` são do próprio par, e foram medidas: o centro de
   "deixar assim" fica entre 22% e 25% em toda largura de 320 a 430, e o de
   "limpar tudo" entre 63% e 64%. Somando os 2,5% de meia largura do ponteiro,
   21% e 61% o deixam sobre o botão certo em qualquer tela. */
@media (prefers-reduced-motion: no-preference) {
  .refazer-chamada { animation: refazer-anda 4.4s ease-in-out infinite; }
  .refazer-anel { animation: refazer-anel 4.4s ease-out infinite; }
}
@keyframes refazer-anda {
  0%, 26%   { left: 21% }
  40%, 74%  { left: 61% }
  88%, 100% { left: 21% }
}
/* Um pulso por parada, na mesma cadência do anel das outras figuras: lá o
   crescimento leva ~1s (de 15% a 65% de um ciclo de 2s), e aqui os 22% de um
   ciclo de 4,4s dão os mesmos ~0,97s. Mesma escala (.8 a 1.6) e mesmo ease-out,
   para o gesto ser reconhecivelmente o mesmo.

   Os pulsos caem dentro das janelas em que o ponteiro está parado (0-26% e
   40-74%); durante as viagens o anel fica invisível. */
@keyframes refazer-anel {
  0%        { transform: scale(.8);  opacity: 0 }
  3%        { transform: scale(.8);  opacity: .9 }
  25%       { transform: scale(1.6); opacity: 0 }
  26%, 41%  { transform: scale(.8);  opacity: 0 }
  44%       { transform: scale(.8);  opacity: .9 }
  66%       { transform: scale(1.6); opacity: 0 }
  67%, 100% { transform: scale(.8);  opacity: 0 }
}

.refazer {
  padding: 5px clamp(9px, 2.8vw, 12px);
  font: inherit;
  font-size: clamp(10px, 2.9vw, 12px);
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1;
  color: var(--ink);
  background: var(--card);
  border: 0;
  border-radius: calc(var(--radius) * .5);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .14), 0 5px 12px -9px rgba(0, 0, 0, .55);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.refazer:active { transform: scale(.96); }
.refazer:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (hover: hover) {
  .refazer:hover { box-shadow: 0 1px 0 rgba(0, 0, 0, .18), 0 7px 16px -9px rgba(0, 0, 0, .6); }
}
/* "deixar assim" é a saída conservadora: fica mais discreta que a outra */
.refazer-secundario {
  color: var(--ink-soft);
  background: transparent;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--neutral) 50%, transparent);
}
@media (hover: hover) {
  .refazer-secundario:hover {
    color: var(--ink);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--neutral) 75%, transparent);
  }
}

.status {
  grid-column: 1 / -1;      /* largura cheia: na coluna 1 a frase quebraria */
  margin: 6px 0 0;
  font-size: clamp(10px, 2.9vw, 12px);
  color: var(--ink-soft);
  line-height: 1.25;
  font-weight: 700;
  text-align: center;
}
.status:empty { display: none; }
.status[data-kind="warn"] { color: var(--ink); }

/* A marca cede lugar se a primeira faixa não couber. */
@media (max-width: 309px) {
  .brand-name { display: none; }
}

/* --------------------------------------------------------------- rodapé */
/* Estado e busca ficam aqui, na zona do polegar. */
.rodape {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: clamp(7px, 2.4vw, 10px);
  padding-top: clamp(3px, .8vh, 7px);
}

/* Abas: arredondadas só em cima, encostadas na borda de baixo, com sombra para
   cima e uma sombra interna na base — a interna é o que dá a sensação de que a
   aba continua para dentro, atrás do que está na frente dela. Vale com a folha
   fechada e com a folha aberta na aba inativa; sai só na aba ativa, que se funde
   ao corpo da ficha. */
.aba {
  --sombra-interna: inset 0 -8px 10px -7px rgba(0, 0, 0, .3);
  border-radius: calc(var(--radius) * .62) calc(var(--radius) * .62) 0 0 !important;
  box-shadow:
    var(--sombra-interna),
    0 -1px 0 rgba(0, 0, 0, .1),
    0 -6px 14px -10px rgba(0, 0, 0, .55) !important;
}
@media (hover: hover) {
  .aba:hover {
    box-shadow:
      var(--sombra-interna),
      0 -1px 0 rgba(0, 0, 0, .14),
      0 -9px 18px -10px rgba(0, 0, 0, .6) !important;
  }
}
/* a aba da folha aberta se funde ao corpo dela */
.folha-abas .aba.is-ativa {
  box-shadow: none !important;
  transform: none !important;
}

/* a aba de trás mantém a sombra interna da base — é o que a coloca atrás do
   corpo da ficha — e perde a sombra externa, que só faria sentido se ela
   estivesse na frente */
.folha-abas .aba:not(.is-ativa) {
  box-shadow: var(--sombra-interna), 0 -1px 0 rgba(0, 0, 0, .06) !important;
}

/* ---------------------------------------------------------------- cards */
.cards {
  display: grid;
  grid-template-rows: repeat(6, minmax(0, 1fr));
  gap: var(--gap);
  min-height: 0;
}

.card {
  container-type: size;
  --photo-gap:  clamp(7px, 2.4vw, 12px);
  --band-tail:  clamp(13px, 4.5cqw, 30px);
  --card-gap:   clamp(6px, 2vw, 12px);
  /* respiro entre a ponta da faixa e o texto: sem ele a diagonal encostava na
     primeira letra do nome (medido: 0,3px de folga em 320x568) */
  --band-folga: 6px;
  position: relative;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--card-gap);
  padding: 0 clamp(8px, 2.6vw, 14px) 0 0;

  background: var(--card);
  border-radius: var(--radius);
  user-select: none;              /* toque no card foca dígito, não seleciona texto */
  -webkit-user-select: none;
  touch-action: manipulation;     /* elimina o atraso de double-tap-to-zoom */
  /* o card inteiro é alvo de edição (§26): no desktop o ponteiro tinha de dizer
     isso, e não dizia - nada no card mudava a forma do cursor */
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(0,0,0,.16), 0 6px 14px -10px rgba(0,0,0,.5);
  transition: box-shadow .15s ease, background .15s ease;
}

/* faixa cromática com recorte diagonal — bloco publicitário do santinho */
.band {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--photo-gap) + var(--photo-w) + var(--band-tail));
  background: linear-gradient(150deg, var(--c) 0%, color-mix(in srgb, var(--c) 72%, #000) 100%);
  clip-path: polygon(0 0, 100% 0, 58% 100%, 0 100%);
  opacity: .95;
}
/* Retorno de toque no card, por COR e nunca por transform.
 *
 * A primeira versão usava `transform: scale(.994)` e quebrou a digitação no
 * iPhone: o teclado começava a abrir e fechava na hora, perdendo o foco. O
 * motivo é que o input mestre é `position: absolute; inset: 0` DENTRO do card,
 * e `transform` num ancestral do campo focado cria um novo bloco contenedor -
 * a lógica de "rolar até o campo focado" do iOS se perde e ele desiste do
 * teclado. O `:active` dispara justamente no toque, no mesmo instante do
 * focus().
 *
 * Pela mesma razão nada de `filter`, `perspective`, `will-change: transform`
 * nem `contain: paint` no card ou em qualquer ancestral do input: todos criam
 * bloco contenedor. Sobram cor, sombra e borda, que não criam nada.
 *
 * §56: digitação correta é a prioridade 1, cosmético é a última. */
.card:active { background: color-mix(in srgb, var(--ink) 4%, var(--card)); }

/* filete claro acompanhando a diagonal, típico de impresso */
.band::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(150deg, transparent 0%, rgba(255,255,255,.22) 100%);
}

/* ------------------------------------------------------- ficha de ajuda */

.ajuda-head { padding: 15px 14px 11px 18px; }
.ajuda-titulo {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.01em;
}

.ajuda-corpo {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 4px 18px 14px;
}
/* foco por script no contêiner: sem anel, e sem tirar o do ✕ pelo Tab */
.ajuda-corpo:focus { outline: none; }

.ajuda-bloco { padding: 12px 0; border-bottom: 1px solid color-mix(in srgb, var(--neutral) 20%, transparent); }
.ajuda-bloco:last-child { border-bottom: 0; }
/* Caixa na ficha, uma regra só: RÓTULO em minúsculas (título da ficha, título
   de seção, termo da lista de fontes, abas, botões) e PROSA em frase, começando
   com maiúscula (parágrafos, legendas, definições). Nome próprio mantém a caixa
   sempre. A hierarquia dos títulos vem de peso e tamanho, não de caixa alta -
   antes as seções eram MAIÚSCULAS e as aberturas minúsculas, e a mistura era o
   que se via na tela. */
.ajuda-bloco h3 {
  margin: 0 0 5px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--ink-soft);
}
.ajuda-bloco p {
  margin: 0 0 6px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
}
.ajuda-bloco p:last-child { margin-bottom: 0; }

/* a abertura é o bloco que muda conforme a chegada: ganha destaque */
.ajuda-abertura { padding-top: 4px; }
.ajuda-abertura h3 {
  font-size: 15px;
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--ink);
}

/* --- figuras da ficha: desenhadas em CSS com a estética dos componentes de
   verdade. Nenhuma imagem para carregar, e cinza no lugar da cor de partido,
   porque ilustração não pode carregar identidade de legenda (§46). --- */

.ajuda-fig { margin: 8px 0 0; }
.ajuda-fig figcaption {
  margin-top: 9px;
  font-size: 12.5px;
  line-height: 1.4;
  text-align: center;      /* legenda acompanha a figura centrada */
  color: var(--ink-soft);
}

/* número com um dígito selecionado, como no card focado */
.fig-digitos {
  display: flex;
  align-items: center;
  gap: 3px;
  /* folga vertical extra: o anel de toque é maior que a casinha e precisa de
     espaço para crescer sem encostar na borda da figura */
  padding: 14px 11px;
  background: var(--card);
  border-radius: calc(var(--radius) * .5);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .14), 0 5px 12px -9px rgba(0, 0, 0, .55);
  width: max-content;
}
.fig-digito {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 21px;
  padding: 3px 4px;
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 20%, transparent);
  border-radius: 3px;
}
.fig-digito.is-vazio { color: color-mix(in srgb, var(--neutral) 60%, transparent); }
.fig-digito.is-caret {
  color: var(--card);
  background: var(--ink);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ink) 30%, transparent);
}
.fig-sep {
  width: 0;
  align-self: stretch;
  margin: 0 3px;
  border-left: 2px dotted color-mix(in srgb, var(--neutral) 70%, transparent);
}
/* O toque: um anel saindo do dígito selecionado. Ele começa MAIOR que o dígito e
   cresce para fora - a primeira versão era menor e ficava escondida dentro da
   casinha escura, invisível. */
.fig-toque {
  position: absolute;
  left: 50%; top: 50%;
  width: 46px; height: 46px;
  margin: -23px 0 0 -23px;
  border: 2px solid color-mix(in srgb, var(--ink) 40%, transparent);
  border-radius: 50%;
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .fig-toque { animation: fig-toque 2s ease-out infinite; }
}
@keyframes fig-toque {
  0%        { transform: scale(.8);  opacity: 0; }
  15%       { transform: scale(.8);  opacity: .9; }
  65%, 100% { transform: scale(1.6); opacity: 0; }
}

/* o ponteiro fica encostado no canto do dígito, como no instante do clique */
.fig-cursor {
  position: absolute;
  left: 52%; top: 54%;
  width: 17px; height: 17px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35));
}

/* palco comum das figuras: a caixa onde a cena acontece, centrada */
.fig-palco {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* tag do card, como em VOTO DE LEGENDA e INVÁLIDO (mesma receita de .name.is-tag) */
/* como `.name.is-tag` no card: em caixa alta */
.fig-tag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: .34em .6em;
  border-radius: 3px;
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--neutral) 22%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--neutral) 40%, transparent);
}

/* réplica das abas do rodapé e do botão de compartilhar */
.fig-aba, .fig-share {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 12px;
  border-radius: calc(var(--radius) * .62);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1;
}
.fig-aba svg, .fig-share svg { width: 15px; height: auto; flex: none; }
.fig-aba {
  color: var(--ink);
  background: var(--card);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .14), 0 5px 12px -9px rgba(0, 0, 0, .55);
}
.fig-share {
  color: var(--card);
  background: var(--ink);
  font-size: 12px;
  letter-spacing: .01em;
}

/* Balão de mensagem ENVIADA, com a gramática de app de conversa: rabinho no
   canto de baixo à direita, hora e os dois tiques. O verde é bem dessaturado -
   só o suficiente para o desenho ser lido como "mensagem", sem virar propaganda
   de aplicativo nem disputar com as cores de partido dos cards (§46). */
.fig-balao {
  position: relative;
  transform-origin: 100% 100%;      /* o canto onde o avatar encosta */
  display: grid;
  gap: 2px;
  max-width: 230px;
  padding: 7px 9px 5px;
  background: color-mix(in srgb, #6ac47e 22%, var(--card));
  border-radius: 9px 9px 2px 9px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .16);
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--ink);
}
/* o rabinho, em triângulo, encostado na borda de baixo à direita */
.fig-balao::after {
  content: "";
  position: absolute;
  right: -5px; bottom: 0;
  width: 0; height: 0;
  border: 5px solid transparent;
  border-left-color: color-mix(in srgb, #6ac47e 22%, var(--card));
  border-bottom-color: color-mix(in srgb, #6ac47e 22%, var(--card));
}
.fig-balao b { font-weight: 800; }
.fig-balao-chamada { margin-top: 6px; }
.fig-balao-link {
  color: color-mix(in srgb, var(--ink) 55%, transparent);
  overflow-wrap: anywhere;
}
.fig-balao-rodape {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  margin-top: 2px;
  font-size: 9px;
  color: color-mix(in srgb, var(--ink) 45%, transparent);
}
.fig-balao-rodape svg {
  width: 14px; height: auto;
  color: #3d8ec9;                /* o azul dos dois tiques de "lido" */
}

/* --- mini santinho da boas-vindas: o que a pessoa está montando --- */

.fig-santinho {
  display: flex;
  align-items: center;
  gap: 9px;
  width: min(280px, 100%);
  padding: 8px 10px;
  background: var(--card);
  border-radius: calc(var(--radius) * .6);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .14), 0 6px 14px -10px rgba(0, 0, 0, .5);
}
.fig-santinho-foto {
  flex: none;
  width: 27px; height: 36px;
  border-radius: 3px;
  background: linear-gradient(160deg, #fff 0%, var(--paper-2) 100%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--neutral) 40%, transparent);
}
.fig-santinho-ident { flex: 1; min-width: 0; display: grid; gap: 2px; }
/* Caixa alta aqui é cópia da interface, não do texto explicativo: no card de
   verdade `.name` e `.office` são `text-transform: uppercase`. A figura tem de
   parecer com o que a pessoa vai ver, então ela grita junto - a fonte no HTML
   segue minúscula, como o resto da ficha. */
.fig-santinho-nome {
  font-size: 11px; font-weight: 800; letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fig-santinho-cargo {
  font-size: 9px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.fig-santinho-num { display: flex; align-items: center; gap: 2px; flex: none; }
.fig-santinho-num i {
  display: grid; place-items: center;
  min-width: 14px; padding: 2px 3px;
  font-style: normal; font-size: 15px; font-weight: 800; line-height: 1;
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 20%, transparent);
  border-radius: 2px;
}
.fig-sep-mini {
  min-width: 0 !important;
  padding: 0 !important;
  align-self: stretch;
  background: none !important;
  box-shadow: none !important;
  border-left: 2px dotted color-mix(in srgb, var(--neutral) 70%, transparent);
  margin: 0 2px;
}

/* --- réplica do botão do cabeçalho, para a seção da cola recebida --- */

.fig-refazer {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  font-size: 12px; font-weight: 800; letter-spacing: .01em;
  color: var(--ink);
  background: var(--card);
  border-radius: calc(var(--radius) * .5);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .14), 0 5px 12px -9px rgba(0, 0, 0, .55);
}
/* aqui o alvo é o botão inteiro, então o anel e o ponteiro vão ao centro */
.fig-refazer .fig-toque { left: 50%; top: 50%; }
.fig-refazer .fig-cursor { left: 52%; top: 56%; }

/* --- as duas escolhas, na figura da ficha --- */

.fig-escolha { position: relative; gap: 6px; }
.fig-refazer-2 {
  color: var(--ink-soft);
  background: transparent;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--neutral) 50%, transparent);
}
.fig-cursor-vaivem {
  position: absolute;
  top: 58%;
  width: 15px; height: 15px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3));
  left: 22%;
}
.fig-cursor-vaivem svg { width: 100%; height: 100%; display: block; }
/* o ponteiro da figura também leva o anel, e ele precisa de contexto para se
   posicionar: o .fig-cursor base não é `position: relative` */
.fig-cursor-vaivem { position: absolute; }
/* a figura repete o mesmo gesto do cabeçalho, com a mesma cadência */
@media (prefers-reduced-motion: no-preference) {
  .fig-cursor-vaivem { animation: fig-vaivem 4.4s ease-in-out infinite; }
}
@keyframes fig-vaivem {
  0%, 26%   { left: 20% }
  40%, 74%  { left: 60% }
  88%, 100% { left: 20% }
}

/* --- alvo de toque das figuras: o mesmo par anel + ponteiro do primeiro
   desenho, agora reaproveitado nas abas e no compartilhar --- */

.fig-alvo { position: relative; }
.fig-alvo .fig-toque {
  left: 22px;                     /* sobre o ícone, que é onde o dedo cai */
  top: 50%;
  /* menor que o do dígito: aqui o alvo é um botão de 34px, e o anel de 46px
     transbordava por cima do rótulo e do vizinho */
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
}
.fig-alvo .fig-cursor { left: 24px; top: 56%; }

/* --- trocar de estado: a placa troca de bandeira e de sigla no ritmo do toque --- */

.fig-placa {
  display: inline-flex;
  align-items: stretch;
  height: 30px;
  background: var(--card);
  border-radius: calc(var(--radius) * .55);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .14), 0 5px 12px -9px rgba(0, 0, 0, .55);
  overflow: hidden;
}
.fig-bandeiras, .fig-siglas { position: relative; display: block; }
.fig-bandeiras { width: 30px; }
.fig-bandeiras img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
}
.fig-siglas { width: 34px; }
.fig-siglas span {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 800; letter-spacing: .06em;
  color: var(--ink);
}
/* estado parado (e com movimento reduzido): mostra o primeiro dos dois */
.fig-bandeiras img:last-child, .fig-siglas span:last-child { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .fig-bandeiras img:first-child, .fig-siglas span:first-child {
    animation: fig-sai 4s steps(1, end) infinite;
  }
  .fig-bandeiras img:last-child, .fig-siglas span:last-child {
    animation: fig-entra 4s steps(1, end) infinite;
  }
}
@keyframes fig-sai   { 0%, 45% { opacity: 1 } 50%, 100% { opacity: 0 } }
@keyframes fig-entra { 0%, 45% { opacity: 0 } 50%, 100% { opacity: 1 } }

.fig-estado .fig-toque, .fig-estado .fig-cursor { animation-duration: 4s; }

/* --- buscar por nome: o nome se escreve e o resultado aparece --- */

.fig-busca { flex-direction: column; gap: 7px; }

.fig-campo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 168px;
  height: 32px;
  padding: 0 11px;
  background: var(--card);
  border-radius: calc(var(--radius) * .5);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--neutral) 45%, transparent);
  color: var(--ink-soft);
}
.fig-campo svg { width: 13px; height: auto; flex: none; }
.fig-digitando {
  display: flex;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  border-right: 1.5px solid var(--ink);
}
.fig-digitando i {
  font-style: normal;
  white-space: nowrap;
  overflow: hidden;
  width: 7ch;                     /* parado: o nome inteiro */
}

.fig-resultado {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 168px;
  padding: 7px 11px;
  background: var(--card);
  border-radius: calc(var(--radius) * .5);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .12), 0 4px 10px -8px rgba(0, 0, 0, .5);
}
.fig-resultado-nome {
  flex: 1;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: -.01em;
  /* na lista de busca real o nome vem do TSE, que grava tudo em caixa alta */
  text-transform: uppercase;
  color: var(--ink);
}
.fig-resultado-num {
  font-size: 15px;
  font-weight: 800;
  color: var(--card);
  background: var(--ink);
  padding: 2px 7px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: no-preference) {
  .fig-digitando i { animation: fig-digita 4s steps(7, end) infinite; }
  .fig-digitando   { animation: fig-caret 4s linear infinite; }
  .fig-resultado   { animation: fig-resultado 4s ease-out infinite; }
}
@keyframes fig-digita {
  0%        { width: 0 }
  38%, 100% { width: 7ch }
}
@keyframes fig-caret {
  0%, 40%   { border-right-color: var(--ink) }
  46%, 100% { border-right-color: transparent }
}
@keyframes fig-resultado {
  0%, 40%   { opacity: 0; transform: translateY(-5px) }
  52%, 100% { opacity: 1; transform: none }
}

/* --- compartilhar: o toque no botão e o que sai dele --- */

.fig-compartilhar { flex-direction: column; }
/* flex-end: o avatar encosta na base do balão, como em app de conversa */
.fig-saida { display: flex; align-items: flex-end; gap: 7px; }

/* avatar de quem mandou a mensagem */
.fig-avatar { flex: none; display: block; }
.fig-avatar svg {
  width: 28px; height: 28px; display: block;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .18));
}

/* O balão SAI do avatar em vez de aparecer por fade: a origem da escala é o
   canto de baixo à direita, que é exatamente onde o avatar está encostado. */
@media (prefers-reduced-motion: no-preference) {
  .fig-balao { animation: fig-balao-sai 4s cubic-bezier(.22, .9, .24, 1) infinite; }
  .fig-compartilhar .fig-toque, .fig-compartilhar .fig-cursor { animation-duration: 4s; }
}
@keyframes fig-balao-sai {
  0%, 18%   { transform: scale(.06); opacity: 0 }
  22%       { opacity: 1 }
  40%, 100% { transform: scale(1); opacity: 1 }
}

/* --- fluxo dos dados: um pulso que atravessa a corrente --- */

.fig-fluxo { gap: 6px; }
.fig-no {
  padding: 7px 9px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  color: var(--ink-soft);
  background: var(--card);
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--neutral) 40%, transparent);
}
.fig-no-forte {
  color: var(--card);
  background: var(--ink);
  box-shadow: none;
}
.fig-trilho {
  position: relative;
  flex: 1 0 22px;
  height: 2px;
  background: color-mix(in srgb, var(--neutral) 45%, transparent);
}
.fig-trilho i {
  position: absolute;
  top: -3px; left: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ink);
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .fig-trilho i { animation: fig-pulso 2.6s ease-in-out infinite; }
  /* nth-child, não nth-of-type: os irmãos são todos <span>, então nth-of-type
     contaria os nós e pegaria o primeiro trilho de novo */
  .fig-fluxo > :nth-child(4) i { animation-delay: .5s; }
}
@keyframes fig-pulso {
  0%        { left: 0; opacity: 0 }
  15%       { opacity: 1 }
  60%       { left: calc(100% - 8px); opacity: 1 }
  75%, 100% { left: calc(100% - 8px); opacity: 0 }
}

/* --- privacidade: o que tenta sair e não sai --- */

.fig-privacidade { gap: 7px; }
.fig-fone {
  position: relative;
  width: 74px;
  padding: 4px;
  background: var(--card);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--neutral) 55%, transparent);
}
.fig-fone-barra {
  display: block;
  padding: 2px 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 7.5px;
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--neutral) 20%, transparent);
  border-radius: 3px;
  overflow: hidden;
  white-space: nowrap;
}
.fig-fone-tela {
  display: grid;
  gap: 2px;
  margin-top: 3px;
}
.fig-fone-tela i {
  height: 7px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--neutral) 26%, transparent);
}
/* o ponto que tenta escapar do aparelho */
.fig-fuga {
  position: absolute;
  right: -2px; top: 50%;
  width: 7px; height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--ink);
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .fig-fuga { animation: fig-fuga 3.2s ease-in-out infinite; }
}
@keyframes fig-fuga {
  0%, 10%   { transform: translateX(0); opacity: 0 }
  25%       { transform: translateX(0); opacity: 1 }
  45%       { transform: translateX(14px); opacity: 1 }
  60%, 100% { transform: translateX(0); opacity: 0 }
}

.fig-barreira { flex: none; color: var(--ink-soft); }
.fig-barreira svg { width: 26px; height: 26px; display: block; }

.fig-nuvem {
  padding: 7px 9px;
  font-size: 11px;
  font-weight: 800;
  color: var(--neutral);
  background: color-mix(in srgb, var(--neutral) 12%, transparent);
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--neutral) 32%, transparent);
  text-decoration: line-through;
}

/* --- fontes e privacidade --- */

.ajuda-fontes dl { margin: 6px 0 0; }
.ajuda-fontes dt {
  margin-top: 9px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--ink);
}
.ajuda-fontes dl { margin-top: 10px; }
.ajuda-fontes dd {
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-soft);
}
.ajuda-fontes code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  padding: 1px 4px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--neutral) 18%, transparent);
}
.ajuda-corpo a {
  color: var(--ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.ajuda-base-data { display: block; }
/* especificidade acima de `.ajuda-bloco p`, senão a nota herda a tinta cheia */
.ajuda-bloco p.ajuda-nota {
  margin-top: 14px;
  padding-top: 11px;
  border-top: 1px solid color-mix(in srgb, var(--neutral) 20%, transparent);
  font-size: 12.5px;
  color: var(--ink-soft);
}
.ajuda-privacidade p { font-size: 13.5px; }

.ajuda-naomostrar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  border-top: 1px solid color-mix(in srgb, var(--neutral) 28%, transparent);
  font-size: 12.5px;
  color: var(--ink-soft);
  cursor: pointer;
}
.ajuda-naomostrar input {
  width: 17px; height: 17px;
  flex: none;
  accent-color: var(--ink);
  cursor: pointer;
}

/* ------------------------------------------------------------------ foto */
.photo {
  position: relative;
  height: var(--photo-h);
  width: var(--photo-w);
  aspect-ratio: 3 / 4;
  margin-left: var(--photo-gap);
  border-radius: calc(var(--radius) * .55);
  overflow: hidden;
  background: linear-gradient(160deg, #fff 0%, var(--paper-2) 100%);
  box-shadow: 0 0 0 2px rgba(255,255,255,.92), 0 2px 6px -2px rgba(0,0,0,.55);
  display: grid;
  place-items: center;
}
.photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
}
.photo-empty {
  font-size: 34cqh;
  font-weight: 800;
  line-height: 1;
  color: color-mix(in srgb, var(--c) 55%, var(--neutral));
  opacity: .55;
}

/* ------------------------------------------------------------ identidade */
.ident {
  min-width: 0;
  display: grid;
  gap: 2cqh;
  align-content: center;
  /* A faixa é absoluta e sem z-index, então pinta ACIMA do .ident, que não é
     posicionado: o nome passava por baixo dela. Medido, a invasão na primeira
     linha ia de 3px a 8,2px, pior quanto mais baixa a tela - porque o bloco de
     identidade é centrado, e quanto menor o card mais a primeira linha sobe
     para dentro da parte larga da diagonal.

     O conserto é geométrico, não um ajuste fino por breakpoint: o texto começa
     depois do ponto MAIS LARGO da faixa (a borda superior direita, em
     --band-tail além da foto), mais um respiro. Assim não existe altura de tela
     em que ela alcance o nome.

     O respiro não é preciosismo: sem ele a conta fecha em ZERO, e zero quer
     dizer a diagonal vermelha encostada na primeira letra - foi o que apareceu
     em 320x568, com 0,3px de folga medida. */
  padding-left: max(0px, calc(var(--band-tail) - var(--card-gap) + var(--band-folga)));
}

.name {
  font-size: clamp(11px, min(21cqh, 5.15cqw, calc(66cqw / var(--nl, 14))), 22px);
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.06;
  text-transform: uppercase;
  /* nome inteiro: mira duas linhas (--nl vem do JS); a terceira é rede de
     segurança para nomes de letras largas, que medem mais que a média */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  overflow-wrap: break-word;
}

/* tag ocupando exatamente o lugar do nome (§19, §20.1) */
.name.is-tag {
  justify-self: start;
  max-width: 100%;
  font-size: clamp(7.5px, min(13cqh, 3.3cqw), 13px);
  font-weight: 800;
  letter-spacing: .04em;
  white-space: nowrap;
  padding: .32em .6em;
  border-radius: 3px;
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--neutral) 22%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--neutral) 40%, transparent);
}
.name.is-tag[data-tag="legenda"] {
  color: var(--c-escura, var(--ink));
  background: color-mix(in srgb, var(--c) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent);
}

.meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px clamp(4px, 1.4vw, 7px);
  min-width: 0;
}

/* terceira linha do card: ícones das redes declaradas. Monocromáticos, sem cor
   de marca, e com área de toque de 24px via padding + margem negativa — o
   desenho fica pequeno mas o alvo respeita o dedo. */
.redes {
  display: flex;
  align-items: center;
  gap: clamp(1px, .6cqw, 4px);
  margin: 1px 0 -4px -5px;
}
.redes:empty { display: none; }

.rede {
  display: grid;
  place-items: center;
  cursor: pointer;
  /* o alvo cresce sem o desenho crescer: em tela estreita o ícone encolhe
     até 13px, e só o padding não chegava aos 24px de alvo mínimo */
  padding: 5px;
  min-width: 24px;
  min-height: 24px;
  color: var(--ink-soft);
  border-radius: 4px;
  transition: color .12s ease, background .12s ease;
}
.rede svg {
  width: clamp(13px, 3.6cqw, 16px);
  height: auto;
}
.rede:active { color: var(--c-escura, var(--ink)); }
.rede:focus-visible { outline: 3px solid var(--focus); outline-offset: -2px; }
@media (hover: hover) {
  .rede:hover {
    color: var(--c-escura, var(--ink));
    background: color-mix(in srgb, var(--c) 10%, transparent);
  }
}

/* partido como selo (§16) */
.party {
  flex: none;
  font-size: clamp(8px, min(14cqh, 3.6cqw), 13px);
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1;
  padding: .34em .5em;
  border-radius: 3px;
  color: var(--c-txt, var(--card));
  background: var(--c);
}
.party[hidden] { display: none; }

.office {
  font-size: clamp(7px, min(12cqh, 2.85cqw), 11px);
  font-weight: 700;
  letter-spacing: .045em;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------------------------------------------------------------- número */
.numwrap {
  position: relative;
  padding: 0 clamp(3px, 1.4cqw, 9px);   /* constante: focar não desloca nada (§29) */
}

.digits {
  display: flex;
  align-items: stretch;
  gap: 2px;
  font-size: min(42cqh, calc(31cqw / var(--n, 4)));
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.digit {
  position: relative;
  display: grid;
  place-items: center;
  min-width: .72em;
  padding: .1em .04em;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--c-escura, var(--ink));
  border-radius: .12em;
  /* A casinha é permanente, não só em edição. É o que faz o número parecer
     editável antes de qualquer toque — o §30 sugeria virar bloco tipográfico
     em repouso, mas aí o campo não se anuncia como campo, e a troca de
     aparência entre leitura e edição pesa mais que o ganho estético. */
  background: color-mix(in srgb, var(--c) 8%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 20%, transparent);
  transition: background .12s ease, color .12s ease, box-shadow .12s ease;
}
.digit.is-empty { color: color-mix(in srgb, var(--neutral) 60%, transparent); }
.digit.is-empty::after { content: "-"; }

/* separador pontilhado depois dos dois dígitos do partido (§20) */
.digit.after-party { margin-left: .32em; }
.digit.after-party::before {
  content: "";
  position: absolute;
  left: -.18em; top: 12%; bottom: 12%;
  border-left: 2px dotted color-mix(in srgb, var(--neutral) 75%, transparent);
}

/* em edição a casinha só ganha um pouco mais de presença — nenhuma mudança de
   geometria, para não haver deslocamento ao focar (§29) */
.card.is-focused .digit {
  background: color-mix(in srgb, var(--c) 13%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 32%, transparent);
}
.card.is-focused .digit.is-caret {
  color: var(--c-txt, var(--card));
  background: var(--c);
  box-shadow: inset 0 0 0 1px var(--c), 0 0 0 2px color-mix(in srgb, var(--c) 30%, transparent);
}

/* input mestre: recebe o teclado virtual, invisível, sem capturar toques
   (o card decide qual dígito focar — ver §26 em app.js) */
.sink {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  border: 0; padding: 0; margin: 0;
  font-size: 16px;           /* evita zoom automático no iOS ao focar */
  pointer-events: none;
  -webkit-user-select: text;
}

/* card em edição: halo, sem deslocamento (§29) */
.card.is-focused {
  background: #fff;
  box-shadow: 0 0 0 2px var(--ink), 0 0 0 6px color-mix(in srgb, var(--c) 22%, transparent),
              0 6px 16px -10px rgba(0,0,0,.6);
}

/* ---------------------------------------------------------------- toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  padding: 9px 15px;
  font-size: 13px;
  font-weight: 700;
  color: var(--card);
  background: var(--ink);
  border-radius: 999px;
  box-shadow: 0 8px 20px -8px rgba(0,0,0,.6);
  z-index: 10;
}
.toast[hidden] { display: none; }

/* -------------------------------------------------- responsividade vertical
   ordem de redução exigida pelo §32: gaps → padding → texto secundário →
   header → tamanho dos dígitos. Nenhum elemento do card é removido. */
@media (max-height: 780px) {
  :root { --gap: clamp(4px, .9vh, 8px); }
}
@media (max-height: 680px) {
  .header { padding-top: 0; }
  .digits { font-size: min(40cqh, calc(30cqw / var(--n, 4))); }
}
@media (max-height: 620px) {
  .brand-name { font-size: clamp(16px, 4.6vw, 20px); }
  .digits { font-size: min(37cqh, calc(29cqw / var(--n, 4))); }
}

/* teclado virtual aberto: aperta o header e os gaps, mantém os 6 cards */
body.kb-open { --gap: 4px; }

/* ------------------------------------------------ adaptação para desktop */
@media (min-width: 700px) {
  body {
    padding-inline: 0;
    place-content: stretch center;
    grid-template-columns: min(620px, 100%);
  }
  .header, .cards, .rodape { width: min(620px, 100vw - 32px); margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}