/* Fato Público · protótipo do portal (identidade da §4 do docs/PLANO-PORTAL.md)
   Grade de 4 px. Amarelo é sinal, não superfície: no máximo um grifo por tela, sempre com texto preto. */
/* Inter servida daqui (antes vinha do Google Fonts: dois servidores a mais antes da primeira pintura). O arquivo
   "latin" vai pré-carregado no <head> de cada página; o "latin-ext" só baixa se a página tiver uma letra dele.
   "Inter Fallback" é a Arial ajustada às medidas da Inter, para o texto não pular de lugar quando a fonte chega. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(/portal/fontes/inter-v20-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(/portal/fontes/inter-v20-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter Fallback'; src: local('Arial'); size-adjust: 107.06%; ascent-override: 90.49%; descent-override: 22.56%; line-gap-override: 0%; }
:root {
  --bg: #ffffff;
  --bg-2: #f6f6f4;
  --ink: #0a0a0a;
  --ink-2: #4a4a48;
  --ink-3: #6b6b65; /* ≥ 4,5:1 também sobre --bg-2 e --sun-soft */
  --line: #e6e6e1;
  --sun: #ffd400;
  --sun-ink: #0a0a0a;
  --sun-soft: #fff6bf;
  --nao: #878781; /* ≥ 3:1 contra o trilho da barra (WCAG 1.4.11) */
  --focus: 0 0 0 3px #0a0a0a, 0 0 0 5px #ffd400;
  --r-card: 16px;
  --r-ctl: 12px;
  --topo: 64px;
  --barra: 64px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/24px 'Inter', 'Inter Fallback', system-ui, sans-serif;
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 8px; }
/* barra de busca (Início, Políticos): o anel é da barra inteira; o campo não ganha um segundo anel por dentro,
   e o botão do estado marca o foco com um contorno interno */
.busca-linha input:focus-visible { box-shadow: none; border-radius: 0; }
.busca-linha .btn-estado:focus-visible { box-shadow: inset 0 0 0 2px var(--ink); border-radius: 14px 0 0 14px; }
/* campo com contorno (a busca do topo, os filtros): o mesmo anel da barra, no campo inteiro e não por dentro dele */
.campo input:focus-visible { box-shadow: none; border-radius: 0; }
.campo:has(input:focus-visible) { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink), 0 0 0 5px var(--sun-soft); }
img { display: block; }
.tab { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
svg.lucide { width: 20px; height: 20px; stroke-width: 2; flex: none; }

/* ---------- tipografia ---------- */
.display { font-size: 32px; line-height: 36px; font-weight: 800; letter-spacing: -0.03em; margin: 0; }
.h1 { font-size: 28px; line-height: 32px; font-weight: 800; letter-spacing: -0.025em; margin: 0; }
.h2 { font-size: 20px; line-height: 28px; font-weight: 700; letter-spacing: -0.015em; margin: 0; }
.h3 { font-size: 18px; line-height: 24px; font-weight: 700; margin: 0; }
.peq { font-size: 14px; line-height: 20px; font-weight: 500; }
.rotulo { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); margin: 0; }
h1, h2, h3, .display, .h1, .h2, .h3 { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
.mudo { color: var(--ink-3); }
.mudo-2 { color: var(--ink-2); }
@media (min-width: 900px) {
  .display { font-size: 48px; line-height: 52px; }
  .h1 { font-size: 36px; line-height: 40px; }
  .h2 { font-size: 24px; line-height: 32px; }
}

/* o grifo: sublinhado amarelo grosso sob o fato principal da tela (nunca sobre nomes de pessoas) */
.grifo {
  text-decoration-line: underline;
  text-decoration-color: var(--sun);
  text-decoration-thickness: 0.16em;
  text-underline-offset: 0.1em;
  text-decoration-skip-ink: none; /* sem buraco sob o p, g, q */
}

/* ---------- estrutura ---------- */
.pag { max-width: 1120px; margin: 0 auto; padding: 16px 16px calc(var(--barra) + 32px + env(safe-area-inset-bottom)); }
@media (min-width: 900px) { .pag { padding: 32px 32px 64px; } }
.secao { margin-top: 40px; }
.secao-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.ver-todos { flex: none; white-space: nowrap; font-size: 14px; line-height: 20px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; }
.ver-todos svg.lucide { width: 16px; height: 16px; }

/* topo: no celular só marca e busca; no computador, navegação completa */
.topo {
  position: sticky; top: 0; z-index: var(--z-topo);
  height: var(--topo);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line);
}
.topo-in { max-width: 1120px; height: 100%; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; gap: 24px; }
@media (min-width: 900px) { .topo-in { padding: 0 32px; } }
.marca { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 18px; letter-spacing: -0.02em; white-space: nowrap; }
.marca-ico { width: 28px; height: 28px; border-radius: 8px; background: var(--sun); display: grid; place-items: center; }
.marca-ico svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.topo-nav { display: none; gap: 4px; margin: 0 auto; }
.topo-nav a { font-size: 15px; font-weight: 600; color: var(--ink-2); padding: 8px 12px; border-radius: 999px; }
@media (hover: hover) { .topo-nav a:hover { color: var(--ink); background: var(--bg-2); } }
.topo-nav a[aria-current='page'] { color: var(--ink); background: var(--bg-2); }
.topo-busca { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: var(--r-ctl); border: 1px solid var(--line); color: var(--ink-3); font-size: 15px; }
.topo-busca span, .topo-busca kbd { display: none; }
.topo-busca kbd { font: 600 12px/16px 'Inter', sans-serif; border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; color: var(--ink-3); }
@media (min-width: 900px) {
  .topo-nav { display: flex; }
  .topo-busca { margin-left: 0; width: 240px; }
  .topo-busca span { display: inline; flex: 1; text-align: left; }
  .topo-busca kbd { display: inline; }
}
@media (max-width: 899px) { .topo-busca { border: 0; padding: 0; width: 44px; justify-content: center; color: var(--ink); } }

