/* Diretório público de candidatos e manual do candidato. */

.cd-layout {
    max-width: 1000px;
    margin: 0 auto;
    padding: 32px 20px 64px;
}

.cd-eyebrow {
    margin: 0 0 4px;
    color: var(--muted);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.cd-title {
    margin: 0 0 12px;
    /* Encolhe no celular em vez de empurrar a linha: "questionário" sozinha ocupa quase
       toda a largura de uma tela de 360 px a 1,8rem. */
    font-size: clamp(1.4rem, 6vw, 1.8rem);
}

.cd-lead {
    margin: 0 0 24px;
    max-width: 62ch;
    line-height: 1.6;
    color: var(--muted);
}

.cd-atalhos {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
    margin: 0 0 24px;
    font-size: 0.9rem;
    color: var(--muted);
}

.cd-count {
    margin: 0 0 16px;
}

.cd-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    margin-bottom: 20px;
}

.cd-filters label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.85rem;
    color: var(--muted);
}

/* A altura é dita, e não deixada para o `padding`: o `select` tem altura nativa própria e
   cada navegador dá a sua, então campo e combo lado a lado saíam desencontrados — no Safari
   a caixa de nome ficava visivelmente mais alta que os combos. */
.cd-filters select,
.cd-filters input {
    min-width: 140px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: inherit;
}

/* O botão não é mais um campo: o dobro do espaçamento o separa do último filtro e diz que
   ali a linha deixa de ser o que se preenche e passa a ser o que se aciona. Só enquanto a
   linha couber inteira, porém — quando os filtros quebram e o botão cai sozinho embaixo,
   a margem viraria um recuo que desalinha o botão da coluna dos campos. */
@media (min-width: 840px) {
    .cd-filters button {
        margin-left: 12px;
    }
}

/* Tabela larga rola dentro do próprio quadro; a página nunca rola de lado. */
.cd-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 12px;
}

.cd-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.cd-table th,
.cd-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.cd-table th {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
}

.cd-table tbody tr:last-child td {
    border-bottom: none;
}

.cd-badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    border: 1px solid currentColor;
}

.cd-sim {
    color: var(--accent);
}

.cd-nao {
    color: var(--muted);
}

.cd-pager {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
}

.cd-pager-info {
    color: var(--muted);
    font-size: 0.88rem;
}

.cd-vazio {
    margin-top: 32px;
    padding: 28px;
    text-align: center;
    border: 1px dashed var(--border);
    border-radius: 14px;
    color: var(--muted);
}

/* Manual: prosa longa vinda do Markdown. */
.cd-doc {
    max-width: 72ch;
    line-height: 1.65;
}

.cd-doc h1 {
    font-size: 1.9rem;
    margin: 0 0 20px;
}

