/* Urna Velox — página de resultados (etapa 5).
 * Regras da casa: toda mudança visual por transform/opacity (nada de mexer em width/height/top/left/margin de algo
 * que empurra o resto); tamanhos reservados de antemão; números em tabular-nums; a fonte é embutida e esperada antes
 * do primeiro desenho. Meta: CLS = 0. */

@font-face {
  font-family: "Archivo UV";
  src: url("/static/archivo.woff2") format("woff2-variations"), url("/static/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: block;
}

@property --angulo {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

:root {
  --fundo: #0d1431;
  --fundo-2: #141d45;
  --aurora-1: rgba(112, 86, 255, 0.30);
  --aurora-2: rgba(0, 196, 255, 0.18);
  --aurora-3: rgba(255, 92, 168, 0.14);
  --vidro: rgba(255, 255, 255, 0.065);
  --vidro-forte: rgba(255, 255, 255, 0.11);
  --borda: rgba(255, 255, 255, 0.15);
  --borda-luz: rgba(255, 255, 255, 0.32);
  --texto: #eef1ff;
  --texto-2: #a8b2d8;
  --texto-3: #7680a8;
  --trilho: rgba(255, 255, 255, 0.08);
  --sombra: 0 18px 40px rgba(2, 5, 22, 0.45);
  --ok: #4fe0b0;
  --alerta: #ffc24b;
  --erro: #ff6b8b;
  --raio-g: 26px;
  --raio-m: 16px;
  --raio-p: 999px;
  --linha-cand: 76px;
  --feed-h: 64px;
  --topo-h: 64px;
  --mola: cubic-bezier(0.22, 0.9, 0.24, 1);
  color-scheme: dark;
}

:root[data-tema="claro"] {
  --fundo: #e9edf8;
  --fundo-2: #f6f7fc;
  --aurora-1: rgba(112, 86, 255, 0.20);
  --aurora-2: rgba(0, 170, 255, 0.16);
  --aurora-3: rgba(255, 92, 168, 0.12);
  --vidro: rgba(255, 255, 255, 0.58);
  --vidro-forte: rgba(255, 255, 255, 0.78);
  --borda: rgba(30, 40, 90, 0.12);
  --borda-luz: rgba(255, 255, 255, 0.9);
  --texto: #121836;
  --texto-2: #4a5378;
  --texto-3: #7a83a6;
  --trilho: rgba(20, 30, 80, 0.08);
  --sombra: 0 16px 36px rgba(40, 50, 110, 0.16);
  /* no fundo claro o amarelo/verde/rosa do escuro não têm contraste (aviso ilegível); tons escurecidos, ≥ 4,5:1 */
  --ok: #0b8a64;
  --alerta: #9a5b00;
  --erro: #c4234b;
  color-scheme: light;
}

* { box-sizing: border-box; }

html, body { margin: 0; }
/* a barra de rolagem vertical aparece quando o painel cresce; sem a calha reservada o cabeçalho anda ~15 px (CLS) */
html { scrollbar-gutter: stable; }
/* rede de segurança: nada no topo pode alargar a página no celular (o Safari do iOS rola o html, não o body) */
html { overflow-x: clip; }
.topo > * { min-width: 0; }

body {
  min-height: 100vh;
  background: var(--fundo);
  color: var(--texto);
  font-family: "Archivo UV", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  font-stretch: 100%;
  overflow-x: clip;
  padding-bottom: calc(var(--feed-h) + 28px);
  -webkit-tap-highlight-color: transparent;
}

/* fundo: aurora estática (camada fixa, não se move) */
.aurora {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60vmax 40vmax at 8% -6%, var(--aurora-1), transparent 70%),
    radial-gradient(50vmax 36vmax at 100% 10%, var(--aurora-2), transparent 70%),
    radial-gradient(55vmax 40vmax at 60% 110%, var(--aurora-3), transparent 70%),
    linear-gradient(180deg, var(--fundo-2), var(--fundo));
  pointer-events: none;
}

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

button, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid #9db7ff; outline-offset: 2px; }

/* ---------------------------------------------------------------- topo */
.topo {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 14px;
  height: var(--topo-h);
  padding: 0 clamp(16px, 3vw, 36px);
}

.marca {
  position: relative;
  justify-self: start; /* a caixa fica do tamanho do texto (no celular a coluna é 1fr): a versão cola em "Velox" */
  font-stretch: 125%;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--texto);
  text-decoration: none;
  white-space: nowrap;
}
.marca span { font-weight: 300; color: var(--texto-2); }
/* versão: etiqueta discreta logo abaixo de "Velox", fora do fluxo (position: absolute) — não alarga a marca nem
   empurra a conexão e o botão de tema (no celular, a largura extra fazia a página inteira transbordar para o lado) */
.marca .marca-versao {
  position: absolute;
  right: 1px;
  top: calc(100% - 1px);
  font-size: 9px;
  font-weight: 450;
  font-stretch: 100%;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--texto-3);
  opacity: 0.8;
  pointer-events: none;
  user-select: none;
}

.rota { display: flex; gap: 8px; align-items: center; min-width: 0; height: 40px; }
.rota .passo {
  height: 36px;
  border-radius: var(--raio-p);
  border: 1px solid var(--borda);
  background: var(--vidro);
  padding: 0 14px;
  max-width: 220px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
}
.rota select.passo { appearance: none; padding-right: 30px; background-image: linear-gradient(45deg, transparent 50%, var(--texto-2) 50%), linear-gradient(135deg, var(--texto-2) 50%, transparent 50%); background-position: calc(100% - 17px) 15px, calc(100% - 12px) 15px; background-size: 5px 5px; background-repeat: no-repeat; }
.rota select.passo option { background: var(--fundo-2); color: var(--texto); }
.rota .sep { color: var(--texto-3); }