/* barra inferior (celular) */
.barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-barra);
  height: calc(var(--barra) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(5, 1fr);
}
.barra a, .barra button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 11px; line-height: 12px; font-weight: 600; color: var(--ink-3); }
.barra svg.lucide { width: 22px; height: 22px; }
.barra [aria-current='page'] { color: var(--ink); }
.barra [aria-current='page'] .ico { background: var(--sun); }
.barra .ico { display: grid; place-items: center; width: 48px; height: 28px; border-radius: 999px; transition: background-color 0.2s; }
@media (min-width: 900px) { .barra { display: none; } }

/* rodapé: bloco preto de ponta a ponta; o amarelo só no selo e nos títulos das colunas (amarelo é sinal, não superfície, §4).
   Sem rolagem lateral: a cor sai pela sombra e o recorte. */
.rodape { --rod-tx: #b9b9b2; --rod-linha: #2a2a28; margin-top: 80px; padding: 48px 0 32px; background: var(--ink); color: var(--rod-tx);
  box-shadow: 0 0 0 100vmax var(--ink); clip-path: inset(0 -100vmax -100vmax); font-size: 14px; line-height: 20px; }
.rodape a { color: #fff; }
.rod-topo { display: grid; gap: 24px; padding-bottom: 32px; border-bottom: 1px solid var(--rod-linha); }
.rod-marca { display: grid; gap: 12px; max-width: 46ch; }
.rod-marca p { margin: 0; }
.rod-fig { display: grid; justify-items: end; }
.rod-ilu { width: 100%; max-width: 400px; height: auto; display: block; }
.rod-ilu path { fill: none; stroke-width: 0.9; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.rod-ilu .sil, .rod-ilu .col { fill: var(--ink); stroke: #8f8f88; }
.rod-ilu .lo { fill: var(--ink); stroke: #2e2e2b; }
.rod-ilu .cr, .rod-ilu .mid { stroke: #4a4a45; }
.rod-ilu .dash { stroke: #3a3a36; stroke-dasharray: 2 5; }
.rod-ilu .hi { stroke: var(--sun); }
@media (max-width: 899px) { .rod-fig { order: -1; justify-items: stretch; } .rod-ilu { max-width: none; } } /* no celular: largura toda, antes da marca */
.rod-lema { color: #fff; font-weight: 600; }
.rod-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; padding: 32px 0; border-bottom: 1px solid var(--rod-linha); }
.rod-col { display: grid; align-content: start; }
.rod-t { margin: 0 0 4px; font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sun); }
.rod-col a { display: flex; align-items: center; min-height: 40px; color: #ecece7; }
.rod-base { display: grid; gap: 4px; padding-top: 20px; font-size: 13px; line-height: 18px; }
.rod-base p { margin: 0; }
@media (hover: hover) { .rod-col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; } }
@media (min-width: 900px) {
  .rodape { padding: 64px 0 40px; }
  .rod-topo { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); align-items: center; gap: 48px; }
  .rod-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
  .rod-base { grid-auto-flow: column; justify-content: space-between; }
}

/* ---------- componentes ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: var(--r-ctl); font-weight: 700; font-size: 15px; transition: transform 0.15s var(--ease); }
.btn:active { transform: scale(0.98); }
.btn-1 { background: var(--sun); color: var(--sun-ink); }
.btn-2 { border: 1.5px solid var(--ink); }
.btn-3 { color: var(--ink-2); }
.btn-largo { width: 100%; }
@media (min-width: 900px) { .btn-largo { width: auto; } }

.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: -2px; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.chip[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip .n { font-weight: 500; opacity: 0.7; }

.cartao { border: 1px solid var(--line); border-radius: var(--r-card); padding: 16px; background: var(--bg); }
.cartao-2 { background: var(--bg-2); border-radius: var(--r-card); padding: 16px; }

/* cartão de número */
.nums { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (min-width: 900px) { .nums { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.num { position: relative; border: 1px solid var(--line); border-radius: var(--r-card); padding: 16px; display: flex; flex-direction: column; gap: 4px; min-height: 152px; }
.num p { margin: 0; }
.num-v { font-size: 28px; line-height: 36px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; margin-top: 8px; }
.num-v small { font-size: 16px; font-weight: 700; letter-spacing: 0; }
.num-c { font-size: 13px; line-height: 18px; color: var(--ink-2); }
.num-c b { color: var(--ink); font-weight: 600; }
.num-cmp { margin-top: auto; padding-top: 8px; font-size: 12px; line-height: 16px; color: var(--ink-3); }
.num-q { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; display: grid; place-items: center; color: var(--ink-3); border-radius: 999px; }
.num-q svg.lucide { width: 16px; height: 16px; }
@media (hover: hover) { .num-q:hover { color: var(--ink); background: var(--bg-2); } }
@media (min-width: 900px) { .num { padding: 20px; min-height: 168px; } .num-v { font-size: 36px; line-height: 44px; } }

/* linha de político */
.pol { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; min-height: 56px; padding: 8px 0; }
.pol + .pol { border-top: 1px solid var(--line); }
.foto { width: 40px; height: 40px; border-radius: 999px; object-fit: cover; object-position: top; background: var(--bg-2); }
.pol-n { font-weight: 600; line-height: 20px; }
.pol-s { font-size: 13px; line-height: 18px; color: var(--ink-3); }
.pol > svg.lucide { color: var(--ink-3); width: 16px; height: 16px; }

/* selo de fonte */
.fonte { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; line-height: 16px; color: var(--ink-3); margin-top: 12px; }
.fonte svg.lucide { width: 14px; height: 14px; margin-top: 1px; }
.fonte a { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- votos: neutros por princípio (§4.4), sempre com rótulo ---------- */
.g { display: inline-block; width: 12px; height: 12px; border-radius: 999px; flex: none; vertical-align: -1px; }
.g-sim { background: var(--ink); }
.g-nao { background: var(--nao); }
.g-abs { background: repeating-linear-gradient(135deg, var(--ink) 0 1.5px, transparent 1.5px 4px); box-shadow: inset 0 0 0 1.5px var(--ink); }
.g-obs { box-shadow: inset 0 0 0 3px var(--ink); }
.g-sec { background: radial-gradient(circle, var(--ink-2) 0 2.5px, transparent 3px); box-shadow: inset 0 0 0 1.5px var(--ink-2); }
.g-pre { border-radius: 3px; box-shadow: inset 0 0 0 1.5px var(--ink-2); }
.g-aus { box-shadow: inset 0 0 0 1.5px #bdbdb6; }
.g-jus { border: 1.5px dashed var(--ink-3); }
.voto { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; white-space: nowrap; }

/* placar: barra segmentada */
.placar-barra { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--bg-2); gap: 2px; }
.placar-barra i { display: block; height: 100%; transform-origin: left; animation: crescer 0.7s var(--ease) both; }
.placar-barra .s { background: var(--ink); }
.placar-barra .n { background: var(--nao); }
.placar-barra .marca-q { position: absolute; top: -6px; bottom: -6px; width: 2px; margin-left: -1px; background: var(--ink); border-radius: 2px; }
.placar-barra .o { background: repeating-linear-gradient(135deg, var(--ink-2) 0 1.5px, var(--bg-2) 1.5px 4px); }

/* barras horizontais (gastos) */
.barras { display: grid; gap: 12px; }
.barra-l { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 14px; line-height: 20px; }
.barra-l .t { grid-column: 1 / -1; height: 8px; border-radius: 0 4px 4px 0; background: var(--bg-2); overflow: hidden; }
.barra-l .t i { display: block; height: 100%; background: var(--ink); border-radius: 0 4px 4px 0; transform-origin: left; animation: crescer 0.7s var(--ease) both; }
.barra-l .v { font-variant-numeric: tabular-nums; font-weight: 600; }

/* colunas por mês */
.meses { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; align-items: end; height: 120px; }
.meses i { display: block; background: var(--ink); border-radius: 4px 4px 0 0; min-height: 2px; transform-origin: bottom; animation: subir 0.7s var(--ease) both; }
.meses i.vazio { background: var(--bg-2); }
.meses-r { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; margin-top: 8px; font-size: 11px; line-height: 12px; color: var(--ink-3); text-align: center; }

/* Quatro controles, quatro formas, em todo o site (nunca o mesmo componente para níveis diferentes, §4.5 do plano):
   1. .abas  = nível 1: seções da página ou páginas irmãs. Texto com sublinhado preto.
   2. .seg   = nível 2: troca o conjunto que se vê dentro de uma seção (2 a 4 opções). Fundo cinza, escolhida em branco.
   3. .chip  = filtro de categoria: estreita uma lista. Pílula com contorno, escolhida em preto.
   4. .ordem = ordenação: só muda a ordem. Pílula pequena com o rótulo "Ordenar". */

/* abas */
.abas { display: flex; gap: 0; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; position: sticky; top: var(--topo); background: var(--bg); z-index: 5; }
.abas::-webkit-scrollbar { display: none; }
.abas button { flex: none; height: 48px; padding: 0 16px; font-weight: 600; font-size: 15px; color: var(--ink-3); position: relative; }
.abas button[aria-selected='true'] { color: var(--ink); }
.abas button[aria-selected='true']::after { content: ''; position: absolute; left: 16px; right: 16px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--ink); }
/* abas entre páginas irmãs (links): mesma forma, sem grudar no topo */
.abas a { flex: none; display: grid; place-items: center; height: 48px; padding: 0 16px; font-weight: 600; font-size: 15px; color: var(--ink-3); position: relative; }
.abas a[aria-current='page'] { color: var(--ink); }
.abas a[aria-current='page']::after { content: ''; position: absolute; left: 16px; right: 16px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--ink); }
.abas-pag { position: static; margin-bottom: 24px; }

/* busca e campos */
.campo { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 16px; border-radius: var(--r-ctl); border: 1px solid var(--line); background: var(--bg); }
.campo input { flex: 1; border: 0; outline: 0; font: inherit; background: none; min-width: 0; }
.campo:focus-within { border-color: var(--ink); }
.campo svg.lucide { color: var(--ink-3); }

/* ---------- bottom sheet (celular) / diálogo (computador) ---------- */
.veu { position: fixed; inset: 0; z-index: var(--z-veu); background: rgba(10, 10, 10, 0.4); opacity: 0; pointer-events: none; transition: opacity 0.25s; }
.veu.aberto { opacity: 1; pointer-events: auto; }
.sheet {
  position: fixed; z-index: var(--z-sheet); left: 0; right: 0; bottom: 0;
  max-height: 88dvh; display: flex; flex-direction: column; overflow-x: clip;
  background: var(--bg); border-radius: 20px 20px 0 0;
  padding: 8px 16px calc(16px + env(safe-area-inset-bottom));
  transform: translateY(100%); transition: transform 0.2s ease-in; /* fechar é mais rápido que abrir */
}
.sheet.aberto { transform: none; transition: transform 0.35s var(--ease); }
.sheet-alca { width: 40px; height: 4px; border-radius: 4px; background: var(--line); margin: 0 auto 12px; flex: none; }
/* o corpo rola, e rolar corta o que passa da borda: 6 px em cima e embaixo cabem o anel de foco e a sombra dos chips,
   sem barra de rolagem quando o conteúdo cabe */
.sheet-cab { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex: none; margin-bottom: 2px; }
.sheet-corpo { overflow-y: auto; overscroll-behavior: contain; margin: 0 -16px; padding: 6px 16px; }
.sheet-pe { flex: none; padding-top: 12px; }
.fechar { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 999px; margin-right: -12px; }
@media (min-width: 900px) {
  .sheet { left: 50%; right: auto; bottom: auto; top: 50%; width: 520px; max-height: 80vh; border-radius: 20px; padding: 16px 24px 24px;
    transform: translate(-50%, -46%); opacity: 0; pointer-events: none; transition: transform 0.3s var(--ease), opacity 0.2s; }
  .sheet.aberto { transform: translate(-50%, -50%); opacity: 1; pointer-events: auto; }
  .sheet-alca { display: none; }
  .sheet-corpo { margin: 0 -24px; padding: 6px 24px; }
}
.uf-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.uf-grade button { height: 48px; border-radius: var(--r-ctl); border: 1px solid var(--line); font-weight: 600; font-size: 14px; }
.uf-grade button[aria-pressed='true'] { background: var(--ink); color: #fff; border-color: var(--ink); }
.uf-grade button small { display: block; font-size: 11px; line-height: 12px; font-weight: 500; color: var(--ink-3); }
.uf-grade button[aria-pressed='true'] small { color: #c9c9c4; }

/* resultados da busca */
.res { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; min-height: 56px; padding: 8px 0; border-top: 1px solid var(--line); }
.res-ico { width: 40px; height: 40px; border-radius: 999px; background: var(--bg-2); display: grid; place-items: center; }

/* ---------- acessibilidade ---------- */
.pular { position: absolute; left: 16px; top: -48px; z-index: var(--z-pular); background: var(--ink); color: #fff; padding: 8px 16px; border-radius: var(--r-ctl); font-weight: 600; }
.pular:focus { top: 8px; }

/* "?" do glossário: pequeno, ao lado do termo */
.q { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 999px; border: 1.5px solid var(--ink-3); color: var(--ink-2); font: 700 12px/1 'Inter', sans-serif; vertical-align: 1px; margin-left: 4px; position: relative; }
.q::after { content: ''; position: absolute; inset: -12px; } /* área de toque de 44 px */
@media (hover: hover) { .q:hover { border-color: var(--ink); color: var(--ink); } }

/* selo de resumo por IA */
.selo-ia { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-2); }
.selo-ia svg.lucide { width: 14px; height: 14px; }
.selo-ia .q { width: 18px; height: 18px; font-size: 11px; }

/* medidor: barra de 0 a 100% com uma marca de comparação (média ou metade da casa) */
.medidor { position: relative; height: 8px; border-radius: 999px; background: var(--bg-2); margin-top: 12px; }
.medidor > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--ink); transform-origin: left; animation: crescer 0.7s var(--ease) both; }
.medidor > b { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--ink-3); border-radius: 2px; }
.tick { display: inline-block; width: 2px; height: 10px; border-radius: 2px; background: var(--ink-3); vertical-align: -1px; margin-right: 2px; }
.medidor-l { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: 12px; line-height: 16px; color: var(--ink-3); }

/* alternador de segundo nível (Todas · Câmara · Senado; Propostos · Em coautoria) */
.seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: var(--r-ctl); background: var(--bg-2); }
.seg button { height: 40px; padding: 0 16px; border-radius: 8px; font-weight: 600; font-size: 14px; color: var(--ink-2); white-space: nowrap; }
.seg a { display: grid; place-items: center; height: 40px; padding: 0 16px; border-radius: 8px; font-weight: 600; font-size: 14px; color: var(--ink-2); white-space: nowrap; }
.seg a[aria-current='page'] { background: var(--bg); color: var(--ink); box-shadow: 0 1px 2px rgba(10, 10, 10, 0.08), 0 0 0 1px var(--line); }
.seg button[aria-pressed='true'] { background: var(--bg); color: var(--ink); box-shadow: 0 1px 2px rgba(10, 10, 10, 0.08), 0 0 0 1px var(--line); }
.seg .n { font-weight: 500; color: var(--ink-3); margin-left: 4px; font-variant-numeric: tabular-nums; }

/* ordenação: só muda a ordem da lista (nunca filtra) */
.ordem { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: var(--bg-2); }
.ordem::before { content: 'Ordenar'; padding: 0 6px 0 10px; font-size: 12px; line-height: 16px; color: var(--ink-3); }
.ordem button { height: 34px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.ordem button[aria-pressed='true'] { background: var(--bg); color: var(--ink); box-shadow: 0 1px 2px rgba(10, 10, 10, 0.12); }

/* cabeçalho de página de lista */
.pag-cab { display: grid; gap: 8px; padding: 8px 0 24px; }
.pag-cab p { margin: 0; max-width: 60ch; }
.letra { position: sticky; top: var(--topo); z-index: 2; background: var(--bg); padding: 16px 0 4px; font-size: 13px; font-weight: 700; color: var(--ink-3); border-bottom: 1px solid var(--line); }
.ferramentas { display: grid; gap: 12px; margin-bottom: 8px; }
@media (min-width: 900px) { .ferramentas { grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; } }

/* cabeçalho compacto que aparece ao rolar o Raio-X */
.compacto { position: fixed; left: 0; right: 0; top: var(--topo); z-index: var(--z-compacto); background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line);
  transform: translateY(-100%); opacity: 0; pointer-events: none; transition: transform 0.25s var(--ease), opacity 0.2s; }
.compacto.visivel { transform: none; opacity: 1; pointer-events: auto; }
.compacto-in { max-width: 1120px; margin: 0 auto; padding: 8px 16px; display: flex; align-items: center; gap: 12px; }
.compacto-in .foto { width: 32px; height: 32px; }
.compacto-in b { font-size: 15px; line-height: 20px; }
.compacto-in span { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.compacto-in button { margin-left: auto; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 999px; }
@media (min-width: 900px) { .compacto-in { padding: 8px 32px; } }

/* ---------- movimento: só transform e opacity ---------- */
@keyframes crescer { from { transform: scaleX(0); } }
@keyframes subir { from { transform: scaleY(0); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   Celular: toque, leitura e cara de app (revisão com o skill de design engineering)
   ========================================================================== */
:root { --z-topo: 20; --z-barra: 20; --z-compacto: 15; --z-veu: 40; --z-sheet: 41; --z-pular: 50; }
html { scroll-padding-top: calc(var(--topo) + 16px); }
body { overflow-wrap: break-word; -webkit-tap-highlight-color: transparent; }
.barra-l > span:first-child, .org > span:first-child, .stat-c { hyphens: auto; } /* só onde o espaço é estreito */
a, button, input, summary, label { touch-action: manipulation; }
input, select, textarea { font-size: 16px; } /* abaixo de 16 px o iOS dá zoom ao focar */

/* topo respeita o notch quando o site vira app (tela inicial) */
.topo { padding-top: env(safe-area-inset-top); height: calc(var(--topo) + env(safe-area-inset-top)); }
.marca { min-height: 44px; }

/* nada de texto abaixo de 12 px; metadados e fontes com 13 px */
.fonte, .medidor-l, .stat-ref, .ev-m, .cadeiras, .ritmo { font-size: 13px !important; line-height: 18px !important; }
.meses-r { font-size: 12px; }
@media (max-width: 399px) { .meses-r { font-size: 11px; letter-spacing: -0.01em; } } /* "Fev", "Out" cabem em colunas de ~25 px */
.fonte a { display: inline-block; padding: 12px 0; margin: -12px 0; } /* área de toque sem mexer no layout */

/* chips e controles com 44 px de toque */
.chip { height: 40px; position: relative; }
.chip::after { content: ''; position: absolute; inset: -2px 0; }
.seg button, .seg a { height: 40px; }

/* retorno ao tocar: escurece de leve, sem animar layout */
.pol, .vcard, .ev, .res, .outra, .vlin, .org, a.cartao { transition: background-color 0.15s ease; }
@media (hover: none) {
  .pol:active, .vcard:active, .ev:active, .res:active, .outra:active, .vlin:active, a.cartao:active { background-color: var(--bg-2); }
  .btn:active, .chip:active, .seg button:active { transform: scale(0.97); }
}
@media (hover: hover) {
  .pol:hover, .vcard:hover, .ev:hover, .res:hover, .outra:hover, .vlin:hover { background-color: #fafaf8; }
}

/* listas longas: o navegador só desenha o que está perto da tela */
.lista-longa > section, .lista-longa > .grupo-v { content-visibility: auto; contain-intrinsic-size: auto 600px; }

/* "ver mais" que recolhe listas compridas no celular */
.recolhe:not(.aberta) > .extra { display: none; }
.mais { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-size: 14px; font-weight: 600; margin-top: 4px; }
.mais svg.lucide { width: 16px; height: 16px; }

/* bottom sheet: alça maior para arrastar; busca abre alta para o teclado não cobrir os resultados */
.sheet { touch-action: pan-y; }
.sheet-alca { width: 48px; height: 5px; margin-bottom: 8px; }
.sheet-arrasto { padding: 4px 0 0; cursor: grab; touch-action: none; }
.sheet.alta { height: 88dvh; }
.sheet.arrastando { transition: none; }
/* no computador a busca fica presa pelo topo: os resultados crescem para baixo e o campo não sai do lugar enquanto se digita */
@media (min-width: 900px) {
  .sheet.alta { height: auto; top: 12vh; max-height: 76vh; transform: translate(-50%, 16px); }
  .sheet.alta.aberto { transform: translate(-50%, 0); }
}
/* o "x" de limpar do campo de busca, no desenho do site em vez do azul do navegador */
.campo input[type='search']::-webkit-search-cancel-button {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; cursor: pointer;
  background: center / 16px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6b65' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
}

/* abas inteiras no celular, sem corte na direita */
@media (max-width: 599px) {
  .abas { display: grid; grid-template-columns: repeat(var(--n-abas, 4), 1fr); }
  .abas button, .abas a { padding: 0 4px; font-size: 14px; }
  .abas button[aria-selected='true']::after, .abas a[aria-current='page']::after { left: 8px; right: 8px; }
}
/* listas recolhidas dentro de barras mantêm o mesmo espaçamento */
.barras .recolhe, .barras .recolhe.aberta > .extra { display: grid; gap: 12px; }


/* "Viu um erro?": o link ao lado da fonte e no rodapé, e o formulário no sheet */
.fonte-erro, .rod-erro { font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 2px; position: relative; }
.fonte-erro::after, .rod-erro::after { content: ''; position: absolute; inset: -12px -4px; } /* 44 px de toque */
.rod-erro { color: #ecece7; }
.erro-f { display: grid; gap: 16px; }
.erro-f p { margin: 0; }
.erro-c { display: grid; gap: 8px; }
.erro-c textarea { width: 100%; min-height: 112px; padding: 12px 16px; border-radius: var(--r-ctl); border: 1px solid var(--line); background: var(--bg); font: inherit; color: inherit; resize: vertical; }
.erro-c textarea:focus { outline: 0; border-color: var(--ink); }