/* refs.css — compartilhado pela Parte 1 e pela Parte 2.
   (1) citações [n] e glossário, com popover acessível; (2) capítulo "Referências";
   (3) a regra de CLAREZA: a MARGEM (% dos votos válidos, p.p.) e a CHANCE DE VITÓRIA têm linguagens visuais distintas,
       para ninguém confundir probabilidade com fatia de votos; (4) matriz de 100 ícones, régua da margem e selo GRADE.
   Só tokens: funciona nos dois temas. */

/* ------------------------------------------------------------- citações [n] */
.cites { white-space: nowrap; font-family: var(--font-mono); font-size: .7em; line-height: 0; vertical-align: super; margin-left: .12em; color: var(--ink-3); letter-spacing: -.02em; }
.cites::before { content: "["; } .cites::after { content: "]"; }
.cite { appearance: none; position: relative; border: 0; background: none; padding: 0 .1em; margin: 0; font: inherit; color: var(--gold); cursor: pointer; border-radius: 3px; text-decoration: underline dotted; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.cs { color: var(--ink-3); }
.cite::after { content: ""; position: absolute; inset: -10px -3px; }
.cite:hover, .cite[aria-expanded="true"] { background: var(--gold-soft); color: var(--ink); text-decoration-color: transparent; }
.cite:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.cite.is-nulo { color: var(--bad); cursor: help; }
.gl { appearance: none; border: 0; background: none; padding: 0; margin: 0; font: inherit; color: inherit; cursor: help; text-decoration: underline dotted var(--gold); text-decoration-thickness: 1.5px; text-underline-offset: 3px; border-radius: 3px; }
.gl:hover, .gl[aria-expanded="true"] { color: var(--gold); background: var(--gold-soft); }
.gl:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.refpop { position: absolute; z-index: 220; width: min(400px, calc(100vw - 24px)); padding: 14px 16px 12px; background: var(--bg-panel-2); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: var(--shadow), 0 0 0 1px color-mix(in srgb, var(--gold) 22%, transparent); font-family: var(--font-sans); font-size: .86rem; line-height: 1.5; text-align: left; }
.refpop[hidden] { display: none; }
.refpop:focus { outline: none; }
.refpop:focus-visible { outline: 2px solid var(--gold); }
.refpop.is-folha { position: fixed; left: 8px; right: 8px; bottom: 8px; top: auto !important; width: auto; max-height: 68vh; overflow: auto; border-radius: 18px; }
.rp-h { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.rp-h b { font-size: .95rem; }
.rp-tag { font-family: var(--font-sans); font-size: .7rem; line-height: 1; padding: 3px 8px; border-radius: 99px; border: 1px solid var(--line-strong); color: var(--ink-2); white-space: nowrap; }
.rp-x { appearance: none; margin-left: auto; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-strong); background: transparent; color: var(--ink-2); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.rp-x:hover { color: var(--ink); border-color: var(--gold); }
.rp-cit, .rp-def, .rp-ach, .rp-ln { margin: 0 0 8px; }
.rp-cit { color: var(--ink); overflow-wrap: anywhere; }
.rp-cit a, .rp-ln a { color: var(--gold); text-underline-offset: 2px; }
.rp-ach { color: var(--ink-2); font-size: .82rem; }
.rp-ach b { color: var(--ink); font-weight: 600; }
.rp-ver { margin: 4px 0 0; font-size: .76rem; color: var(--ink-3); }
.rp-ver summary { cursor: pointer; width: fit-content; }
.rp-ver p { margin: 6px 0 0; }
.rp-def { color: var(--ink-2); }
.rp-def b { color: var(--ink); }

/* ----------------------------------------------------- capítulo "Referências" */
.refs-intro { max-width: 78ch; margin: 0 0 22px; color: var(--ink-2); }
.refs-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 10px; }
.refs-ctl .campo-busca input { width: min(320px, 78vw); }
.campo-busca input { appearance: none; font: inherit; font-size: .88rem; color: var(--ink); background: var(--bg-glass); border: 1px solid var(--line-strong); border-radius: 999px; padding: 8px 14px; }
.campo-busca input::placeholder { color: var(--ink-3); }
.campo-busca input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.refs-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.refs-chips .chip { appearance: none; font: inherit; font-size: .82rem; color: var(--ink-2); background: transparent; border: 1px solid var(--line-strong); border-radius: 999px; padding: 7px 14px; cursor: pointer; transition: border-color .25s, color .25s, background .25s; }
.refs-chips .chip:hover { border-color: var(--gold); color: var(--ink); }
.refs-chips .chip[aria-pressed="true"] { background: var(--gold-soft); border-color: var(--gold); color: var(--ink); }
.refs-chips .chip small { color: var(--ink-3); margin-left: 4px; }
.refs-tog { display: inline-flex; align-items: center; gap: 8px; font-size: .86rem; color: var(--ink-2); cursor: pointer; }
.refs-tog input { accent-color: var(--gold); width: 16px; height: 16px; }
.refs-n { margin: 6px 0 16px; font-size: .8rem; color: var(--ink-3); }
.refs-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 48px); }
.ref { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); content-visibility: auto; contain-intrinsic-size: auto 96px; scroll-margin-top: 90px; }
.ref[hidden] { display: none; }
.ref-n { font-size: .78rem; color: var(--gold); text-align: right; padding-top: 2px; }
.ref-t { margin: 0; font-size: .86rem; line-height: 1.55; color: var(--ink-2); overflow-wrap: anywhere; }
.ref-t i { color: var(--ink); }
.ref-t a { color: var(--gold); text-underline-offset: 2px; }
.ref-m { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: .72rem; color: var(--ink-3); }
.ref.is-alvo { background: linear-gradient(90deg, var(--gold-soft), transparent); outline: 1px solid var(--gold-line); border-radius: 8px; }
@media (max-width: 900px) { .refs-lista { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .ref { grid-template-columns: 2.6rem minmax(0, 1fr); gap: 8px; } }

/* ---------------------------------------------- CLAREZA: margem × chance de vitória */
/* MARGEM: tipografia mono, sublinhado sólido na cor do candidato à frente. É medida em votos. */
.t-margem { font-family: var(--font-mono); font-size: .93em; letter-spacing: -.02em; white-space: nowrap; font-weight: 500; border-bottom: 2px solid color-mix(in srgb, var(--flavio) 70%, transparent); padding-bottom: 1px; }
.t-margem.is-l { border-bottom-color: color-mix(in srgb, var(--lula) 70%, transparent); }
.t-margem.is-n { border-bottom-color: var(--neutral); }
.t-margem b { font-weight: 500; }
.t-margem small { font-family: var(--font-sans); font-size: .8em; color: var(--ink-3); letter-spacing: 0; }
/* CHANCE DE VITÓRIA: selo dourado arredondado, com o ícone de pontos e o rótulo. É probabilidade, não votos. */
.t-chance { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 4px 11px 4px 9px; border-radius: 16px; border: 1px solid var(--chance-line); background: var(--chance-bg); font-size: .9em; line-height: 1.3; vertical-align: middle; color: var(--ink); }
.t-chance::before { content: ""; flex: none; width: 13px; height: 13px; background: radial-gradient(circle, var(--gold) 36%, transparent 42%) 0 0 / 6.5px 6.5px; }
.tc-k { font-weight: 600; font-size: .94em; }
.tc-v { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.tc-v b { font-family: var(--font-mono); font-weight: 600; font-size: .94em; padding: 0 .45em; border-radius: 5px; letter-spacing: -.02em; white-space: nowrap; }
.tc-v b.f { background: var(--flavio-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--flavio) 40%, transparent); }
.tc-v b.l { background: var(--lula-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lula) 40%, transparent); }
.aviso-chance { margin: 10px 0 0; font-size: .8rem; color: var(--ink-3); line-height: 1.5; }