.cd-doc h2 {
    font-size: 1.3rem;
    margin: 36px 0 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.cd-doc h3 {
    font-size: 1.05rem;
    margin: 24px 0 8px;
}

.cd-doc p,
.cd-doc li {
    margin: 0 0 12px;
}

.cd-doc ul,
.cd-doc ol {
    padding-left: 22px;
}

.cd-doc code {
    padding: 1px 5px;
    border-radius: 5px;
    background: var(--surface);
    font-size: 0.9em;
}

/* As fórmulas do manual vêm em bloco cercado, e `pre` não quebra linha: sem isto elas
   passavam por cima da borda direita e faziam a página inteira rolar de lado no celular.
   `pre-wrap` quebra nos espaços — a fórmula continua uma linha só onde couber — e o
   `overflow-x` fica de rede para o que não tiver onde quebrar. */
.cd-doc pre {
    margin: 16px 0;
    padding: 12px 14px;
    border-radius: 8px;
    background: var(--surface);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    overflow-x: auto;
}

.cd-doc pre code {
    padding: 0;
    background: none;
}

.cd-doc blockquote {
    margin: 16px 0;
    padding: 4px 16px;
    border-left: 3px solid var(--accent);
    color: var(--muted);
}

.cd-doc table {
    display: block;
    overflow-x: auto;
    border-collapse: collapse;
    margin: 16px 0;
}

.cd-doc th,
.cd-doc td {
    padding: 8px 12px;
    border: 1px solid var(--border);
    text-align: left;
}

/* Ressalva do que os números são — e do que não são. Miúda: ela precisa estar ali, não
   precisa disputar a página com a tabela. */
.cd-ressalva {
    max-width: 72ch;
    margin: 0 0 20px;
    padding: 8px 0 8px 12px;
    border-left: 2px solid var(--accent);
    line-height: 1.5;
    font-size: 0.78rem;
    color: var(--muted);
}

.cd-nota {
    margin-top: 12px;
    font-size: 0.85rem;
    color: var(--muted);
}

.cd-pct {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cd-pct-bar {
    display: inline-block;
    width: 90px;
    height: 8px;
    border-radius: 999px;
    background: var(--border);
    overflow: hidden;
}

.cd-pct-bar > span {
    display: block;
    height: 100%;
    background: var(--accent);
}

.cd-pct-num {
    min-width: 3.2em;
    text-align: right;
}

/* No celular a barra sai primeiro: ela repete, em quase 100px de uma tabela que já rola de
   lado, o mesmo número que está ao lado dela. Fica só o número. */
@media (max-width: 640px) {
    .cd-pct-bar {
        display: none;
    }
}

/* Mesmo aviso de demonstração da página de resultados, repetido aqui porque cada página
   carrega só a sua folha de estilo. */
.res-demo {
    margin: 0 0 20px;
    padding: 14px 16px;
    border: 1px solid var(--accent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Ficha do candidato. */
.cd-prompt {
    white-space: normal;
    max-width: 46ch;
}

/* A tabela de posições é a única com duas colunas de texto corrido — pergunta e resposta,
   as duas de tamanho imprevisível. Com o layout automático o navegador atende à coluna
   mais faminta e ignora o `max-width` do `.cd-prompt`, que em tabela é só sugestão: a
   pergunta se esticava por cima da resposta e as duas ficavam ilegíveis, sobrepostas.
   `fixed` faz as porcentagens abaixo mandarem, e aí quebrar linha é a única saída que
   sobra ao texto. */
.cd-table--posicoes {
    table-layout: fixed;
    /* Abaixo disto a tabela rola dentro do `.cd-table-wrap`, que já é `overflow-x: auto` —
       melhor rolar do que espremer três colunas de texto num celular. */
    min-width: 34rem;
}

.cd-col-tema {
    width: 20%;
}

.cd-col-pergunta {
    width: 47%;
}

.cd-col-resposta {
    width: 33%;
}

.cd-table--posicoes th,
.cd-table--posicoes td {
    white-space: normal;
    /* `anywhere` e não `break-word`: uma URL ou um nome de lei sem espaço ainda estouraria
       a coluna e traria a sobreposição de volta. */
    overflow-wrap: anywhere;
    /* Linhas de alturas diferentes: alinhadas pelo topo, a leitura acompanha a linha. */
    vertical-align: top;
}

.cd-historico {
    margin: 0;
    padding-left: 20px;
    line-height: 1.7;
}

.cd-quando {
    display: inline-block;
    min-width: 6.5em;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.cd-layout section {
    margin-top: 32px;
}

.cd-layout section h2 {
    font-size: 1.15rem;
    margin: 0 0 8px;
}

.cd-concessao {
    margin: 0 0 20px;
    font-size: 0.88rem;
    color: var(--muted);
}

/* A ficha de quem revogou o consentimento — cláusula 8.5. Fica visível sem ser alarme:
   a pessoa não fez nada errado, apenas exerceu um direito. */
.cd-revogado {
    border-left: 3px solid var(--cor-borda, #999);
    padding-left: .75rem;
}

/* ── O caminho de volta para a lista do match legislativo ───────────────────
   Botão de verdade, e não link cru: a ficha carrega só `candidatos.css`, e a classe
   `.res-cta` que eu havia usado mora em `resultado.css` — que esta página não carrega.
   Regra de casa: estilo de ficha se escreve aqui. */
.cd-voltar {
    margin: 14px 0 18px;
}

.cd-voltar a {
    display: inline-flex;
    align-items: center;
    padding: 7px 16px;
    border-radius: 999px;
    border: 1px solid var(--accent);
    background: var(--accent);
    color: #1a1508;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
}

.cd-voltar a:hover {
    filter: brightness(1.08);
}

/* ── Um bloco por tema em "Como votou na Câmara" ────────────────────────────
   A lista corrida não dizia de que assunto cada votação era. O bloco diz, e é ele que a
   linha "por tema" do resultado endereça (`#tema-<slug>`). */
.cd-tema {
    margin: 18px 0 0;
    padding: 14px 16px 6px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
}

.cd-tema__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.cd-tema__nome {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
}

/* De qual casa é o bloco. **Fica ao lado do tema, não do voto**: é a mesma casa para
   todas as linhas do bloco, e repeti-la em cada uma seria ruído — mas omiti-la faria a
   página afirmar voto de uma casa sob o nome da outra. Ela empurra o peso para a direita
   por `margin-right: auto`, e não por uma terceira coluna: o peso pode não existir. */
.cd-tema__casa {
    margin-right: auto;
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    color: var(--muted);
}

.cd-tema__peso {
    flex: none;
    padding: 3px 11px;
    border-radius: 999px;
    border: 1px solid var(--border);
    font-size: 0.72rem;
    color: var(--muted);
}

/* O marcador de lista não diz nada aqui: cada item já é um bloco com título próprio. */
.cd-tema .cd-votos {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cd-tema .cd-voto + .cd-voto {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

/* Chegando pela âncora, o bloco tem de se anunciar — senão o salto parece não ter
   acontecido, no meio de vinte e três votações parecidas. */
.cd-tema:target {
    border-color: var(--accent);
}

/* O número da votação no bloco do eleitor, e o link para a resposta dele.
   **Mesmo desenho da barra de progresso do questionário** (`.quiz-barra__n`), copiado e
   não importado porque a ficha não carrega `perguntas.css`: verde quando respondida,
   transparente quando não — a mesma leitura, no mesmo lugar do olho. */
.cd-voto__n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.85rem;
    height: 1.85rem;
    padding: 0 0.3rem;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: transparent;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    vertical-align: middle;
    transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.cd-voto__n:hover {
    border-color: var(--accent);
    color: var(--text);
}

.cd-voto__n.is-respondida {
    background: var(--accent);
    border-color: var(--accent);
    color: #1a1508;
}

.cd-voto__n.is-respondida:hover {
    color: #1a1508;
    filter: brightness(1.08);
}

/* ── O subtema da votação, e de quem é o peso ───────────────────────────────────
   O bloco é do tema-raiz e só ele tinha nome. Quem repartiu os 10 pontos de "Economia"
   entre os subtemas via "ECONOMIA · Peso 2" — número certo, procedência invisível. A
   linha diz o subtema (do servidor) e, quando quem paga não é a raiz, quantos pontos ele
   tem (do navegador, por `/api/votacoes/pesos`).

   Discreta de propósito: é contexto da afirmação, e a afirmação é o que se lê. Fica acima
   dela e à esquerda do card — não alinhada ao texto, porque o número da votação ao lado
   pode não existir, e aí o recuo apontaria para nada. */
.cd-voto__tema {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    margin: 0 0 6px;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.cd-voto__dona::before {
    content: '·';
    margin-right: 6px;
}

/* ── A linha da afirmação: número à esquerda, peso à direita ────────────────────
   Uma faixa de três colunas, e não texto corrido com dois elementos embutidos: o peso
   tem de cair na margem direita, alinhado ao do tema no cabeçalho do bloco, e embutido
   ele cairia no meio do parágrafo, onde quer que a última linha terminasse.

   `align-items: flex-start` porque a afirmação tem duas ou três linhas e o número e o
   peso pertencem à primeira. O espaço entre o número e o texto é o `gap` daqui — era um
   `margin-right` no próprio número, que somaria ao gap. */
.cd-voto__claim {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.cd-voto__texto {
    flex: 1;
    min-width: 0;
}

/* O peso desta votação para este eleitor. Mesma pílula do peso do tema, um tom abaixo:
   a hierarquia é essa — o tema é o total, a votação é a parcela. `flex: none` para ela
   não encolher quando a afirmação é longa, que é o caso comum. */
.cd-voto__peso {
    flex: none;
    padding: 2px 9px;
    border-radius: 999px;
    border: 1px dashed var(--border);
    font-size: 0.68rem;
    line-height: 1.5;
    white-space: nowrap;
    color: var(--muted);
}

/* ── A ficha em duas regiões: a de cima parada, a de baixo rolando ──────────────
   Chega-se aqui da aba de match legislativo para conferir uma votação e voltar. Com a
   página inteira rolando, o "Voltar à lista" sumia no primeiro card.

   `.app-body` é quem rola na aplicação inteira; aqui ele para, e quem rola passa a ser
   `.cd-rolagem`. O `:has()` evita uma classe no `<body>`: quem sabe que esta é a ficha é
   o próprio `main`.

   **`min-height: 0` nos dois lugares não é enfeite.** Item de flex tem `min-height: auto`
   por padrão e se recusa a encolher abaixo do conteúdo — sem isto o `overflow` do filho
   nunca entra em ação e a região cresce, empurrando a página de volta ao scroll único.

   A cabeça tem `max-height` e `overflow` próprios porque ela nem sempre é curta: numa
   candidatura que publicou, "Posições" é uma tabela inteira. Preso a ela, o leitor não
   chegaria aos cards. */
@media (min-width: 700px) and (min-height: 640px) {
    .app-body:has(> .cd-layout--ficha) {
        overflow: hidden;
    }

    .cd-layout--ficha {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
        padding-bottom: 0;
    }

    /* `0 0 auto`, e não `0 1 auto`: com encolhimento permitido, o `flex-grow` da região
       de baixo espremia a cabeça a 52 px e o botão saía junto — o oposto do que se
       queria. Quem limita a altura dela é o `max-height`, e só quando ela é longa. */
    .cd-fixo {
        flex: 0 0 auto;
        max-height: 55%;
        overflow-y: auto;
    }

    .cd-rolagem {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        /* O filete marca onde a página deixa de rolar. Sem ele o card cortado no meio da
           frase parece defeito de renderização, e não a borda de uma região. */
        border-top: 1px solid var(--border);
        padding-top: 14px;
        /* A barra de rolagem encosta na borda do card sem isto. */
        padding-right: 6px;
        padding-bottom: 28px;
    }

    /* Dentro de uma região que rola, a margem de cima do primeiro bloco vira um vão
       inexplicável no topo. */
    .cd-rolagem > .cd-tema:first-child {
        margin-top: 0;
    }
}

/* Divergência: o deputado se posicionou ao contrário do eleitor. Vermelho só quando os
   dois lados se posicionaram — abstenção de qualquer um dos dois fica no estado neutro,
   porque pintá-la afirmaria uma divergência que não houve. */
.cd-voto__n.is-diverge {
    background: #c0554a;
    border-color: #c0554a;
    color: #fdece9;
}

.cd-voto__n.is-diverge:hover {
    color: #fdece9;
    filter: brightness(1.08);
}

/* ── A ficha do partido ─────────────────────────────────────────────────────────
   O parêntese que substitui o "registrado como": quantos candidatos do partido votaram de
   cada lado. Botão com cara de link, porque abre um pop-up e não navega. Nasce neutro;
   `ficha-legislativa.js` pinta verde ("como você") e vermelho ("diferente") quando sabe a
   resposta do eleitor — e só então, porque sem resposta não há acordo a afirmar. */
.cd-partido-numero {
    display: inline-block;
    margin-right: 6px;
    padding: 0 10px;
    border-radius: 8px;
    background: var(--accent);
    color: #1a1508;
    font-size: 0.75em;
    vertical-align: middle;
}

.cd-lados {
    color: var(--muted);
}

.cd-lado {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--muted);
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
    cursor: pointer;
}

.cd-lado:hover:not(:disabled) {
    color: var(--text);
    text-decoration-style: solid;
}

/* Zero não abre lista nenhuma: o botão fica, para a contagem aparecer, mas sem promessa. */
.cd-lado:disabled {
    text-decoration: none;
    cursor: default;
}

.cd-lado.is-como-voce {
    color: var(--accent);
    font-weight: 700;
}

/* O mesmo vermelho do número divergente, clareado para ler como texto sobre fundo escuro. */
.cd-lado.is-diverge {
    color: #e07b70;
    font-weight: 700;
}

/* A bancada inteira do dia, na linha da posição: é ela que decide a cor, então recebe
   as mesmas cores dos lados quando o eleitor se posicionou. Texto, não botão — não há
   lista para abrir, quem estava na bancada em 2022 não é necessariamente candidato. */
.cd-dia {
    color: var(--muted);
}

.cd-lado-b.is-como-voce {
    color: var(--accent);
    font-weight: 700;
}

.cd-lado-b.is-diverge {
    color: #e07b70;
    font-weight: 700;
}

/* A contagem de candidatos de hoje, em linha própria: outra população, e a única que
   leva a pessoas na urna. */
.cd-bancada {
    margin: 6px 0 0;
    font-size: 0.8rem;
    color: var(--muted);
}

/* O pop-up com a lista de um lado. Mesmo tom do `.quiz-pular` do questionário, copiado
   porque a ficha não carrega `perguntas.css`. A lista rola dentro do pop-up: um partido
   grande tem dezenas de candidatos por lado, e a página atrás não deve rolar. */
.cd-deps {
    width: min(44rem, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    color: var(--text);
}

.cd-deps::backdrop {
    background: rgba(0, 0, 0, 0.6);
}

.cd-deps__titulo {
    margin: 0 0 0.35rem;
    font-size: 1.1rem;
}

.cd-deps__claim {
    margin: 0 0 0.9rem;
    line-height: 1.5;
}

.cd-deps__lista {
    max-height: 50vh;
    overflow-y: auto;
}

.cd-deps__nome {
    white-space: normal;
}

.cd-deps__nome a {
    color: var(--text);
    text-decoration: none;
}

.cd-deps__nome a:hover {
    text-decoration: underline;
}

.cd-deps__nota {
    margin: 0.9rem 0 0;
    font-size: 0.8rem;
    line-height: 1.5;
}

.cd-deps__acoes {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
}

/* O nome, agora link para a ficha. Sublinhado discreto e não a cor de link do navegador:
 * a coluna inteira é de links, e um azul por linha transformaria a tabela num mural. O
 * sublinhado é o que diz que é clicável — sem ele a única pista seria o cursor, que não
 * existe no celular. */
.cd-ficha-link {
    color: var(--text);
    text-decoration: underline;
    text-decoration-color: var(--border);
    text-underline-offset: 3px;
}

.cd-ficha-link:hover,
.cd-ficha-link:focus-visible {
    text-decoration-color: var(--accent);
}