.conexao {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 210px;
  height: 36px;
  justify-content: flex-start;
  padding: 0 14px;
  border-radius: var(--raio-p);
  border: 1px solid var(--borda);
  background: var(--vidro);
  font-size: 14px;
  color: var(--texto-2);
  white-space: nowrap;
  overflow: hidden;
}
.conexao .ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--texto-3); flex: none; }
.conexao[data-estado="vivo"] .ponto { background: var(--ok); animation: pulso 2.4s ease-in-out infinite; }
.conexao[data-estado="caiu"] .ponto, .conexao[data-estado="pausa"] .ponto { background: var(--alerta); }
.conexao[data-estado="encerrada"] .ponto { background: #9db7ff; }
/* simulação com dados reais (ciclo diário): o selo ganha o complemento "simulação" */
.conexao.sim { width: auto; min-width: 210px; border-color: rgba(157, 183, 255, 0.55); }
.conexao .comp {
  font-size: 11px; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; color: var(--texto);
  padding: 2px 7px; border-radius: 999px; background: rgba(157, 183, 255, 0.22); flex: none;
}
.faixa .chip.sim { border-color: rgba(157, 183, 255, 0.55); background: rgba(157, 183, 255, 0.14); color: var(--texto); }
/* o chip da simulação é um botão (abre a explicação: dados reais, retotalização, auditoria) */
.faixa button.chip { font: inherit; cursor: pointer; }
.faixa .chip.sim b { font-weight: 650; }
.faixa button.chip.sim:hover, .faixa .chip.playlist:hover { border-color: var(--borda-luz); }
.faixa .chip.oculto { pointer-events: none; }
/* playlist de simulados (página /playlist, servida pelo uv-playlist do ciclo) */
.faixa .chip.playlist {
  flex: none; color: var(--texto); text-decoration: none; font-weight: 650;
  border-color: rgba(255, 95, 210, 0.5); background: linear-gradient(90deg, rgba(79, 195, 255, 0.16), rgba(140, 107, 255, 0.16), rgba(255, 95, 210, 0.16));
}
.faixa .chip.playlist.oculto { display: none; }
.faixa .chip:focus-visible { outline: 2px solid #4fc3ff; outline-offset: 2px; }
.folha dd a { color: inherit; font-weight: 650; }
@keyframes pulso { 50% { opacity: 0.35; } }

.icone-btn {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--borda); background: var(--vidro); cursor: pointer;
  display: grid; place-items: center; font-size: 16px;
}

/* faixa de estado (altura fixa: um alerta novo não empurra nada) */
.faixa {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 clamp(16px, 3vw, 36px);
  font-size: 13px;
  color: var(--texto-2);
  overflow: hidden;
  white-space: nowrap;
}
.faixa .chip {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--raio-p);
  border: 1px solid var(--borda); background: var(--vidro); transition: opacity 0.4s;
}
.faixa .chip.alerta { border-color: rgba(255, 194, 75, 0.45); color: var(--alerta); }
.faixa .chip.oculto { opacity: 0; }

/* cargos */
.cargos {
  display: flex;
  gap: 6px;
  height: 46px;
  align-items: center;
  padding: 0 clamp(16px, 3vw, 36px);
  overflow-x: auto;
  scrollbar-width: none;
}
.cargos::-webkit-scrollbar { display: none; }
.cargos button {
  flex: none;
  height: 36px;
  padding: 0 16px;
  border-radius: var(--raio-p);
  border: 1px solid transparent;
  background: transparent;
  color: var(--texto-2);
  cursor: pointer;
  font-weight: 500;
}
.cargos button[aria-selected="true"] { background: var(--vidro-forte); border-color: var(--borda); color: var(--texto); }

/* ---------------------------------------------------------------- painel */
.painel {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr);
  gap: 18px;
  padding: 10px clamp(16px, 3vw, 36px) 0;
  align-items: start;
  min-height: 560px;
}
.lado { display: grid; gap: 18px; }

.carregando { grid-column: 1 / -1; height: 520px; display: grid; place-items: center; color: var(--texto-2); }

/* vidro "tátil": translúcido, borda clara, sombra; inclina de leve sob o ponteiro (só transform) */
.vidro {
  position: relative;
  background: var(--vidro);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra), inset 0 1px 0 var(--borda-luz);
  transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  transition: transform 0.5s var(--mola);
  isolation: isolate;
}
.vidro::after {
  /* reflexo que segue o ponteiro (opacity) */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.10), transparent 60%);
  opacity: var(--luz, 0);
  transition: opacity 0.4s;
  pointer-events: none;
}
.vidro:active { transition-duration: 0.15s; }

.cartao-titulo { margin: 0; font-size: 15px; font-weight: 600; color: var(--texto-2); font-stretch: 100%; }

/* corrida (candidatos) */
.corrida { padding: 22px 24px 18px; }
.corrida-cab { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 12px; height: 74px; }
/* sem isto o item do grid não encolhe abaixo do texto (min-width: auto) e o título passa da borda do card em vez de
   ganhar reticência */
.corrida-cab > div { min-width: 0; }
.corrida h1 { margin: 0; font-size: 28px; line-height: 1.1; font-stretch: 118%; font-weight: 750; letter-spacing: -0.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.corrida .sub { margin: 6px 0 0; color: var(--texto-2); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.selo {
  position: relative;
  height: 40px;
  width: 270px;
  border-radius: var(--raio-p);
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 650;
  text-align: center;
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.6s, transform 0.6s var(--mola);
  background: var(--vidro-forte);
}
.selo.ligado { opacity: 1; transform: scale(1); }

.lista { list-style: none; margin: 0; padding: 0; position: relative; contain: layout; }
.cand {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--linha-cand);
  display: grid;
  grid-template-columns: 6px 54px minmax(0, 1fr) 110px 150px;
  grid-template-rows: 1fr 8px;
  column-gap: 12px;
  align-items: center;
  padding: 8px 4px 10px;
  transform: translateY(calc(var(--pos, 0) * var(--linha-cand)));
  transition: transform 0.75s var(--mola), opacity 0.4s;
  border-radius: var(--raio-m);
}
.cand .cor { grid-row: 1 / span 2; width: 6px; height: 46px; border-radius: 3px; background: var(--c); }
.cand .num { font-size: 22px; font-weight: 700; font-stretch: 112%; color: var(--texto-2); }
.cand .quem { min-width: 0; }
.cand .nome { font-size: 19px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 8px; }
.cand .nome b { font-weight: inherit; overflow: hidden; text-overflow: ellipsis; }
.cand .detalhe { font-size: 13px; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cand .pct { justify-self: end; font-size: 24px; font-weight: 720; font-stretch: 110%; }
.cand .qtd { justify-self: end; font-size: 15px; color: var(--texto-2); }
.cand .barra { grid-column: 3 / -1; height: 6px; border-radius: 3px; background: var(--trilho); overflow: hidden; }
.cand .barra i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 60%, white)); transform-origin: left center; transform: scaleX(0); transition: transform 0.8s var(--mola); border-radius: 3px; }
.cand .pilula {
  flex: none;
  /* largura fixa: o texto muda ("2º turno às 21:00:20" → "2º turno") sem mexer em nada ao lado */
  width: 150px; justify-content: center; overflow: hidden; white-space: nowrap;
  font-size: 12px; font-weight: 650; height: 22px; padding: 0 9px; border-radius: var(--raio-p); display: inline-flex; align-items: center;
  background: var(--vidro-forte); border: 1px solid var(--borda); opacity: 0; transition: opacity 0.5s;
}
/* fora do fluxo enquanto vazia: a pílula reservada em todas as linhas cortava os nomes ("FLAV…" no celular).
   Ela fica no fim da linha do nome; ao aparecer só encurta o nome, nada se desloca (CLS conferido). */
