/* Brand direction A "Tinta" (D20). Tokens copied from docs/brand/visual/direcoes.json (id "A").
   Keep in sync with that file; do not saturate the accent (it drifts toward party blues). */
:root {
  --accent: #1E333F; --ink: #0C1215; --bg: #F6FAFC; --surface: #FFFFFF;
  --muted: #555C61; --line: #DCE0E3; --tint: #E9F2F7; --on-accent: #FFFFFF;
  --radius: 31px; --radius-frame: 39px; --pill: 999px;
  --shadow: 0 15px 30px rgba(10, 20, 30, .067);
  --display: "Instrument Serif", Georgia, serif;
  --text: "Figtree", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent: #A0C3D9; --ink: #E7ECEF; --bg: #0D1316; --surface: #161D21;
    --muted: #A4ACB1; --line: #30363B; --tint: #1B2328; --on-accent: #0D1316;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.55 var(--text); }
a { color: var(--accent); }
.col { max-width: 720px; margin: 0 auto; padding: 0 20px; }
header.topo { display: flex; align-items: center; gap: 10px; padding: 22px 0; }
header.topo img { width: 30px; height: 30px; }
header.topo span { font-family: var(--display); font-size: 22px; letter-spacing: -.015em; }
h1, h2 { font-family: var(--display); font-weight: 400; letter-spacing: -.015em; margin: 0; }
h1 { font-size: clamp(46px, 8vw, 104px); line-height: .98; }
h2 { font-size: clamp(30px, 5vw, 48px); line-height: 1.05; }
.sub { font-size: 20px; color: var(--muted); margin: 18px 0 30px; max-width: 34ch; }
.miudo { font-size: 14px; color: var(--muted); }
.card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px; margin: 22px 0; }
section { padding: 48px 0; }

/* search pill (D15: search as hero) */
.busca { display: flex; align-items: center; background: var(--surface); border: 1px solid var(--line);
         border-radius: var(--pill); box-shadow: var(--shadow); padding: 6px 6px 6px 22px; }
.busca input { flex: 1; border: 0; outline: 0; background: transparent; color: var(--ink); font: 400 18px var(--text); min-width: 0; }
.busca button, .botao { border: 0; background: var(--accent); color: var(--on-accent); border-radius: var(--pill);
         font: 600 16px var(--text); padding: 14px 22px; cursor: pointer; }
.busca button { width: 48px; height: 48px; padding: 0; font-size: 20px; }
.botao[disabled] { opacity: .45; cursor: not-allowed; }
.botao.secundario { background: transparent; color: var(--accent); border: 1px solid var(--line); }

/* results and chosen politicians */
ul.lista { list-style: none; padding: 0; margin: 14px 0; }
ul.lista li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 4px;
              border-bottom: 1px solid var(--line); }
ul.lista li .quem { display: flex; flex-direction: column; }
ul.lista li .quem small { color: var(--muted); font-size: 14px; }
.chip { border: 1px solid var(--line); background: var(--tint); color: var(--ink); border-radius: var(--pill);
        padding: 6px 14px; font: 500 14px var(--text); cursor: pointer; white-space: nowrap; }
.uf-select { border: 0; background: transparent; color: var(--ink); font: 500 16px var(--text); margin-right: 8px; max-width: 46%; }
.filtros { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 4px; }
.ufs { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; margin: 14px 0; }
.ufs[hidden], ul.lista[hidden] { display: none; }
.ufs .chip { padding: 10px 0; text-align: center; font-weight: 600; }
ul.lista li.grupo { display: block; border: 0; padding: 18px 4px 4px; font-size: 13px; font-weight: 600; letter-spacing: .06em;
                    text-transform: uppercase; color: var(--muted); }
.chip.escolhido { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

.preco { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.preco strong { font-family: var(--display); font-weight: 400; font-size: 44px; }
.consent { border: 2px solid var(--accent); border-radius: 18px; padding: 16px 18px; margin: 16px 0; background: var(--tint); }
.consent label, .check label { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.consent input, .check input { margin-top: 5px; width: 20px; height: 20px; flex: none; }
.campo { width: 100%; border: 1px solid var(--line); border-radius: var(--pill); padding: 14px 20px; font: 400 17px var(--text);
         background: var(--surface); color: var(--ink); }
.erro { color: #8A2B1E; font-weight: 600; }
.placeholder-copy { outline: 1px dashed #c9a227; outline-offset: 2px; } /* visible in dev only, see escolher.js */
/* Dark footer, full width, outside .col (Paulo, 2026-10-03). Same in both themes: always darker than the page. */
body { min-height: 100vh; display: flex; flex-direction: column; }
body > .col { flex: 1 0 auto; width: 100%; box-sizing: border-box; }
footer.rodape { margin-top: 56px; background: #0C1215; color: #C3CACE; font-size: 14px; text-align: center;
  padding: 28px 20px calc(28px + env(safe-area-inset-bottom, 0px)); }
footer.rodape a { color: #E7ECEF; text-underline-offset: 3px; }
dl.ficha { display: grid; grid-template-columns: max-content 1fr; gap: 10px 20px; margin: 18px 0; }
dl.ficha dt { color: var(--muted); font-size: 14px; padding-top: 2px; }
dl.ficha dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 520px) { dl.ficha { grid-template-columns: 1fr; gap: 2px; } dl.ficha dd { margin-bottom: 10px; } }
@media (prefers-color-scheme: dark) { footer.rodape { background: #050809; border-top: 1px solid #30363B; } }