/* matriz de 100 ícones: um ícone = uma eleição simulada */
.mx { margin: 14px 0 0; }
.mx svg { display: block; width: 100%; height: auto; }
.mx-g { max-width: 300px; } .mx-m { max-width: 260px; } .mx-p { max-width: 190px; }
.mx-i.is-f { fill: var(--flavio); } .mx-i.is-l { fill: var(--lula); }
.mx-i { transform-box: fill-box; transform-origin: 50% 100%; }
.js .mx:not(.is-in) .mx-i { opacity: 0; }
.mx.is-in .mx-i { animation: mxIn .55s var(--ease-out) both; animation-delay: calc(var(--i) * 9ms); }
@keyframes mxIn { from { opacity: 0; transform: translateY(8px) scale(.6); } to { opacity: 1; transform: none; } }
.mx-leg { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 10px; font-size: .8rem; color: var(--ink-2); }
.mx-k { display: inline-flex; align-items: center; gap: 6px; }
.mx-k i { width: 10px; height: 10px; border-radius: 50%; }
.mx-k.f i { background: var(--flavio); } .mx-k.l i { background: var(--lula); }
.mx-k b { color: var(--ink); font-weight: 600; }

/* régua da margem: intervalo de 95% (fina), de 80% (grossa), mediana (marca) e a linha do empate */
.regua { --c: var(--gold); margin: 14px 0 2px; }
.rg-eixo { position: relative; height: 32px; }
.rg-eixo > * { position: absolute; top: 50%; }
.rg-zero { top: 0 !important; bottom: 0; width: 0; border-left: 1.5px dashed var(--ink-2); transform: translateX(-50%); }
.rg-95 { height: 3px; transform: translateY(-50%); background: color-mix(in srgb, var(--c) 55%, transparent); border-radius: 2px; }
.rg-80 { height: 14px; transform: translateY(-50%); background: color-mix(in srgb, var(--c) 78%, transparent); border-radius: 7px; }
.rg-med { width: 4px; height: 26px; transform: translate(-50%, -50%); background: var(--ink); border-radius: 2px; box-shadow: 0 0 0 2px var(--bg-panel); }
.js .regua:not(.is-in) .rg-95, .js .regua:not(.is-in) .rg-80 { transform: translateY(-50%) scaleX(0); }
.regua.is-in .rg-95, .regua.is-in .rg-80 { transition: transform .9s var(--ease-out); }
.js .regua:not(.is-in) .rg-med { opacity: 0; }
.regua.is-in .rg-med { transition: opacity .5s .5s; }
.rg-ticks { position: relative; height: 16px; font-family: var(--font-mono); font-size: .68rem; color: var(--ink-3); }
.rg-ticks span { position: absolute; transform: translateX(-50%); }
.regua .rg-lados { display: flex; justify-content: space-between; font-size: .72rem; color: var(--ink-3); margin-top: 2px; white-space: nowrap; }