.cand .pilula:not(.ligado) { display: none; }
.cand .pilula.ligado { opacity: 1; }
@starting-style { .cand .pilula.ligado { opacity: 0; } }
.cand.nao-apto { opacity: 0.6; }

/* hodômetro: cada dígito é uma coluna 0–9 que rola por translateY; separadores fixos; largura reservada */
.hod { display: inline-flex; align-items: baseline; white-space: nowrap; line-height: 1; font-variant-numeric: tabular-nums; }
.hod .dg { display: inline-block; height: 1em; overflow: hidden; width: 1ch; position: relative; transition: opacity 0.35s; }
.hod .col { display: flex; flex-direction: column; transition: transform 0.9s var(--mola); will-change: transform; }
.hod .col span { height: 1em; line-height: 1; display: block; text-align: center; }
.hod .sp { display: inline-block; transition: opacity 0.35s; }
.hod .vazio { opacity: 0; }
.hod.nulo .dg, .hod.nulo .sp { opacity: 0.22; }
.hod .suf { margin-left: 0.18em; font-size: 0.62em; color: var(--texto-2); }
/* hodômetro "enxuto": número sozinho na linha, alinhado ao rótulo. A largura reservada não muda (os dígitos vazios à
   esquerda continuam ocupando o lugar); o número todo desliza para a esquerda por transform o tanto dos vazios
   (hodometro.js, #deslizar). Antes (até a 0.6.x) a coluna vazia tinha largura 0 e, quando um dígito aparecia ou sumia,
   os outros andavam por layout: CLS de 10⁻⁶ a 10⁻⁵ no cartão de votos e no "faltam" (fumaça da etapa 7). */
.hod.enxuto .vis { display: inline-flex; align-items: baseline; transition: transform 0.35s var(--mola); will-change: transform; }

