/* Página /comparar (13/10): componentes da home (cartões .comp, abas .temas, bloco .puxa) mais o que é só desta página:
   âncoras no topo, grade de comparativos, resultado por estado e cartões de registro (democracia, Congresso, ficha). */
.bloco[id]{scroll-margin-top:0} /* o html já recua o topo fixo (scroll-padding-top); o respiro vem do padding da seção */

/* Âncoras das seções: mesmo formato das abas de tema, mas links */
.cmp-ancoras{margin-top:clamp(6px,1vw,14px)}
.cmp-ancoras a{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 1.05em;border:2px solid var(--linha);border-radius:999px;background:#fff;color:var(--tinta);font:700 15px/1 var(--texto);font-stretch:88%;white-space:nowrap;text-decoration:none;transition:border-color .15s ease,background .15s ease}
.cmp-ancoras a:first-child{margin-left:auto}
.cmp-ancoras a:last-child{margin-right:auto}
@media (hover:hover){.cmp-ancoras a:hover{border-color:var(--tinta);background:var(--amarelo)}}
.cmp-ancoras a:focus-visible{outline:3px solid var(--azul);outline-offset:2px}

/* Abas de tema e contagem (a contagem sempre visível) */
.cmp-controles{display:grid;justify-items:center;width:100%;min-width:0}

/* Comparativos: o trilho lateral da home (.comparativos), com todos os temas */
.cmp-contagem{margin:0;font:600 15px/1.35 var(--texto);color:var(--tinta-2);text-align:center}
.comp-fonte{overflow-wrap:anywhere;min-width:0} /* domínios longos não saem do lado do cartão */
.comp-dado{align-self:flex-start;min-height:44px}

/* Altura reservada das listas montadas por script (o conteúdo chega depois do primeiro desenho): vale só até o
   script marcar a lista como montada (data-montado); depois a lista tem a altura do próprio conteúdo, sem buraco. */
.cmp-vida .comparativos:not([data-montado]){min-height:max(470px,calc(520px + (390px - 100vw) * .7))}
.cmp-fatos:not([data-montado]){min-height:440px}
.cmp-uf-resultado:not([data-montado]){min-height:360px}
@media (min-width:700px){
  .cmp-vida .comparativos:not([data-montado]){min-height:min(400px,calc(100svh - var(--topo) - 220px))}
  .cmp-fatos:not([data-montado]){min-height:min(440px,calc(100svh - var(--topo) - 190px))}
}

/* Puxa Ficha entre os comparativos e o estado */
.cmp-puxa{padding-top:clamp(28px,3.6vw,48px)}

/* No seu estado: seletor e cartão do resultado */
.cmp-uf{display:grid;gap:10px;width:min(640px,100%)}
@media (min-width:700px){.cmp-uf{grid-template-columns:minmax(200px,300px) minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:clamp(20px,3vw,40px);align-items:start;width:min(960px,100%)}.cmp-uf-resultado{grid-column:2;grid-row:1/4}}
.cmp-uf-rotulo{font:800 16px/1.2 var(--texto)}
.cmp-uf select{width:100%;min-height:52px;padding:0 48px 0 16px;border:2.5px solid var(--tinta);border-radius:var(--raio);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23111' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 14px center/22px no-repeat;color:var(--tinta);font:700 17px/1 var(--texto);appearance:none;-webkit-appearance:none;cursor:pointer;box-shadow:0 3px 0 var(--tinta)}
.cmp-uf select:focus-visible{outline:3px solid var(--azul);outline-offset:3px}
.cmp-uf-resultado{display:grid;grid-template-columns:minmax(0,1fr);container-type:inline-size;gap:clamp(8px,1.6svh,14px);padding:clamp(10px,2.4svh,24px);border:2.5px solid var(--tinta);border-radius:var(--raio);background:#fff;box-shadow:4px 5px 0 var(--tinta)}
.cmp-uf-resultado p{margin:0}
.cmp-uf-vazio{font:600 16px/1.4 var(--texto)}
.cmp-uf-nome{margin:0;font:900 clamp(22px,2.6vw,30px)/1.1 var(--tit);letter-spacing:-.02em;text-transform:uppercase}
.cmp-placar{display:grid;gap:10px}
.cmp-placar-n{display:flex;justify-content:space-between;gap:12px;font:900 clamp(24px,min(8vw,11cqw),46px)/1 var(--tit);letter-spacing:-.02em}
.cmp-placar-n span{display:grid;gap:4px}
.cmp-placar-n .flavio{text-align:right}
.cmp-placar-n .lula{color:#1c6b33}
.cmp-placar-n small{font:800 14px/1 var(--texto);letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-2)}
.cmp-barra{display:flex;height:20px;border:2px solid var(--tinta);border-radius:999px;overflow:hidden;background:#ddd}
.cmp-barra i{flex:1 1 0;min-width:0}
.cmp-barra .lula{background:var(--verde)}
.cmp-barra .outros{background:#ddd}
.cmp-barra .flavio{background:var(--tinta)}
.cmp-uf-frase{font:500 clamp(15px,2.6svh,17px)/1.4 var(--texto);text-wrap:pretty}
.cmp-uf-frase strong{font-weight:800}
.cmp-uf-fonte{display:grid;font:500 14px/1.45 var(--texto);color:var(--tinta-2)}
.cmp-uf-fonte .comp-fonte{align-items:center;margin-top:0}

/* Registros: trilho lateral de cartões no mesmo formato dos comparativos */
.cmp-fatos{display:grid;grid-auto-flow:column;grid-auto-columns:min(86%,340px);gap:16px;width:calc(100% + 2 * var(--margem));margin:6px calc(-1 * var(--margem)) 0;padding:4px var(--margem) 14px;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--margem);overscroll-behavior-x:contain;scrollbar-width:none}
.cmp-fatos::-webkit-scrollbar{display:none}
@media (min-width:760px){.cmp-fatos{grid-auto-columns:clamp(300px,28vw,380px);gap:20px}}
.cmp-fato{scroll-snap-align:start;display:flex;flex-direction:column;gap:10px;min-width:0;padding:18px;border:2.5px solid var(--tinta);border-radius:var(--raio);background:#fff;box-shadow:4px 5px 0 var(--tinta)}
.cmp-fato p{margin:0;font:500 16px/1.45 var(--texto)}
.cmp-fato h3{margin:0;font:900 clamp(17px,1.6vw,20px)/1.15 var(--tit);letter-spacing:-.01em;text-transform:uppercase;overflow-wrap:break-word}
.cmp-fato .cmp-fato-data{font:700 14px/1.2 var(--texto);color:var(--tinta-2);text-transform:uppercase;letter-spacing:.06em}
.cmp-fato .cmp-fato-detalhe{font-size:14px;color:var(--tinta-2)}
.cmp-fato .cmp-fato-status{padding:0 12px;border-radius:var(--raio-p);background:#fff7cc;font-size:15px}
.cmp-fato-status summary{display:flex;align-items:center;min-height:44px;cursor:pointer;font:500 15px/1.3 var(--texto)}
.cmp-fato-status[open] summary{min-height:36px}
.cmp-fato .cmp-fato-status p{padding:0 0 10px;font-size:15px}
.cmp-fato-pe{display:flex;flex-direction:column;align-items:flex-start;margin-top:auto}
.cmp-fato-pe .comp-fonte{min-height:44px;align-items:center;margin-top:0}
.cmp-fato-pe .link{min-height:44px}
.cmp-fato-pe a{overflow-wrap:anywhere}
.cmp-aviso{width:min(760px,100%);margin:0;padding:14px 18px;border:2.5px solid var(--tinta);border-radius:var(--raio);background:#fff7cc;font:500 16px/1.45 var(--texto);text-wrap:pretty}
.cmp-aviso b{font-weight:800}
.cmp-ficha .bloco-pe{margin-top:clamp(10px,1.6vw,20px)}

/* iPad e desktop (regra do Thiago, 13/10): cada seção cabe na altura útil da janela (100svh menos o topo).
   Respiro, título e espaços saem da altura (svh); em janela baixa, degraus finos de max-height apertam o cartão.
   Cartões mais largos para o texto ocupar menos linhas. Nada é cortado: o que sobra de altura é cedido por espaço. */
@media (min-width:700px){
  main .bloco:not(.seu-elo){padding-block:clamp(8px,2.1svh,56px);gap:clamp(6px,1.3svh,10px)}
  main .bloco .titulo-caixa{font-size:clamp(26px,4.5svh,60px)}
  main .bloco .bloco-sub{max-width:min(100%,112ch)}
  .cmp-ancoras{margin-top:0}
  /* quanto mais baixa a janela, mais largo o cartão (o texto quebra menos); nunca passa da largura útil menos o respiro */
  main{--extra:calc(max(0px,800px - 100svh) * .9);--teto:calc(100vw - 2 * var(--margem) - 40px)}
  .comparativos{grid-auto-columns:clamp(min(440px,var(--teto)),calc(46vw + var(--extra)),min(600px,var(--teto)))}
  .cmp-fatos{grid-auto-columns:clamp(min(380px,var(--teto)),calc(42vw + var(--extra) * .7),min(520px,var(--teto)))}
  main .bloco .bloco-sub{font-size:clamp(14px,2.4svh,19px)}
  /* abas: sempre numa linha só (fonte e folga acompanham a largura; a altura, a altura da janela) */
  .cmp-controles .temas{gap:clamp(4px,.9vw,8px)}
  .cmp-controles .temas button{min-height:clamp(34px,5.6svh,44px);padding:0 clamp(.6em,1.4vw,.9em);font-size:clamp(12.5px,1.8vw,15px)}
  .cmp-vida .comparativos{margin-top:0;padding-bottom:8px}
  .cmp-vida .comp-lado{padding:clamp(6px,2.2cqw,10px)}
  .cmp-vida .comp-periodo,.cmp-vida .comp-extra{line-height:1.25}
  .cmp-vida .comp{padding:clamp(8px,1.6svh,14px)}
  .cmp-vida .comp-quem{font-size:13px}
  .cmp-vida .comp-quem img{width:clamp(22px,4svh,28px);height:clamp(22px,4svh,28px)}
  .cmp-vida .comp-lado strong{font-size:clamp(16px,5.4cqw,23px)}
  /* cartão do comparativo: contexto e página do dado na mesma linha, ações embaixo */
  .cmp-vida .comp{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto 1fr;align-content:stretch;gap:clamp(3px,.8svh,6px) 12px}
  .cmp-vida .comp>:is(.comp-tema,h3,.comp-lados,.comp-acoes){grid-column:1/-1}
  .cmp-vida .comp>:is(.comp-contexto,.comp-dado){order:1}
  .cmp-vida .comp>.comp-acoes{order:2}
  .cmp-vida .comp>.comp-dado{grid-column:2;justify-self:end;align-self:center}
  .cmp-vida .comp>.comp-contexto{grid-column:1;align-self:center}
  /* ficha do Flávio: o aviso e o botão para o Puxa Ficha dividem a linha */
  .cmp-vida .comp-lado{gap:clamp(2px,.5svh,4px)}
  .cmp-vida .comp-lado .comp-fonte{min-height:clamp(24px,4.4svh,44px)}
  .cmp-vida .comp-contexto summary,.cmp-vida .comp-dado{min-height:clamp(32px,5.2svh,44px)}
  .cmp-vida .comp-acoes{padding-top:0}
  .cmp-vida .comp-acoes .mini{min-height:clamp(38px,5.6svh,44px)}
  /* registros: tamanhos pela altura; fonte e página do dado na mesma linha quando cabem */
  .cmp-fato{gap:clamp(5px,1.1svh,10px);padding:clamp(12px,2.2svh,18px)}
  .cmp-fato p{font-size:clamp(14px,2.2svh,16px);line-height:1.38}
  .cmp-fato .cmp-fato-detalhe{font-size:clamp(13px,1.9svh,14px)}
  .cmp-fato-pe{flex-direction:row;flex-wrap:wrap;align-items:center;gap:0 18px}
  .cmp-fato-pe .comp-fonte,.cmp-fato-pe .link{min-height:clamp(32px,5svh,44px)}
  .cmp-aviso{padding:clamp(8px,1.6svh,14px) 14px;font-size:clamp(14px,2.2svh,16px)}
  /* abas e contagem na mesma linha (a contagem desce para a linha de baixo só quando não cabe) */
  .cmp-controles{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0 14px;width:100%}
  .cmp-controles .cmp-contagem{font-size:14px}
  .cmp-controles .temas{width:auto;max-width:100%;margin:0;padding:0 0 2px;flex:0 1 auto;-webkit-mask-image:none;mask-image:none}
  .cmp-controles .temas button:first-child{margin-left:0}
  .cmp-controles .temas button:last-child{margin-right:0}
  .cmp-ficha-topo{display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;gap:12px 20px;width:100%}
  .cmp-ficha-topo .cmp-aviso{flex:1 1 0;min-width:0;max-width:820px}
  .cmp-ficha-topo .bloco-pe{flex:none;margin:0;order:0}
  /* em largura média o botão quebra em duas linhas e o aviso ganha largura */
  .cmp-ficha-topo .btn-puxa{max-width:clamp(200px,24vw,340px);justify-content:center;text-align:center;line-height:1.15;padding-block:8px;white-space:normal}
}
/* janela baixa (até 660 px de altura): mais um degrau de aperto em vida e ficha, sem cortar texto */
@media (min-width:700px) and (max-height:660px){
  .cmp-vida .comp-periodo,.cmp-vida .comp-extra{font-size:13px;line-height:1.2}
  .cmp-vida .comp-lado strong{font-size:clamp(15px,4.8cqw,20px)}
  .cmp-vida .comp-lado .comp-fonte{min-height:clamp(22px,3.6svh,28px)}
  .cmp-fato{gap:5px;padding:10px 14px}
  .cmp-fato p{font-size:13.5px;line-height:1.32}
  .cmp-fato-status summary{min-height:32px;font-size:14px}
  .cmp-fato-pe .comp-fonte,.cmp-fato-pe .link{min-height:28px}
  .cmp-ficha-topo .btn-puxa{padding-block:6px}
}
@media (max-width:699.98px){
  .cmp-ficha-topo{display:contents}
  .cmp-ficha-topo .bloco-pe{order:2}
}