/* selo de certeza da evidência (GRADE adaptado): quatro barras crescentes */
.grade { display: inline-flex; align-items: center; gap: 8px; padding: 4px 11px 4px 8px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--wash); white-space: nowrap; vertical-align: middle; }
.grade svg { display: block; flex: none; }
.grade svg .on { fill: var(--gold); } .grade svg .off { fill: var(--line-strong); }
.grade > span { display: grid; line-height: 1.1; text-align: left; }
.grade small { font-size: .62rem; color: var(--ink-3); letter-spacing: .01em; }
.grade b { font-size: .84rem; font-weight: 600; color: var(--ink); }
.grade.is-g { padding: 6px 14px 6px 10px; } .grade.is-g svg { width: 44px; height: 36px; } .grade.is-g b { font-size: 1rem; }
.grade.g-1 { border-color: color-mix(in srgb, var(--warn) 50%, var(--line-strong)); }

@media (prefers-reduced-motion: reduce) {
  .mx.is-in .mx-i { animation: none; }
  .js .mx:not(.is-in) .mx-i { opacity: 1; }
  .regua.is-in .rg-95, .regua.is-in .rg-80, .regua.is-in .rg-med { transition: none; }
  .js .regua:not(.is-in) .rg-95, .js .regua:not(.is-in) .rg-80 { transform: translateY(-50%); }
  .js .regua:not(.is-in) .rg-med { opacity: 1; }
}

/* "Detalhes técnicos" recolhíveis (segunda camada de leitura) */
.tec { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 8px; }
.tec summary { cursor: pointer; width: fit-content; max-width: 100%; font-size: .86rem; font-weight: 500; color: var(--ink-2); padding: 4px 0; }
.tec summary:hover { color: var(--gold); }
.tec summary::marker { color: var(--gold); }
.tec-corpo { padding: 8px 0 2px; }
.pj-faixa { margin: 10px 0 0; font-size: .92rem; color: var(--ink); line-height: 1.55; }