/* apuração */
.apuracao { padding: 20px 22px; height: 300px; display: grid; grid-template-columns: 132px 1fr; grid-template-rows: auto 1fr; column-gap: 18px; row-gap: 10px; }
.apuracao .cartao-titulo { grid-column: 1 / -1; }
.anel { width: 132px; height: 132px; position: relative; }
.anel svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.anel .fundo-anel { stroke: var(--trilho); }
.anel .arco { stroke: url(#grad-anel); stroke-linecap: round; }
.anel .centro { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.anel .centro .hod { font-size: 24px; font-weight: 750; font-stretch: 108%; }
.anel .centro small { display: block; font-size: 12px; color: var(--texto-2); margin-top: 4px; }
.numeros { display: grid; gap: 12px; align-content: start; }
.numeros .rot { font-size: 13px; color: var(--texto-2); }
.numeros .val { font-size: 19px; font-weight: 650; }
.numeros .val .de { color: var(--texto-3); font-weight: 450; font-size: 14px; }
/* M-003: horário do TSE embaixo do horário do Urna Velox (linha reservada desde a montagem: CLS 0) */
.numeros .hora-tse { font-size: 12px; line-height: 16px; min-height: 16px; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.faltam { grid-column: 1 / -1; position: relative; height: 70px; border-radius: var(--raio-m); background: var(--vidro); border: 1px solid var(--borda); padding: 10px 14px; }
.faltam .camada { position: absolute; inset: 10px 14px; transition: opacity 0.6s; }
.faltam .camada.oculta { opacity: 0; pointer-events: none; }
.faltam .rot { font-size: 13px; color: var(--texto-2); }
.faltam .val { font-size: 24px; font-weight: 750; font-stretch: 110%; margin-top: 4px; }
.faltam .decidido { display: grid; align-content: center; height: 100%; font-weight: 700; font-size: 16px; }
.faltam .decidido small { font-weight: 450; color: var(--texto-2); font-size: 13px; }

/* curva */
.curva { padding: 18px 20px 14px; height: 250px; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 8px; }
.curva .graf { position: relative; min-height: 0; margin: 0 34px 14px 0; }
.curva svg { width: 100%; height: 100%; min-height: 0; overflow: visible; display: block; }
/* escala dos candidatos à direita (topo, meio, base) e o começo e o fim do tempo embaixo; larguras fixas */
.curva .rot-y { position: absolute; right: -34px; width: 30px; transform: translateY(-50%); font-size: 10px; color: var(--texto-3);
  font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.curva .rot-y.r0 { top: 0; } .curva .rot-y.r1 { top: 50%; } .curva .rot-y.r2 { top: 100%; }
.curva .rot-t { position: absolute; top: calc(100% + 2px); font-size: 10px; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.curva .rot-t.ini { left: 0; } .curva .rot-t.fim { right: 0; }
.curva .eixo { stroke: var(--trilho); stroke-width: 1; vector-effect: non-scaling-stroke; }
.curva .linha { fill: none; stroke-width: 2.2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.curva .area { stroke: none; }
.legenda { display: flex; gap: 14px; font-size: 12px; color: var(--texto-2); height: 18px; overflow: hidden; white-space: nowrap; }
/* nomes longos encolhem com reticências (no celular o segundo candidato sumia) */
.legenda span { flex: 0 1 auto; min-width: calc(16px + 5ch); overflow: hidden; text-overflow: ellipsis; }
.legenda span:first-child { flex: none; }
.legenda i { display: inline-block; width: 10px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; background: var(--c); }

/* previsão (etapa 8): altura fixa; cada texto numa linha de altura reservada, com reticência (nada empurra nada) */
.previsao { padding: 18px 20px 14px; height: 236px; display: grid; grid-template-rows: auto 66px minmax(0, 1fr) 18px; gap: 8px; }
.previsao .cartao-titulo small { font-weight: 400; color: var(--texto-3); font-size: 0.85em; }
.previsao .pv-topo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; min-width: 0; }
.previsao .pv-txt { min-width: 0; display: grid; grid-template-rows: 18px 24px 18px; gap: 2px; }
.previsao .pv-rot, .previsao .pv-nota, .previsao .pv-fim { font-size: 12.5px; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 18px; }
.previsao .pv-nota, .previsao .pv-fim { color: var(--texto-3); }
.previsao .pv-nota.alerta { color: var(--alerta); }
.previsao .pv-faixa { font-size: 18px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 24px; }
.previsao .pv-hod { text-align: right; font-size: 26px; font-weight: 700; line-height: 1; width: 88px; }
.previsao .pv-hod small { display: block; font-size: 10.5px; font-weight: 400; color: var(--texto-3); margin-top: 4px; }
.previsao .pv-graf { position: relative; min-height: 0; }
.previsao .pv-graf svg { width: 100%; height: 100%; display: block; overflow: visible; }
.previsao .pv-banda { fill: rgba(140, 107, 255, 0.28); stroke: none; }
.previsao .pv-med { fill: none; stroke: #a996ff; stroke-width: 1.8; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.previsao .pv-real { stroke: var(--ok); stroke-width: 1.5; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }

/* votos */
.votos { padding: 18px 20px; height: 196px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr 1fr; gap: 8px 16px; }
.votos .cartao-titulo { grid-column: 1 / -1; }
.votos .rot { font-size: 13px; color: var(--texto-2); }
.votos .val { font-size: 18px; font-weight: 650; }
.votos .p { font-size: 12px; color: var(--texto-3); }

/* ---------------------------------------------------------------- brilho arco-íris (só nos destaques) */
/* (o elemento com brilho já é posicionado: .selo relativo, .cand e .feed .item absolutos — nunca mudar isso aqui) */
.brilho::before, .brilho > .halo {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--angulo), #ff5f7e, #ffb84d, #f9f871, #4fe0b0, #4fc3ff, #8c6bff, #ff5fd2, #ff5f7e);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: girar 5s linear infinite;
  pointer-events: none;
  z-index: 1;
}
.brilho > .halo {
  /* halo: o mesmo anel, mais grosso e desfocado (só a borda brilha; o miolo continua de vidro) */
  inset: -5px;
  padding: 5px;
  filter: blur(10px);
  opacity: 0.55;
  z-index: 0;
}
@keyframes girar { to { --angulo: 360deg; } }

/* ---------------------------------------------------------------- feed (ticker fixo no rodapé) */
.feed {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  height: var(--feed-h);
  border-radius: 20px;
  overflow: hidden;
  z-index: 10;
}
.feed .trilho { position: absolute; inset: 0 0 0 60px; overflow: hidden; }
/* botão do histórico, à esquerda do letreiro (os itens passam por trás dele e somem na borda do trilho) */
.feed .hist-btn { position: absolute; left: 9px; top: calc((var(--feed-h) - 44px) / 2); width: 44px; height: 44px; z-index: 2; font-size: 17px; }
.feed .hist-btn[aria-expanded="true"] { background: var(--vidro-forte); border-color: var(--borda-luz); }
.feed .item {
  position: absolute;
  top: 10px;
  left: 0;
  height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--texto);
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
  will-change: transform;
  transition: opacity 0.5s;
}
.feed .item:hover, .feed .item:focus-visible { background: var(--vidro-forte); border-color: var(--borda); }
.feed .item .ic { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; font-size: 13px; background: var(--vidro-forte); flex: none; }
.feed .item .t { color: var(--texto-3); font-size: 12px; }
.feed .item.fixo { width: 470px; }
.feed .item.fixo .txt { overflow: hidden; text-overflow: ellipsis; }
.feed .item .hod { font-weight: 700; }
.feed .pausa { position: absolute; right: 12px; top: 20px; font-size: 12px; color: var(--texto-3); opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.feed[data-pausado="1"] .pausa { opacity: 1; }
.feed .vazio-feed { position: absolute; left: 72px; top: 22px; font-size: 14px; color: var(--texto-3); transition: opacity 0.4s; }

/* detalhe de um marco (folha que sobe; só transform) */
.folha {
  position: fixed;
  left: 50%;
  bottom: calc(var(--feed-h) + 24px);
  width: min(520px, calc(100vw - 24px));
  padding: 20px 22px;
  z-index: 20;
  transform: translate(-50%, 24px) scale(0.98);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.45s var(--mola), opacity 0.3s;
}
.folha.aberta { transform: translate(-50%, 0) scale(1); opacity: 1; pointer-events: auto; }
/* texto mais longo que a tela (celular): a folha rola em vez de sair pelo alto */
.folha { max-height: calc(100dvh - var(--feed-h) - var(--player-h, 0px) - 48px); overflow-y: auto; overscroll-behavior: contain; }
.folha h2 { margin: 0 34px 10px 0; font-size: 18px; font-stretch: 110%; }
.folha dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: 14px; }
.folha dt { color: var(--texto-2); }
.folha dd { margin: 0; }
.folha .fechar { position: absolute; right: 14px; top: 14px; }

/* histórico do feed: painel fixo de altura fixa, que sobe do canto do letreiro (só transform/opacity) */
.hist {
  position: fixed; left: 12px; bottom: calc(var(--feed-h) + var(--player-h) + 24px);
  width: min(600px, calc(100vw - 24px)); height: min(62vh, 600px);
  display: grid; grid-template-rows: auto auto auto minmax(0, 1fr); padding: 16px 18px 12px; z-index: 19;
  transform: translateY(24px) scale(0.98); transform-origin: 30px 100%; opacity: 0; pointer-events: none;
  transition: transform 0.45s var(--mola), opacity 0.3s;
}
:root.com-replay .hist { bottom: calc(var(--feed-h) + var(--player-h) + 32px); }
.hist.aberta { transform: none; opacity: 1; pointer-events: auto; }
.hist-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.hist-cab h2 { margin: 0; font-size: 18px; font-stretch: 110%; }
.hist-filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.hist .chip {
  height: 32px; padding: 0 12px; border-radius: 16px; border: 1px solid var(--borda); background: transparent; color: var(--texto-3);
  font: inherit; font-size: 13px; font-weight: 600; display: inline-flex; gap: 8px; align-items: center; cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.hist .chip[aria-pressed="true"] { background: var(--vidro-forte); color: var(--texto); border-color: var(--borda-luz); }
.hist .chip-n { min-width: 3ch; text-align: right; font-variant-numeric: tabular-nums; color: var(--texto-2); font-weight: 500; }
.hist .chip[data-cat="decisao"]::before, .hist .chip[data-cat="virada"]::before, .hist .chip[data-cat="andamento"]::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--cc); }
.hist .chip[data-cat="decisao"], .hist .h-item.c-decisao { --cc: #ff5fd2; }
.hist .chip[data-cat="virada"], .hist .h-item.c-virada { --cc: #ffb347; }
.hist .chip[data-cat="andamento"], .hist .h-item.c-andamento { --cc: #4fc3ff; }
.hist-busca {
  flex: 1 1 160px; min-width: 0; height: 32px; padding: 0 12px; border-radius: 16px; border: 1px solid var(--borda); background: var(--vidro);
  color: var(--texto); font: inherit; font-size: 13px;
}
.hist-tempo { display: grid; grid-template-columns: 1fr; row-gap: 2px; margin-bottom: 8px; }
.hist-hora { font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--texto-2); height: 18px; }
.hist-ext { display: flex; justify-content: space-between; font-size: 11px; color: var(--texto-3); font-variant-numeric: tabular-nums; height: 14px; }
.hist-ext span { width: 10ch; }
.hist-ext #hist-fim { text-align: right; }
#hist-tempo { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; margin: 0; background: transparent; cursor: pointer; }
#hist-tempo::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, #ff5fd2, #8c6bff var(--p, 100%), var(--trilho) var(--p, 100%)); }
#hist-tempo::-moz-range-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, #ff5fd2, #8c6bff var(--p, 100%), var(--trilho) var(--p, 100%)); }
#hist-tempo::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(255, 95, 210, 0.4), 0 2px 8px rgba(0, 0, 0, 0.35); }
#hist-tempo::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(255, 95, 210, 0.4); }
#hist-tempo:disabled { opacity: 0.4; cursor: default; }
#hist-tempo:focus-visible { outline: 2px solid var(--borda-luz); outline-offset: 4px; border-radius: 4px; }
.hist-lista { position: relative; overflow-y: auto; overscroll-behavior: contain; margin: 0 -8px; padding: 0 8px; scrollbar-width: thin; }
.hist-vazio { grid-row: 4; align-self: start; padding: 18px 4px; font-size: 14px; color: var(--texto-3); }
.hist-vazio[hidden] { display: none; }
.hist .h-item { border-radius: 12px; box-shadow: inset 3px 0 0 var(--cc); margin: 0 0 4px; transition: background 0.25s; }
.hist .h-item.atual { background: var(--vidro-forte); box-shadow: inset 3px 0 0 var(--cc), inset 0 0 0 1px var(--borda-luz); }
.hist .h-cab {
  width: 100%; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px;
  border: 0; background: transparent; color: var(--texto); font: inherit; font-size: 14px; text-align: left; cursor: pointer; border-radius: 12px;
}
.hist .h-cab:hover, .hist .h-cab:focus-visible { background: var(--vidro); }
.hist .h-cab .ic { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; font-size: 13px; background: var(--vidro-forte); }
.hist .h-t { color: var(--texto-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.hist .h-det { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0; padding: 2px 12px 10px 44px; font-size: 13px; }
.hist .h-det dt { color: var(--texto-2); }
.hist .h-det dd { margin: 0; }

/* ---------------------------------------------------------------- celular */
/* barra do replay (só no site simulado com --controle-replay), como a de um vídeo: presa acima do letreiro, largura
   inteira; com ela a página reserva o espaço (classe com-replay posta antes do primeiro desenho), então nada fica
   escondido nem pula */
:root { --player-h: 0px; }
:root.com-replay { --player-h: 54px; }
:root.com-replay body { padding-bottom: calc(var(--feed-h) + var(--player-h) + 36px); }
:root.com-replay .folha { bottom: calc(var(--feed-h) + var(--player-h) + 32px); }
.player {
  position: fixed; left: 12px; right: 12px; bottom: calc(var(--feed-h) + 20px); height: var(--player-h); z-index: 12;
  border-radius: 18px; display: grid; align-items: center; column-gap: 12px; padding: 0 14px 0 10px;
  grid-template-columns: 36px 9ch auto minmax(0, 1fr) auto auto;
  grid-template-areas: "play hora ini linha fim vel";
}
.player .pl-play { grid-area: play; font-size: 12px; }
.player .pl-hora { grid-area: hora; font-size: 17px; font-weight: 720; font-stretch: 108%; font-variant-numeric: tabular-nums; }
.player.pausado .pl-hora { color: var(--alerta); }
.player .pl-ini { grid-area: ini; }
.player .pl-fim { grid-area: fim; }
.player .pl-ini, .player .pl-fim { font-size: 12px; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.player .pl-linha { grid-area: linha; position: relative; height: 100%; display: flex; align-items: center; }
.player .pl-tempo {
  -webkit-appearance: none; appearance: none; width: 100%; height: 22px; margin: 0; background: transparent; cursor: pointer; position: relative; z-index: 2;
}
.player .pl-tempo::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, #8c6bff, #4fc3ff var(--p, 0%), var(--trilho) var(--p, 0%));
}
.player .pl-tempo::-moz-range-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, #8c6bff, #4fc3ff var(--p, 0%), var(--trilho) var(--p, 0%)); }
.player .pl-tempo::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; margin-top: -5px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 3px rgba(140, 107, 255, 0.45), 0 2px 8px rgba(0, 0, 0, 0.35);
}
.player .pl-tempo::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(140, 107, 255, 0.45); }
.player .pl-tempo:focus-visible { outline: 2px solid var(--borda-luz); outline-offset: 4px; border-radius: 4px; }
.player .pl-marcas { position: absolute; left: 8px; right: 8px; top: 2px; height: 12px; pointer-events: none; }
.player .pl-marcas span { position: absolute; transform: translateX(-50%); font-size: 9px; line-height: 1; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.player .pl-alvo { position: absolute; top: 50%; width: 2px; height: 16px; margin: -8px 0 0 -1px; background: var(--alerta); border-radius: 1px; display: none; z-index: 1; }
.player.buscando .pl-alvo { display: block; }
.player .pl-dica {
  position: absolute; bottom: calc(100% + 2px); transform: translateX(-50%); padding: 3px 8px; border-radius: var(--raio-p);
  background: var(--vidro-forte); border: 1px solid var(--borda); font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s; pointer-events: none;
}
.player.com-dica .pl-dica { opacity: 1; }
.player .pl-vel {
  grid-area: vel; height: 32px; padding: 0 10px; border-radius: var(--raio-p); border: 1px solid var(--borda); background: var(--vidro);
  color: var(--texto); font: inherit; font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; cursor: pointer;
}
.player .pl-vel option { background: var(--fundo-2); color: var(--texto); }
.player .pl-estado {
  position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); padding: 3px 10px; border-radius: var(--raio-p);
  background: var(--vidro-forte); border: 1px solid var(--borda); font-size: 12px; white-space: nowrap; color: var(--texto-2);
}
.player .pl-estado:empty { display: none; }
.player.buscando .pl-estado { color: var(--texto); border-color: var(--borda-luz); }
.pl-veu { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: color-mix(in srgb, var(--fundo) 55%, transparent); backdrop-filter: blur(6px); }
.pl-veu[hidden] { display: none; }
.pl-veu-txt { max-width: min(520px, calc(100vw - 48px)); padding: 18px 22px; border-radius: var(--raio-m); background: var(--vidro-forte); border: 1px solid var(--borda); text-align: center; font-size: 15px; }

/* ---------------------------------------------------------------- comparação com o TSE (etapa 7, comparacao.js)
   Linha das fontes sempre presente (altura fixa); as células do TSE e da diferença existem em toda linha desde a
   montagem e só aparecem no modo "Ambos" (trocar de modo é um clique: não conta no CLS). */
.fontes { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 12px; height: 40px; margin: 4px 0 6px; }
.comparar { display: inline-flex; gap: 2px; padding: 3px; height: 34px; border-radius: var(--raio-p); background: var(--vidro); border: 1px solid var(--borda); }
.comparar button { height: 26px; padding: 0 12px; border: 0; border-radius: var(--raio-p); background: transparent; color: var(--texto-2);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background 0.3s, color 0.3s; }
.comparar button[aria-checked="true"] { background: var(--vidro-forte); color: var(--texto); box-shadow: inset 0 0 0 1px var(--borda); }
.comparar button:focus-visible { outline: 2px solid var(--borda-luz); outline-offset: 1px; }
.f-txt { min-width: 0; display: flex; flex-direction: column; font-size: 12.5px; line-height: 1.3; color: var(--texto-2); }
.f-txt span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 16px; }
.f-est { width: 220px; text-align: right; font-size: 12px; font-weight: 600; color: var(--alerta); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; opacity: 0; transition: opacity 0.4s; }
.f-est.ligado { opacity: 1; }
.f-est[data-estado="aguardando"] { color: var(--texto-2); }
.colunas { display: none; }
.corrida.m-ambos .colunas { display: grid; grid-template-columns: 6px 44px minmax(0, 1fr) 112px 128px 104px; column-gap: 12px; height: 18px;
  padding: 0 4px; font-size: 11px; font-weight: 600; color: var(--texto-3); text-transform: uppercase; letter-spacing: 0.06em; }
.colunas .c-uv { grid-column: 4; justify-self: end; }
.colunas .c-tse { grid-column: 5; justify-self: end; }
.colunas .c-dif { grid-column: 6; justify-self: end; }
.colunas .uv-curto { display: none; }
.cand .tse, .cand .dif { display: none; }
.lista.m-ambos .cand { grid-template-columns: 6px 44px minmax(0, 1fr) 112px 128px 104px; grid-template-rows: 1fr 1fr 6px; row-gap: 0; }
.lista.m-ambos .cand .cor { grid-row: 1 / span 3; }
.lista.m-ambos .cand .num { grid-row: 1 / span 2; font-size: 18px; }
.lista.m-ambos .cand .quem { grid-column: 3; grid-row: 1 / span 2; }
.lista.m-ambos .cand .pct { grid-column: 4; grid-row: 1; font-size: 19px; align-self: end; }
.lista.m-ambos .cand .qtd { grid-column: 4; grid-row: 2; font-size: 12px; align-self: start; }
.lista.m-ambos .cand .tse { display: flex; grid-column: 5; grid-row: 1 / span 2; flex-direction: column; align-items: flex-end; justify-content: center; }
.lista.m-ambos .cand .dif { display: flex; grid-column: 6; grid-row: 1 / span 2; flex-direction: column; align-items: flex-end; justify-content: center; }
.lista.m-ambos .cand .barra { grid-column: 3 / -1; grid-row: 3; }
.cand .tse-l1 { display: inline-flex; align-items: center; gap: 6px; font-size: 19px; font-weight: 700; font-stretch: 105%; }
.cand .tse-qtd { font-size: 12px; color: var(--texto-2); }
/* largura fixa que cabe "10º"…"99º": com min-width, a passagem de "9º" para "10º" alargava o selo e empurrava a % ao
   lado (CLS ~3·10⁻⁵ nas telas de Presidente, ensaio etapa7-c2026) */
.cand .pos-tse { display: inline-grid; place-items: center; box-sizing: border-box; width: 32px; height: 18px; padding: 0; border-radius: var(--raio-p);
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--borda); font-size: 11px; font-weight: 700; color: var(--texto-2); transition: color 0.4s, border-color 0.4s; }
.cand .pos-tse:empty { opacity: 0; }
.cand.diverge .pos-tse { border-color: var(--alerta); color: var(--alerta); }
/* ordem diferente entre as fontes: destaque por fundo (não mexe em nada ao lado) */
.cand { transition: transform 0.75s var(--mola), opacity 0.4s, background-color 0.5s; }
.cand.diverge { background-color: color-mix(in srgb, var(--alerta) 11%, transparent); }
.cand .dif-rot { font-size: 10px; color: var(--texto-3); letter-spacing: 0.04em; }
.cand .dif-val { display: inline-flex; align-items: baseline; font-size: 14px; font-weight: 650; }
.cand .sinal { display: inline-block; width: 0.7em; text-align: right; }

@media (max-width: 960px) {
  .painel { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  :root { --linha-cand: 74px; --topo-h: 104px; --feed-h: 58px; }
  .topo { grid-template-columns: 1fr auto auto; grid-template-rows: 48px 48px; row-gap: 0; padding: 4px 16px; }
  .rota { grid-column: 1 / -1; grid-row: 2; overflow: hidden; }
  .rota .passo { max-width: 46vw; }
  .conexao { width: 136px; font-size: 12px; }
  .faixa, .cargos { padding: 0 16px; }
}

/* telas bem estreitas (iPhone SE 1ª geração, 320 px): a conexão encolhe para a primeira linha caber inteira */
@media (max-width: 359px) {
  .topo { column-gap: 10px; }
  .marca { font-size: 17px; }
  .conexao { width: 112px; padding: 0 10px; gap: 6px; }
}

@media (max-width: 640px) {
  .painel { padding: 8px 16px 0; gap: 14px; }
  .corrida { padding: 16px 14px 12px; }
  .corrida-cab { grid-template-columns: 1fr; height: 124px; gap: 8px; }
  /* título mais estreito (eixo de largura da Archivo) e em até duas linhas: "Governador — Mato Grosso do Sul" cabe */
  .corrida h1 { font-size: 22px; font-stretch: 88%; line-height: 1.12; white-space: normal;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
  /* avisos da faixa numa linha com reticência (o texto inteiro fica no title) */
  .faixa .chip.alerta { display: block; min-width: 0; max-width: calc(100vw - 32px - 160px); overflow: hidden;
    text-overflow: ellipsis; line-height: 22px; }
  .faixa .chip.sim { display: block; flex: 0 1 auto; min-width: 0; max-width: calc(100vw - 32px - 160px); overflow: hidden;
    text-overflow: ellipsis; line-height: 22px; }
  /* simulação no celular: "Dados reais", "▶ Playlist" e o ritmo (BUs/min) cabem inteiros numa linha a 360 px
     (B-018: a 0.8.29 escondia o ritmo para caber a playlist) */
  .faixa .chip.playlist .longo, .faixa .chip.sim .resto, .faixa .chip.sim .tse { display: none; }
  .faixa .chip.sim, .faixa .chip.ritmo { flex: none; }
  .faixa .chip.ritmo { width: auto !important; }   /* os 150 px fixos do desktop não cabem com a margem a 360 px */
  .conexao.sim { min-width: 0; max-width: 58vw; }
  .conexao .txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .selo { width: 100%; height: 34px; font-size: 13px; }
  .cand { grid-template-columns: 5px 26px minmax(0, 1fr) 80px; grid-template-rows: auto auto 6px; column-gap: 8px; row-gap: 2px; padding: 6px 2px 8px; }
  .cand .num { font-size: 15px; grid-row: 1 / span 2; }
  .cand .cor { grid-row: 1 / span 3; height: 54px; }
  .cand .quem { grid-column: 3; grid-row: 1 / span 2; }
  /* no celular o eixo de largura da Archivo estreita os nomes em vez de cortá-los */
  .cand .nome { font-size: 16px; font-stretch: 78%; }
  .cand .detalhe { font-stretch: 85%; }
  .cand .pilula { font-size: 10px; padding: 0 5px; width: 104px; }
  .cand .pct { grid-column: 4; grid-row: 1; font-size: 19px; }
  .cand .qtd { grid-column: 4; grid-row: 2; font-size: 12px; }
  .cand .barra { grid-column: 3 / -1; grid-row: 3; }
  :root.com-replay { --player-h: 80px; }
  .player { left: 8px; right: 8px; bottom: calc(var(--feed-h) + 14px); row-gap: 0; padding: 6px 10px; column-gap: 8px;
    grid-template-columns: 32px auto 1fr auto; grid-template-rows: 32px 36px; grid-template-areas: "play hora . vel" "linha linha linha linha"; }
  /* as horas ficam acima da linha, sem encostar no botão de arraste */
  .player .pl-tempo { margin-top: 12px; }
  .player .pl-ini, .player .pl-fim { display: none; }
  .player .pl-hora { font-size: 15px; }
  .player .pl-vel { height: 28px; }
  .apuracao { grid-template-columns: 112px 1fr; height: 300px; }
  .anel { width: 112px; height: 112px; }
  .anel .centro .hod { font-size: 19px; }
  /* o rótulo quebra em duas linhas no celular: caixa mais alta para o número não encostar na borda */
  .faltam { height: 84px; }
  .feed { left: 8px; right: 8px; bottom: 8px; }
  /* itens fixos na largura do letreiro; a legenda ("eleitores para o matematicamente") fica no detalhe do item */
  .feed .item.fixo { width: min(330px, calc(100vw - 76px)); padding: 0 12px; }
  .feed .item.fixo .txt { min-width: 0; }
  .feed .item.fixo .t { display: none; }
  .hist { left: 8px; width: calc(100vw - 16px); height: min(64vh, 560px); padding: 14px 12px 10px; }
  .hist .h-cab { font-size: 13px; }
  /* menos desfoque no celular (pesa na GPU) */
  .vidro { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  /* comparação no celular: controle em cima, texto das fontes embaixo (altura fixa); em "Ambos", nome e diferença à
     esquerda, Urna Velox e TSE à direita, sem o "votos" (o rótulo das colunas diz) */
  .fontes { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 34px 34px; height: 72px; row-gap: 4px; margin: 2px 0 4px; }
  .fontes .comparar { grid-column: 1; grid-row: 1; }
  .fontes .f-est { grid-column: 2; grid-row: 1; width: auto; font-size: 11px; }
  .fontes .f-txt { grid-column: 1 / -1; grid-row: 2; font-size: 11.5px; }
  .comparar button { padding: 0 10px; font-size: 12.5px; }
  .corrida.m-ambos .colunas { grid-template-columns: 5px 22px minmax(0, 1fr) 70px 78px; column-gap: 6px; padding: 0 2px; font-size: 10px; }
  .corrida.m-ambos .colunas .c-dif { display: none; }
  .colunas .uv-longo { display: none; }
  .colunas .uv-curto { display: inline; }
  .corrida.m-ambos .colunas .c-uv { white-space: nowrap; }
  .lista.m-ambos .cand { grid-template-columns: 5px 22px minmax(0, 1fr) 70px 78px; grid-template-rows: auto auto 6px; column-gap: 6px; row-gap: 2px; }
  .lista.m-ambos .cand .num { grid-row: 1; font-size: 13px; }
  .lista.m-ambos .cand .quem { grid-column: 3; grid-row: 1; }
  .lista.m-ambos .cand .nome { font-size: 14px; }
  .lista.m-ambos .cand .detalhe { display: none; }
  .lista.m-ambos .cand .dif { grid-column: 2 / 4; grid-row: 2; flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 4px; }
  .lista.m-ambos .cand .dif-val { font-size: 12px; }
  .lista.m-ambos .cand .pct { grid-column: 4; grid-row: 1; font-size: 15px; }
  .lista.m-ambos .cand .qtd { grid-column: 4; grid-row: 2; font-size: 10px; }
  .lista.m-ambos .cand .tse { grid-column: 5; grid-row: 1 / span 2; }
  .lista.m-ambos .cand .qtd .suf, .lista.m-ambos .cand .tse-qtd .suf { display: none; }
  .cand .tse-l1 { font-size: 15px; gap: 3px; }
  .cand .pos-tse { width: 24px; height: 16px; font-size: 10px; }
  .cand .tse-qtd { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .hod .col, .cand, .cand .barra i, .vidro, .selo, .folha, .hist { transition-duration: 0s !important; }
  .brilho::before, .brilho > .halo { animation: none; }
  .conexao[data-estado="vivo"] .ponto { animation: none; }
}

/* ---------------------------------------------------------------- M-001: identificação da eleição (cartão "C") */
/* o lugar do cartão é reservado (altura fixa): preencher ou rolar não empurra o painel; ao rolar, a barra fixa entra
   só por transform/opacidade (não conta no CLS) */
:root { --ident-h: 88px; --ident-mx: clamp(16px, 3vw, 36px); }
.ident-recolhida { --ident-h: 40px; }
.ident { position: relative; height: var(--ident-h); margin: 4px var(--ident-mx) 6px; }
.ident-cartao, .ident-barra {
  border: 1px solid var(--borda); border-radius: var(--raio-m); overflow: hidden; box-shadow: var(--sombra);
  background: color-mix(in srgb, var(--fundo-2) 80%, transparent);
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.ident-cartao { position: absolute; inset: 0; display: flex; flex-direction: column; }
.ident .id-l1 { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 52px 6px 16px; flex: 1; min-height: 0; }
.ident .id-txt { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.ident .id-eleicao { font-size: 19px; font-weight: 700; font-stretch: 112%; white-space: nowrap; }
.ident .id-tipo { font-size: 13px; color: var(--texto-2); }
.ident .id-turnos { display: flex; align-items: center; gap: 8px; flex: none; }
.ident .id-turnos small { color: var(--texto-3); font-size: 12px; }
.ident .id-seg { display: inline-flex; flex: none; border: 1px solid rgba(157, 183, 255, 0.5); border-radius: 10px; overflow: hidden; }
.ident .id-seg i { font-style: normal; font-weight: 700; padding: 2px 12px; color: var(--texto-3); }
.ident .id-seg i.sel { background: rgba(157, 183, 255, 0.85); color: #0d1431; }
.ident .id-l2 {
  display: flex; align-items: center; gap: 6px; padding: 6px 16px 7px; font-size: 15px; white-space: nowrap; min-width: 0;
  background: linear-gradient(90deg, rgba(140, 107, 255, 0.35), rgba(79, 195, 255, 0.25));
}
.ident .id-pino { width: 15px; height: 15px; fill: #9db7ff; flex: none; }
.ident .id-onde { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ident .id-local { font-weight: 650; color: var(--texto); }
.ident .id-sep { color: var(--texto-3); margin: 0 6px; }
.ident .id-cargo { color: var(--texto-2); }
.ident .icone-btn.id-recolher { position: absolute; right: 8px; top: 8px; width: 30px; height: 30px; font-size: 14px; }
/* barra de uma linha: sempre fixa no alto; escondida acima da tela até o cartão sair dela */
.ident-barra {
  position: fixed; top: 8px; left: var(--ident-mx); right: var(--ident-mx); height: 40px; z-index: 30;
  display: flex; align-items: center; gap: 10px; padding-left: 14px;
  transform: translateY(-64px); opacity: 0; visibility: hidden; transition: transform 0.2s, opacity 0.2s, visibility 0.2s;
}
.ident.preso .ident-barra { transform: none; opacity: 1; visibility: visible; }
.ident-barra { background: color-mix(in srgb, var(--fundo-2) 93%, transparent); }
.ident-barra .id-eleicao { font-size: 14px; }
.ident-barra .id-seg i { padding: 0 8px; font-size: 13px; }
.ident-barra .id-l2 { flex: 1; align-self: stretch; padding: 0 48px 0 14px; font-size: 14px; }
.ident-barra .icone-btn.id-recolher { top: 4px; right: 6px; }
/* recolhido: cartão e barra viram só o botão, à direita */
.ident-recolhida .ident-cartao { left: auto; width: 40px; }
.ident-recolhida .ident-barra { left: auto; width: 40px; padding: 0; }
.ident-recolhida .ident .id-l1, .ident-recolhida .ident .id-l2,
.ident-recolhida .ident-barra .id-eleicao, .ident-recolhida .ident-barra .id-seg { display: none; }
.ident-recolhida .ident .icone-btn.id-recolher { top: 4px; right: 4px; }
@media (max-width: 640px) {
  :root { --ident-h: 80px; }
  .ident-recolhida { --ident-h: 40px; }
  .ident .id-eleicao { font-size: 16px; }
  .ident .id-l2 { font-size: 14px; }
  .ident-barra { gap: 6px; padding-left: 8px; }
  .ident-barra .id-eleicao { display: none; }
  .ident-barra .id-l2 { padding: 0 42px 0 10px; }
}
@media (prefers-reduced-motion: reduce) { .ident-barra { transition: none; } }

/* ---------------------------------------------------------------- termos de uso
   Linha fixa e discreta à direita, logo acima do letreiro (e do player do replay, quando há): sempre à vista,
   inclusive numa captura de tela, sem empurrar nada (fora do fluxo, no espaço que o padding-bottom do body já reserva). */
.termos {
  position: fixed; right: 18px; bottom: calc(var(--feed-h) + 14px); z-index: 9; margin: 0;
  max-width: calc(100vw - 36px); font-size: 11px; line-height: 16px; color: var(--texto-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}
:root.com-replay .termos { bottom: calc(var(--feed-h) + var(--player-h) + 22px); }
.termos a {
  pointer-events: auto; color: inherit; text-decoration: none; padding: 0 8px; border-radius: var(--raio-p);
  background: color-mix(in srgb, var(--fundo) 72%, transparent);
}
.termos a:hover, .termos a:focus-visible { color: var(--texto-2); text-decoration: underline; }
@media (max-width: 640px) { .termos-longo { display: none; } }