/* Tokens visuais: cores, tipografia e medidas compartilhadas. */
/* Layout: coluna de app (max 480px). Panorama geral em blocos curtos; números grandes; carrossel de placares */
:root {
  --bg: #F4F5F7; --surface: #FFFFFF; --ink: #111318; --ink-2: #3B3F48; --muted: #5B606B; --line: #E3E5EA; --chip: #EEF0F3;
  --accent: #5B3DF5; --accent-2: #8E7BFF; --accent-soft: #EEEAFE; --no: #AEB3BD;
  --warn: #B83D0A; --warn-soft: #FFF1E8;
  --hero-bg: #111318; --hero-fg: #FFFFFF; --hero-muted: #B4B8C2; --hero-line: #2A2D35; --hero-chip: #22252D;
  --cat1: #5B3DF5; --cat2: #111318; --cat3: #8E7BFF; --cat4: #5B606B; --cat5: #C9C0FF; --cat6: #D5D8DE;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --shadow-raised: 0 1px 2px rgba(17, 19, 24, 0.05), 0 18px 40px -26px rgba(17, 19, 24, 0.22);
  --radius-card: 22px; --radius-control: 12px; --control-height: 44px;
  --f-display: 'Newsreader', Georgia, serif;
  --f-body: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-data: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0E0F13; --surface: #17191F; --ink: #ECEDF1; --ink-2: #C9CCD4; --muted: #A2A7B2; --line: #2A2D36; --chip: #22252D;
  --accent: #A898FA; --accent-2: #7C66F7; --accent-soft: #262046; --no: #4E535E;
  --warn: #FF9A6B; --warn-soft: #2B1A12;
  --hero-bg: #ECEDF1; --hero-fg: #111318; --hero-muted: #4A4F5A; --hero-line: #CDD0D8; --hero-chip: #DADDE3;
  --cat1: #A898FA; --cat2: #ECEDF1; --cat3: #6F57F2; --cat4: #A2A7B2; --cat5: #4B3F99; --cat6: #3A3E48;
  --shadow-raised: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 1px 2px rgba(0, 0, 0, 0.3), 0 24px 48px -28px rgba(0, 0, 0, 0.8);
  color-scheme: dark; } }
:root[data-theme="dark"] {
  --bg: #0E0F13; --surface: #17191F; --ink: #ECEDF1; --ink-2: #C9CCD4; --muted: #A2A7B2; --line: #2A2D36; --chip: #22252D;
  --accent: #A898FA; --accent-2: #7C66F7; --accent-soft: #262046; --no: #4E535E;
  --warn: #FF9A6B; --warn-soft: #2B1A12;
  --hero-bg: #ECEDF1; --hero-fg: #111318; --hero-muted: #4A4F5A; --hero-line: #CDD0D8; --hero-chip: #DADDE3;
  --cat1: #A898FA; --cat2: #ECEDF1; --cat3: #6F57F2; --cat4: #A2A7B2; --cat5: #4B3F99; --cat6: #3A3E48;
  --shadow-raised: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 1px 2px rgba(0, 0, 0, 0.3), 0 24px 48px -28px rgba(0, 0, 0, 0.8);
  color-scheme: dark; }

/* Regras originais do painel, componentes compartilhados e layout responsivo. */
* { box-sizing: border-box; }
body { background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 15px; line-height: 1.4; -webkit-font-smoothing: antialiased; }
a { color: var(--accent); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.search:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
.app { max-width: 480px; margin: 0 auto; padding-inline: var(--space-4); padding-block: 14px 28px; }
.view { display: flex; flex-direction: column; gap: 14px; }
.mono { font-family: var(--f-data); font-variant-numeric: tabular-nums; }
.top { display: flex; align-items: center; justify-content: space-between; }
.brand { font-family: var(--f-display); font-size: 26px; font-weight: 600; letter-spacing: -0.02em; }
.pill { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 0 11px; border-radius: 15px; background: var(--surface); border: 1px solid var(--line); font-size: 12px; font-weight: 600; color: var(--ink-2); }
.pill i { width: 7px; height: 7px; border-radius: 4px; background: var(--muted); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 18px; display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.card.hero { background: var(--hero-bg); color: var(--hero-fg); border-color: var(--hero-bg); }
.k { font-family: var(--f-data); font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.hero .k, .hero .muted { color: var(--hero-muted); }
.muted { color: var(--muted); font-size: 13px; }
.h { font-family: var(--f-display); font-size: 24px; line-height: 1.15; font-weight: 500; letter-spacing: -0.01em; text-wrap: balance; margin: 0; }
.huge { font-family: var(--f-data); font-weight: 700; letter-spacing: -0.05em; line-height: 0.95; font-size: clamp(46px, 15vw, 64px); font-variant-numeric: tabular-nums; }
.huge small { font-size: 0.42em; letter-spacing: -0.02em; margin-right: 4px; }
.big { font-family: var(--f-data); font-weight: 700; letter-spacing: -0.04em; font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums; }
.row2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 14px 12px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tile .big { font-size: 26px; }
.stack { display: flex; height: 18px; border-radius: 9px; overflow: hidden; gap: 2px; }
.stack i { display: block; height: 100%; }
@media (prefers-reduced-motion: no-preference) { .grow-x { animation: gx .7s cubic-bezier(.2,.8,.2,1) both; transform-origin: left; } @keyframes gx { from { transform: scaleX(.15); } to { transform: none; } } }

/* quiz */
.opts { display: grid; gap: 8px; }
.opt { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 52px; padding: 0 16px; border-radius: 14px; border: 1.5px solid var(--hero-line); background: var(--hero-chip); color: var(--hero-fg); font-weight: 600; cursor: pointer; text-align: left; }
.opt[data-state="right"] { border-color: var(--hero-line); background: var(--accent-2); color: #fff; }
.opt[data-state="wrong"] { opacity: .55; }
.opt span:last-child { font-family: var(--f-data); font-size: 13px; }

/* placar */
.carousel { display: flex; align-items: stretch; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -16px; padding-inline: 16px; padding-bottom: 4px; scrollbar-width: none; }
.carousel::-webkit-scrollbar { display: none; }
.carousel > .card { flex: 0 0 86%; scroll-snap-align: center; }
.score { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tag { font-size: 11px; font-weight: 700; letter-spacing: .05em; padding: 4px 9px; border-radius: 999px; background: var(--ink); color: var(--bg); }
.tag.soft { background: var(--chip); color: var(--ink-2); }
.party { display: grid; grid-template-columns: 74px minmax(0, 1fr) 54px; gap: 8px; align-items: center; font-size: 12px; }
.party b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.party .bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--chip); }
.party .bar i:first-child { background: var(--accent); } .party .bar i:nth-child(2) { background: var(--no); }
.party span { font-family: var(--f-data); color: var(--muted); text-align: right; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.more { background: none; border: 0; padding: 0; min-height: var(--control-height); color: var(--accent); font-weight: 600; cursor: pointer; text-align: left; align-self: flex-start; }
.secret { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; background: var(--chip); font-size: 14px; }

/* listas com rosto */
.who { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding-block: 10px; border-top: 1px solid var(--line); text-decoration: none; color: inherit; background: none; border-left: 0; border-right: 0; border-bottom: 0; width: 100%; text-align: left; cursor: pointer; }
.who img, .face img { width: 44px; height: 44px; border-radius: 22px; object-fit: cover; object-position: top; background: var(--chip); }
.who img { grid-row: span 2; }
.who .n { font-weight: 600; }
.who .s { grid-column: 2; font-size: 12px; color: var(--muted); }
.who .v { grid-row: span 2; font-family: var(--f-data); font-weight: 700; text-align: right; }
.who .b { grid-column: 2 / span 2; height: 6px; border-radius: 3px; background: var(--chip); overflow: hidden; }
.who .b i { display: block; height: 100%; background: var(--accent); }
.faces { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px 6px; }
.face { display: flex; flex-direction: column; align-items: center; gap: 5px; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; min-width: 0; }
.face img { width: 54px; height: 54px; border-radius: 27px; border: 3px solid var(--hero-bg); box-shadow: 0 0 0 2px var(--hero-muted); }
.face span { font-size: 11px; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.face em { font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; color: var(--hero-muted); }
.face[data-r="win"] em { color: var(--accent-2); }

/* deputados */
.search { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font: 400 16px var(--f-body); color: var(--ink); }
.star { width: 44px; height: 44px; border-radius: 22px; border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; cursor: pointer; color: var(--muted); }
.star[aria-pressed="true"] { background: var(--accent); border-color: var(--line); color: #fff; }
.profile { display: flex; align-items: center; gap: 14px; }
.profile img { width: 72px; height: 72px; border-radius: 36px; object-fit: cover; object-position: top; }
.profile .n { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.badge { display: inline-flex; align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: .05em; padding: 4px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.dots { display: flex; flex-wrap: wrap; gap: 3px; }
.dots i { width: 11px; height: 11px; border-radius: 3px; background: var(--ink); }
.dots i.f { background: var(--warn); }
.votes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.vt { border-radius: 14px; background: var(--chip); padding: 12px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vt b { font-family: var(--f-data); font-size: 16px; }
.vt span { font-size: 12px; color: var(--ink-2); }
.note { margin: 0; padding: 12px; border-radius: 14px; background: var(--chip); font-size: 13px; color: var(--ink-2); }
.item { display: flex; gap: 10px; align-items: center; min-height: 48px; border-top: 1px solid var(--line); text-decoration: none; color: inherit; padding-block: 6px; }
.item .g { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.item .g span:first-child { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.src { font-size: 11px; color: var(--muted); }


/* custo */
.cost-row { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 2px 10px; align-items: baseline; padding-block: 10px; border-top: 1px solid var(--hero-line); }
.cost-row i { width: 12px; height: 12px; border-radius: 3px; align-self: center; }
.cost-row b { font-weight: 700; }
.cost-row .val { font-family: var(--f-data); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.cost-row p { grid-column: 2 / span 2; margin: 0; font-size: 13px; color: var(--hero-muted); }
.card:not(.hero) .cost-row { border-color: var(--line); }
.card:not(.hero) .cost-row p { color: var(--muted); }
.alarm { background: var(--warn-soft); }
.alarm .big { color: var(--warn); }
.dots i.j { background: var(--muted); opacity: .55; }
.proj { display: flex; flex-direction: column; gap: 4px; padding-block: 12px; border-top: 1px solid var(--line); text-decoration: none; color: inherit; }
.proj b { font-family: var(--f-data); font-size: 12px; }
.proj span.e { font-size: 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.proj .st { font-size: 12px; color: var(--muted); }
.proj .st.lei { color: var(--accent); font-weight: 700; }
.vt { cursor: pointer; border: 0; text-align: left; }
.vt:hover { outline: 1.5px solid var(--line); }
.back { background: none; border: 0; padding: 0; min-height: var(--control-height); color: var(--accent); font-weight: 600; cursor: pointer; align-self: flex-start; }

.fchip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-size: 13px; font-weight: 600; cursor: pointer; }
.fchip b { font-family: var(--f-data); color: var(--muted); }
.fchip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.fchip[aria-pressed="true"] b { color: var(--bg); }
.contact { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding-top: 10px; border-top: 1px solid var(--line); }
.contact .muted { grid-column: 1 / -1; }
.contact .cv { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; user-select: all; }
a.fchip { text-decoration: none; color: var(--ink); }
.dl-only { display: none !important; }
.can-dl .dl-only { display: flex !important; }
.can-dl .star.dl-only { display: grid !important; }
nav.tabs { position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; background: var(--surface); border-top: 1px solid var(--line); padding: 6px 8px calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 5; }
nav.tabs .in { width: 100%; max-width: 480px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
nav.tabs :is(button, a) { display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 52px; justify-content: center; background: none; border: 0; color: var(--muted); font-size: 12px; font-weight: 600; cursor: pointer; }
nav.tabs :is(button, a)[aria-current="page"] { color: var(--accent); }
/* Rodapé fixo do template: independência, fontes e links do projeto. O recuo inferior deixa espaço para a navegação. */
/* Resumo entregue pelo servidor para buscadores; o app o substitui ao abrir. */
.seo-summary { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-4); color: var(--ink-2); font-size: 15px; }
.seo-summary h1 { margin: 0; font-family: var(--f-display); font-size: 30px; font-weight: 500; color: var(--ink); }
.seo-summary ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.seo-summary p { margin: 0; }
/* Tema: botão no topo da home, no rodapé e na navegação do computador. */
.theme-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.theme-toggle .theme-sun { display: none; }
:root[data-theme="light"] .theme-toggle .theme-sun { display: inline; }
:root[data-theme="light"] .theme-toggle .theme-moon { display: none; }
.theme-toggle-top span { display: none; }
.theme-toggle-top { padding: 0; width: 36px; justify-content: center; flex: none; }
.theme-toggle-foot { align-self: flex-start; }
nav.tabs .nav-theme { display: none; }
/* Compartilhar: imagem e PDF, logo abaixo do cabeçalho da ficha ou acima da comparação. */
.share-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; }
.share-actions .fchip[disabled] { opacity: .55; cursor: progress; }
.share-status { flex-basis: 100%; min-height: 0; font-size: 12px; }
.share-status:empty { display: none; }
.site-foot { max-width: 480px; margin: 0 auto; padding: 0 var(--space-4) 110px; }
.site-foot .in { border-top: 1px solid var(--line); padding-top: 18px; display: flex; flex-direction: column; gap: var(--space-2); font-size: 12px; line-height: 1.5; color: var(--muted); }
.site-foot p { margin: 0; }
.site-foot b { color: var(--ink-2); }
.site-foot-links { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); }
.site-foot-links a { display: inline-flex; align-items: center; min-height: 32px; color: var(--ink-2); font-weight: 600; text-decoration: none; }
.site-foot-links a:hover { text-decoration: underline; }
.site-foot-contact a { color: var(--ink-2); font-weight: 600; overflow-wrap: anywhere; }
/* Análise de gastos */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.radar-intro { background: var(--accent-soft); }
.radar-intro p, .signal p { margin: 0; }
.radar-title { font-size: 34px; }
.radar-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.radar-metrics b { display: block; font: 600 25px var(--f-data); color: var(--accent); }
.radar-metrics span { font-size: 12px; color: var(--muted); }
.radar-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.radar-filters label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--muted); min-width: 0; }
.radar-filters select { width: 100%; min-height: var(--control-height); border-radius: var(--radius-control); padding: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; }

.signal { gap: 10px; }
.signal-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.signal-heading .badge { font-size: 10px; }
.signal-value { font: 600 clamp(23px,7vw,30px) var(--f-data); letter-spacing: -.04em; }
.signal h3 { font-size: 17px; margin: 0; }
.signal summary, .method summary { cursor: pointer; font-weight: 600; min-height: 40px; padding-block: 10px; font-size: 13px; }
.signal details[open] summary, .method[open] summary { margin-bottom: 8px; }
.signal details p + p { margin-top: 8px; }
.evidence-link { font-size: 13px; overflow-wrap: anywhere; }
.radar-note { font-size: 12px; color: var(--muted); margin: 0; }
.method { border-top: 1px solid var(--line); }
.method p { font-size: 13px; color: var(--muted); margin: 0 0 10px; }
.rank-row { display: grid; grid-template-columns: 24px minmax(0,1fr) auto; gap: 10px; border: 0; border-top: 1px solid var(--line); padding: 14px 0; background: transparent; color: var(--ink); text-align: left; width: 100%; align-items: center; cursor: pointer; }
.rank-row:first-child { border-top: 0; }
.rank-row b, .rank-row small { display: block; }
.rank-row small { color: var(--muted); font-size: 11px; margin-top: 4px; }
.rank-row .rank-value { font: 600 13px var(--f-data); text-align: right; }
.rank-track { display: block; margin-top: 8px; height: 5px; background: var(--chip); border-radius: 8px; overflow: hidden; }
.rank-track i { display: block; height: 100%; background: var(--accent); }
.month-chart { display: grid; grid-template-columns: repeat(10,minmax(0,1fr)); align-items: end; gap: 5px; min-height: 150px; }
.month-col { display: flex; flex-direction: column; justify-content: end; align-items: stretch; height: 150px; gap: 6px; text-align: center; font-size: 10px; color: var(--muted); }
.month-col i { display: block; background: var(--accent); border-radius: 4px 4px 0 0; min-height: 2px; }
.month-col.flag i { background: var(--warn); }
.month-col.partial i { background: repeating-linear-gradient(135deg,var(--muted),var(--muted) 2px,var(--chip) 2px,var(--chip) 5px); }
.month-col small { font-size: 9px; }
.monthly-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.monthly-table td, .monthly-table th { text-align: right; padding: 8px 4px; border-bottom: 1px solid var(--line); }
.monthly-table td:first-child, .monthly-table th:first-child { text-align: left; }
.monthly-table caption { text-align: left; color: var(--muted); padding-bottom: 8px; }
.audit-invoice { display: flex; flex-direction: column; gap: 6px; padding: 14px 0; border-top: 1px solid var(--line); }
.audit-invoice b { font-size: 13px; overflow-wrap: anywhere; }
.audit-invoice .signal-heading { font-size: 12px; }
.empty { padding: 24px 18px; text-align: center; }
@media(max-width:360px) { .radar-filters { grid-template-columns: 1fr; } .radar-metrics b { font-size: 21px; } .rank-row { gap: 6px; } }

/* Skeleton de carregamento (skel() em citizen-view.js): mesma forma do conteúdo, sem texto. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sk { display: block; flex: none; max-width: 100%; border-radius: 7px; background-color: color-mix(in srgb, var(--ink) 9%, var(--surface)); }
.sk-o { border-radius: 50%; }
.sk-pill { border-radius: 999px; }
.hero .sk { background-color: var(--hero-chip); }
@media (prefers-reduced-motion: no-preference) {
  .sk { background-image: linear-gradient(90deg, transparent 0, color-mix(in srgb, var(--surface) 55%, transparent) 50%, transparent 100%); background-size: 220% 100%; background-repeat: no-repeat; animation: sk-brilho 1.3s ease-in-out infinite; }
  .hero .sk { background-image: linear-gradient(90deg, transparent 0, color-mix(in srgb, var(--hero-bg) 45%, transparent) 50%, transparent 100%); }
  @keyframes sk-brilho { from { background-position: 160% 0; } to { background-position: -60% 0; } }
}
.sk-card { gap: 12px; pointer-events: none; }
.sk-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 72px; padding-block: 10px; border-top: 1px solid var(--line); }
.sk-row:first-child, .sk-row.sk-flat { border-top: 0; min-height: 0; padding-block: 0; }
.sk-col { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.sk-colc { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.sk-between { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.sk-between.sk-start { justify-content: flex-start; }
.sk-tiles .tile { gap: 9px; }
/* Links reais nos lugares que eram botões: navegação, linhas de lista e atalhos continuam com o mesmo desenho. */
nav.tabs a, a.citizen-row, a.attendance-row, a.citizen-who, a.face, .home-ranking a, .home-shortcuts a, a.more, a.back, a.opt { text-decoration: none; }
a.citizen-row, a.attendance-row, a.citizen-who, a.face, .home-ranking a { color: inherit; }
a.more, a.back { display: inline-flex; align-items: center; }
a.vt { color: inherit; text-decoration: none; }
/* Conteúdo entregue pelo servidor (sem JavaScript): diretório de fichas, tabela de partidos e listas simples. */
.seo-directory { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 24px; }
.seo-directory li { break-inside: avoid; display: flex; flex-direction: column; padding: 7px 0; border-top: 1px solid var(--line); }
.seo-directory a { font-weight: 600; color: var(--ink); text-decoration: none; }
.seo-directory a:hover { text-decoration: underline; }
.seo-directory small { font-size: 12px; color: var(--muted); }
@media (min-width: 900px) { .seo-directory { columns: 3; } }
.seo-plain-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; line-height: 1.5; }
.seo-table-wrap { overflow-x: auto; }
.seo-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.seo-table th, .seo-table td { text-align: right; padding: 8px 6px; border-bottom: 1px solid var(--line); white-space: nowrap; font-variant-numeric: tabular-nums; }
.seo-table th:first-child, .seo-table td:first-child { text-align: left; }
.seo-table caption { text-align: left; padding-bottom: 8px; }
.seo-summary .citizen-actions { padding-top: var(--space-2); }

/* Telas do cidadão (citizen-view.js) */
.citizen-lead { margin: 0; font-size: 16px; line-height: 1.45; color: var(--ink-2); }
.citizen-filters { display: flex; flex-direction: column; gap: var(--space-2); }
.citizen-home { display: flex; flex-direction: column; gap: 10px; }
.citizen-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-top: 4px; }
.citizen-head .muted { display: block; margin-top: 2px; }
.citizen-carousel > .citizen-alert { flex: 0 0 88%; }
.citizen-cta, .citizen-more { justify-content: center; background: var(--ink); color: var(--bg); border-color: var(--ink); }
.citizen-skel { color: var(--muted); font-size: 14px; min-height: 88px; justify-content: center; }

/* cartão de alerta */
.citizen-alert { gap: 10px; position: relative; overflow: hidden; }
.citizen-alert { border-color: var(--line); }
.citizen-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.citizen-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.citizen-chip i { width: 8px; height: 8px; border-radius: 4px; background: currentColor; }
.citizen-chip.high { background: var(--warn-soft); color: var(--warn); }
.citizen-chip.medium { background: color-mix(in srgb, #E8A21A 18%, var(--surface)); color: #9A6400; }
.citizen-chip.info { background: var(--chip); color: var(--ink-2); }
/* Tipos de alerta: a cor identifica a regra, sem escala de gravidade. */
.citizen-chip.type-peak { background: var(--chip); color: var(--accent); }
.citizen-chip.type-supplier { background: var(--chip); color: var(--ink-2); }
:root[data-theme="dark"] .citizen-chip.medium { color: #F2C14E; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .citizen-chip.medium { color: #F2C14E; } }
.citizen-who { display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 0; text-align: left; color: inherit; cursor: pointer; min-height: var(--control-height); }
.citizen-who span { display: flex; flex-direction: column; min-width: 0; }
.citizen-who b { font-size: 15px; }
.citizen-who small, .citizen-rowtxt small, .citizen-rowval small { font-size: 12px; color: var(--muted); }
.citizen-av { border-radius: 50%; object-fit: cover; object-position: top; flex: none; background: var(--chip); }
.citizen-initials { display: inline-flex; align-items: center; justify-content: center; font-weight: 800; color: var(--accent); background: var(--accent-soft); font-family: var(--f-body); }
.citizen-title { margin: 0; font-family: var(--f-display); font-size: 23px; line-height: 1.15; font-weight: 500; letter-spacing: -0.01em; text-wrap: balance; }
.citizen-statement { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.citizen-why summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--accent); min-height: 32px; display: flex; align-items: center; }
.citizen-why p { font-size: 13px; margin: 6px 0 0; color: var(--ink-2); line-height: 1.45; }
.citizen-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* visual: picos. Referência e mês marcado em barras na mesma escala, valores escritos; histórico em colunas. */
.citizen-peak { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.citizen-peak-headline { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.citizen-peak-headline span { font-weight: 600; color: var(--accent); }
.citizen-peak-bars { display: flex; flex-direction: column; gap: 8px; }
.citizen-peak-bar { display: flex; flex-direction: column; gap: 3px; }
.citizen-peak-bar-label { font-size: 12px; color: var(--ink-2); }
.citizen-peak-bar-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; }
.citizen-peak-bar-row b { font-family: var(--f-data); font-size: 15px; color: var(--ink); white-space: nowrap; }
.citizen-peak-bar-track { height: 12px; border-radius: 6px; background: var(--chip); overflow: hidden; }
.citizen-peak-bar-track i { display: block; height: 100%; border-radius: 6px; background: color-mix(in srgb, var(--ink) 35%, var(--surface)); }
.citizen-peak-bar.flagged .citizen-peak-bar-track i { background: var(--accent); }
.citizen-peak-bar-note { font-size: 12px; font-weight: 600; color: var(--accent); }
.citizen-peak-foot { margin: 0; font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.citizen-peak-history summary { cursor: pointer; list-style: none; font-size: 13px; font-weight: 600; color: var(--ink-2); min-height: 32px; display: flex; align-items: center; }
.citizen-peak-history summary::-webkit-details-marker { display: none; }
.citizen-peak-history[open] { display: flex; flex-direction: column; gap: 8px; }
.citizen-peak-cols { position: relative; display: flex; align-items: stretch; gap: 2px; height: 110px; padding-top: 4px; }
.citizen-peak-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.citizen-peak-col-bar { position: relative; flex: 1; }
.citizen-peak-col-bar i { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 3px 3px 1px 1px; background: color-mix(in srgb, var(--ink) 35%, var(--surface)); }
.citizen-peak-col.flagged .citizen-peak-col-bar i { background: var(--accent); }
.citizen-peak-col.provisional .citizen-peak-col-bar i, .citizen-peak-swatch.provisional { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--ink) 45%, var(--surface)) 0 3px, transparent 3px 6px); }
.citizen-peak-col small { height: 12px; font-family: var(--f-data); font-size: 9.5px; color: var(--muted); text-align: center; white-space: nowrap; overflow: visible; }
.citizen-peak-median { position: absolute; left: 0; right: 0; border-top: 1.5px dashed var(--ink); pointer-events: none; z-index: 1; }
.citizen-peak-median em { position: absolute; left: 0; bottom: 2px; font-style: normal; font-family: var(--f-data); font-size: 10px; color: var(--ink); background: var(--surface); padding: 0 4px 0 0; }
.citizen-peak-swatch { display: inline-block; width: 14px; height: 10px; border-radius: 3px; flex: none; }
.citizen-peak-notes { font-size: 13px; font-weight: 600; color: var(--accent); }

/* visual: concentração em uma empresa */
.citizen-share { display: flex; flex-direction: column; gap: 6px; }
.citizen-sharebar { height: 16px; border-radius: 8px; background: var(--chip); overflow: hidden; }
.citizen-sharebar i { display: block; height: 100%; background: var(--accent); border-radius: 8px 0 0 8px; }
.citizen-sharelbl { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--ink-2); }
.citizen-sharelbl span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Linha dos valores ("R$ x de R$ y"): não corta o número; quem quebra é a contagem de meses. */
.citizen-sharelbl + .citizen-sharelbl span:first-child { flex: none; }
.citizen-sharelbl + .citizen-sharelbl span:last-child { text-align: right; }

/* lista de políticos */
.citizen-roster-summary { color: var(--muted); font-size: 14px; }
.citizen-list { padding-block: 4px; gap: 0; }
.citizen-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; padding-block: 10px; background: none; border: 0; border-top: 1px solid var(--line); color: inherit; text-align: left; cursor: pointer; min-height: 60px; }
.citizen-row:first-child { border-top: 0; }
.citizen-rowtxt { display: flex; flex-direction: column; min-width: 0; }
.citizen-rowtxt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.citizen-rowval { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.citizen-rowdetail { line-height: 1.35; }
.citizen-dot { display: inline-block; width: 7px; height: 7px; border-radius: 4px; background: var(--warn); margin-right: 5px; }
.citizen-faces { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.citizen-faces .face img { border-color: var(--surface); box-shadow: 0 0 0 2px var(--line); }

/* ficha leve */
.citizen-vs { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; }
.citizen-vs > div:not(.citizen-vsbar) { display: flex; justify-content: space-between; font-size: 13px; color: var(--hero-muted); }
.citizen-vs b { color: var(--hero-fg); }
.citizen-vsbar { height: 10px; border-radius: 5px; background: var(--hero-line); overflow: hidden; }
.citizen-vsbar i { display: block; height: 100%; background: var(--hero-accent, var(--accent)); }
.citizen-vsbar.avg i { background: var(--hero-muted); }
.citizen-verdict { margin: 4px 0 0; font-size: 16px; }
.citizen-months { display: flex; align-items: flex-end; gap: 4px; height: 130px; }
.citizen-months > div { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; min-width: 0; }
.citizen-months i { width: 100%; max-width: 26px; border-radius: 4px 4px 2px 2px; background: var(--accent); }
.citizen-months i.hot { background: var(--accent-2); }
.citizen-months small { font-family: var(--f-data); font-size: 9.5px; color: var(--muted); }
.citizen-months span { font-family: var(--f-data); font-size: 10px; color: var(--muted); }
.citizen-bar { display: flex; flex-direction: column; gap: 5px; padding-block: 10px; border-top: 1px solid var(--line); }
.citizen-bar:first-of-type { border-top: 0; }
.citizen-bar > div:first-child { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.citizen-bar > div:first-child span { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.citizen-bar .bar { height: 8px; border-radius: 4px; background: var(--chip); overflow: hidden; display: block; }
.citizen-bar .bar i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.citizen-how p { margin: 0; font-size: 14px; line-height: 1.45; }

/* ---------- Identidade comum (Painel Público) ---------- */
.brand { display: inline-flex; align-items: center; gap: 9px; font-size: 24px; }
.brand-ic { flex: none; }
.brand-name { color: var(--accent); }
.ph { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
.ph-t { font-size: 34px; }
.ph-lead { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.hero-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-top: 12px; border-top: 1px solid var(--hero-line); }
.hero-split > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hero-split b { font-size: 22px; font-weight: 700; letter-spacing: -0.03em; }
.hero-split span { font-size: 12px; line-height: 1.35; color: var(--hero-muted); }
.vbar { display: flex; gap: 2px; height: 8px; border-radius: 4px; overflow: hidden; background: var(--chip); }
.vbar i:first-child { background: var(--accent); }
.vbar i:nth-child(2) { background: var(--no); }
.citizen-stack { display: flex; flex-direction: column; gap: 10px; }
.citizen-tenure { display: block; margin-top: 2px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.citizen-election { display: flex; width: fit-content; margin-top: 8px; font-size: 13px; font-weight: 600; }
.citizen-election[data-tone="ok"] i { background: var(--accent); }
.citizen-election[data-tone="info"] i { background: var(--accent-2); }

/* avatar com foto oficial por cima das iniciais */
.citizen-avs { position: relative; display: inline-block; flex: none; border-radius: 50%; }
.citizen-avs > * { position: absolute; inset: 0; }
.face .citizen-av { border: 3px solid var(--hero-bg); box-shadow: 0 0 0 2px var(--hero-muted); }
.face .citizen-avs { width: 54px; height: 54px; }
.face .citizen-initials { background: var(--hero-chip); color: var(--hero-fg); }
.citizen-top5 em { color: var(--accent-2); }

/* lista de políticos */
.citizen-row { grid-template-columns: 48px minmax(0, 1fr) auto; min-height: 72px; }
.citizen-rowtxt { gap: 2px; }
.citizen-rowbar { display: block; height: 5px; margin-top: 6px; border-radius: 3px; background: var(--chip); overflow: hidden; }
.citizen-rowbar i { display: block; height: 100%; border-radius: 3px; background: color-mix(in srgb, var(--accent) 45%, var(--surface)); }
.citizen-rowbar i.hi { background: var(--accent); }
.citizen-rowval { gap: 4px; }
.citizen-mini { padding: 3px 8px; font-size: 11px; }
.citizen-mini i { width: 6px; height: 6px; }

.brand { font-size: 22px; white-space: nowrap; }
.top { gap: 10px; }
.top .pill { white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.top .pill { margin-left: auto; }
.citizen-bar b { white-space: nowrap; }

/* contador de impostos */
.tax-card { background: var(--accent-soft); border-color: transparent; }
.tax-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tax-split { display: flex; flex-direction: column; gap: 8px; }
.tax-split-bar { display: flex; gap: 3px; height: 10px; border-radius: 999px; overflow: hidden; }
.tax-split-bar i { display: block; flex-basis: 0; background: var(--accent); }
.tax-split-bar i + i { background: var(--cat5); }
.tax-split-legend { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 13px; color: var(--ink-2); }
.tax-split-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.tax-split-legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--accent); }
.tax-split-legend > span + span i { background: var(--cat5); }
.tax-split-legend b { color: var(--ink); }
.tax-sources { margin: 0; line-height: 1.5; }
.live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--accent); }
.live i { width: 8px; height: 8px; border-radius: 4px; background: var(--accent); }
@media (prefers-reduced-motion: no-preference) { .live i { animation: pulse 1.6s ease-in-out infinite; } @keyframes pulse { 50% { opacity: .25; } } }
.tax-value { font-size: clamp(21px, 6.5vw, 40px); font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tax-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.tax-grid > div { display: flex; flex-direction: column; gap: 2px; }
.tax-grid b { font-size: 19px; }
.tax-grid span { font-size: 12px; color: var(--muted); }
.tax-related { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
a.src { text-decoration: none; }

/* presença */
.pbar { display: flex; gap: 2px; height: 6px; margin-top: 6px; border-radius: 3px; overflow: hidden; background: var(--chip); }
.pbar i { display: block; height: 100%; background: var(--accent); }
.pbar i.j { background: color-mix(in srgb, var(--muted) 55%, var(--surface)); }
.pbar i.f { background: var(--warn); }
.hero .pbar { background: var(--hero-line); }
b.warn { color: var(--warn); }

/* votos */
.vchip { display: inline-flex; align-items: center; justify-content: center; min-width: 56px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--chip); color: var(--ink-2); white-space: nowrap; }
.vchip.yes { background: var(--accent-soft); color: var(--accent); }
.vchip.no { background: var(--warn-soft); color: var(--warn); }
.ext-vlist { padding: 0; }
.ext-vlist .citizen-row { min-height: 60px; }

/* comparar */
.cmp { gap: 0; }
.cmp-head, .cmp-row { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: center; }
.cmp-head { padding-bottom: 12px; align-items: start; }
.cmp-who { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; background: none; border: 0; padding: 0; color: inherit; cursor: pointer; min-width: 0; }
.cmp-who b { font-size: 14px; line-height: 1.2; }
.cmp-who small { font-size: 11px; color: var(--muted); }
.cmp-row { padding-block: 11px; border-top: 1px solid var(--line); }
.cmp-l { font-size: 12px; color: var(--muted); line-height: 1.3; }
.cmp-v { text-align: center; font-size: 14px; min-width: 0; overflow-wrap: anywhere; border-radius: 10px; padding: 6px 4px; }
.cmp-v small { color: var(--muted); font-size: 11px; }
.cmp-source { text-align: left; font-size: 12px; }
.cmp-source .src { display: block; margin-top: var(--space-2); }
.cmp-v.best { background: var(--accent-soft); color: var(--accent); }
.cmp-bars { border-top: 0; padding-top: 0; }
.cmp-bars > div { height: 8px; border-radius: 4px; background: var(--chip); overflow: hidden; }
.cmp-bars i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.cmp-vote { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px 8px; align-items: center; width: 100%; padding: 12px 0; border: 0; border-top: 1px solid var(--line); background: none; color: inherit; text-align: left; cursor: pointer; font-size: 14px; }
.cmp-vote em { grid-column: 1 / -1; font-style: normal; font-size: 11px; color: var(--muted); }

/* ---------- Computador: navegação no topo e cards em grade ---------- */
.nav-brand { display: none !important; }
@media (min-width: 900px) {
  body { font-size: 15.5px; }
  /* Cabeçalho: marca à esquerda, links num grupo em pílula ao centro, tema à direita. */
  nav.tabs { top: 0; bottom: auto; border-top: 0; border-bottom: 1px solid var(--line); padding: 0 32px; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(1.4) blur(14px); }
  nav.tabs .in { max-width: 1200px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-4); min-height: 68px; }
  nav.tabs .nav-links { display: flex; align-items: center; gap: 2px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
  nav.tabs .nav-links :is(button, a) { flex-direction: row; gap: 7px; min-height: 38px; padding: 0 15px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--muted); transition: background-color .15s, color .15s; }
  nav.tabs .nav-links :is(button, a):hover { color: var(--ink); background: var(--chip); }
  nav.tabs .nav-links :is(button, a) svg { width: 17px; height: 17px; }
  nav.tabs .nav-links :is(button, a)[aria-current="page"] { color: var(--ink); background: var(--chip); }
  nav.tabs .nav-links :is(button, a)[aria-current="page"] svg { color: var(--accent); }
  nav.tabs .nav-brand { display: inline-flex !important; justify-self: start; flex-direction: row; min-height: 44px; padding: 0; gap: 11px; white-space: nowrap; font-family: var(--f-display); font-size: 23px; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; }
  nav.tabs .nav-brand svg { width: 32px; height: 32px; }
  .app { max-width: 1200px; padding: 96px 32px 40px; }
  .site-foot { max-width: 1200px; padding: 0 32px 40px; }
  .view > .top .brand { display: none; }
  .view > .top { justify-content: flex-end; }
  .view > .top .theme-toggle-top { display: none; }
  nav.tabs button.nav-theme { display: inline-flex; justify-self: end; flex-direction: row; width: 40px; min-height: 40px; padding: 0; justify-content: center; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink-2); }
  nav.tabs button.nav-theme:hover { color: var(--ink); background: var(--chip); }
  nav.tabs button.nav-theme span { display: none; }

  .view { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; align-items: start; }
  .view > .back { justify-self: start; }
  body[data-view="votes"] .view > article.card { grid-column: span 6 !important; }
  .view > * { grid-column: 1 / -1; min-width: 0; }
  .view > .card { grid-column: span 6; }
  .view > .card.wide, .view > .card.citizen-list { grid-column: 1 / -1; }

  /* cabeçalho ao lado do resumo escuro */
  .view > .ph { grid-column: 1 / span 6; align-self: center; padding-right: 24px; }
  .ph-t { font-size: 46px; }
  .ph-lead { font-size: 17px; }
  .view > .ph + .card.hero { grid-column: 7 / -1; }
  .view > .back + .ph { grid-row: 2; }
  .view > .back + .ph + .card.hero { grid-row: 2; }
  body[data-view="politicians"] .view > .card.hero { grid-column: 7 / -1; grid-row: 1 / span 5; }
  body[data-view="politicians"] .view > .ph, body[data-view="politicians"] .view > .search, body[data-view="politicians"] .view > .citizen-filters, body[data-view="politicians"] .view > .citizen-actions { grid-column: 1 / span 6; }

  /* carrosséis viram fileiras de 3 */
  .carousel { margin-inline: 0; padding-inline: 0; }
  .carousel > .card, .citizen-carousel > .citizen-alert { flex: 0 0 calc((100% - 24px) / 3); }

  /* listas em duas colunas */
  .citizen-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 36px; }
  .citizen-list > .citizen-row:nth-child(2) { border-top: 0; }
  .ext-vlist { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ext-vlist > .citizen-row:nth-child(3) { border-top: 0; }
  .cmp-head .citizen-av, .cmp-head .citizen-avs { width: 72px !important; height: 72px !important; }
  .profile .n { font-size: 30px; }
  .faces { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 1240px) {
  .view > .citizen-alert, .view > article.card:not(.wide) { grid-column: span 4; }
}

/* ---------- Encaixe tipo bento: alturas iguais por fileira, conteúdo preenche o card ---------- */
.citizen-months { height: auto; min-height: 140px; flex: 1 1 auto; align-items: stretch; }
.citizen-months > div { height: auto; }
.citizen-months .mt { position: relative; flex: 1 1 auto; width: 100%; max-width: 26px; min-height: 60px; display: block; }
.citizen-months .mt i { position: absolute; left: 0; right: 0; bottom: 0; max-width: none; }
.party-grid { display: flex; flex-direction: column; gap: 6px; }
/* cards de carrossel com mesma altura e ações sempre no rodapé */
.carousel > .card > .more:last-child, .citizen-alert > .citizen-actions:last-child, .card > .citizen-actions:last-child, .card > a.src:last-child, .card > .opt:last-child { margin-top: auto; }
@media (min-width: 900px) {
  .view { align-items: stretch; }
  .view > :not(.card) { align-self: start; }
  .view > .ph { align-self: center; }
  .card > .more:last-child, .card > .muted:last-child, .card > .src:last-child, .card > button.fchip:last-child, .card > .legend:last-child { margin-top: auto; }
  .card.hero > .opt:last-child { margin-top: auto; }
  .party-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 40px; }
  .tax-card .tax-related { margin-top: auto; }
}
@media (min-width: 900px) { .card > .faces:last-child { margin-block: auto; } }

/* comparar partidos (reaproveita a grade .cmp do comparador de pessoas) */
.party-who { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; min-width: 0; }
.party-acronym { font-family: var(--f-display); font-size: 30px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; overflow-wrap: anywhere; }
.party-acronym.sm { display: block; font-size: 20px; padding-bottom: 4px; }
.party-who small { font-size: 11px; color: var(--muted); }
.party-vote { grid-template-columns: minmax(0, 1fr) 84px 84px; }
.party-v { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.party-score { font-size: 11px; color: var(--muted); }
.party-tops { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; }
.party-tops .citizen-row { grid-template-columns: 40px minmax(0, 1fr) auto; min-height: 60px; }
.party-pick .chips { max-height: 132px; overflow-y: auto; }
@media (max-width: 560px) { .party-who .party-acronym { font-size: var(--fit, 30px); white-space: nowrap; overflow-wrap: normal; } .party-tops { grid-template-columns: 1fr; } .party-vote { grid-template-columns: minmax(0, 1fr) 64px 64px; } }

/* Ficha: três respostas primeiro; o aprofundamento fica nos acordeões. */
.citizen-profile-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.citizen-profile-head .profile { min-width: 0; }
.citizen-profile-head .profile > div { min-width: 0; }
.citizen-profile-head h1 { margin: 0; line-height: 1.15; }
.citizen-answer-label { margin-top: var(--space-2); }
.citizen-answers { display: grid; gap: var(--space-3); }
.citizen-answer { gap: var(--space-3); }
.citizen-answer p { margin: 0; }
.citizen-answer .huge { font-size: clamp(42px, 12vw, 54px); }
.citizen-answer .huge small { margin-left: 3px; }
.citizen-answer .citizen-salary { font-size: 14px; color: var(--hero-muted); }
.citizen-answer .citizen-vs { gap: 5px; }
.citizen-answer .citizen-vs > div { gap: var(--space-2); }
.citizen-answer .citizen-vs b { white-space: nowrap; }
.citizen-answer .legend { gap: 6px 12px; }
.citizen-answer .pbar { height: 10px; flex: none; }
.citizen-answer .citizen-verdict { align-self: flex-start; margin-top: auto; font-size: 12px; min-height: 30px; cursor: default; background: var(--chip); }
.citizen-answer.hero .citizen-verdict { background: var(--hero-chip); border-color: var(--hero-line); color: var(--hero-fg); }
.citizen-vote-count { font-size: 14px; }
.citizen-empty { font-family: var(--f-display); font-size: 24px; line-height: 1.2; text-wrap: balance; }
.citizen-answer-alert { background: var(--warn-soft); }
.citizen-answer-alert .citizen-title { font-size: 22px; }
.citizen-answer-alert .citizen-statement { font-size: 13px; }
.citizen-answer-alert .more { margin-top: auto; }
.citizen-alert-rules { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.citizen-answer .citizen-alert-count { align-self: flex-start; color: var(--ink-2); background: var(--surface); cursor: default; min-height: 30px; font-size: 12px; }
.citizen-cost-answer { min-width: 0; }
.citizen-cost-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 7px; min-width: 0; }
.citizen-cost-main span { font-size: 14px; color: var(--hero-muted); }
.citizen-cost-main b { font-family: var(--f-data); font-size: clamp(30px, 9vw, 40px); font-weight: 700; letter-spacing: -.04em; line-height: 1.05; overflow-wrap: anywhere; }
.citizen-cost-period, .citizen-cost-note { margin: 0; font-size: 13px; line-height: 1.4; color: var(--hero-muted); }
.citizen-cost-period { font-weight: 600; color: var(--hero-fg); }
.citizen-cost-unavailable { margin: 0; font-family: var(--f-display); font-size: 19px; line-height: 1.25; color: var(--hero-fg); }
.citizen-cost-parts { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.citizen-cost-part { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.citizen-cost-part-label { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; min-width: 0; font-size: 13px; }
.citizen-cost-part-label span { min-width: 0; overflow-wrap: anywhere; }
.citizen-cost-part-label b { font-size: 14px; white-space: nowrap; }
.citizen-cost-part-label b small { font-size: 11px; font-weight: 500; color: var(--hero-muted); }
.citizen-cost-bar { display: block; height: 6px; border-radius: 3px; background: var(--hero-chip); overflow: hidden; }
.citizen-cost-bar i { display: block; height: 100%; border-radius: 3px; background: var(--accent-2); }
.citizen-cost-part small { font-size: 11px; line-height: 1.35; color: var(--hero-muted); overflow-wrap: anywhere; }
.citizen-cost-part a { color: var(--hero-fg); text-underline-offset: 2px; }
.citizen-cost-extra { margin: 0; padding-top: 10px; border-top: 1px solid var(--hero-line); font-size: 13px; color: var(--hero-fg); }
.citizen-cost-extra span { color: var(--hero-muted); }
.citizen-cost-details { min-width: 0; }
.citizen-cost-months { display: grid; gap: 8px; }
.citizen-cost-year { display: grid; gap: 8px; }
.citizen-cost-scope { margin: 0; font-size: 13px; color: var(--ink-2); }
.citizen-cost-notes summary { cursor: pointer; color: var(--accent); font-weight: 600; min-height: 32px; display: flex; align-items: center; }
.citizen-cost-notes-body { display: grid; gap: 8px; }
.citizen-cost-note-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.citizen-cost-note-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: baseline; font-size: 13px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.citizen-cost-note-who { min-width: 0; overflow-wrap: anywhere; }
.citizen-cost-note-list small { color: var(--muted); min-width: 0; overflow-wrap: anywhere; }
.citizen-cost-note-list li > b { justify-self: end; }
.citizen-cost-note-list li > span.muted { max-width: 18ch; font-size: 11px; line-height: 1.3; text-align: right; justify-self: end; }
.citizen-cost-notes-body code { overflow-wrap: anywhere; }
.citizen-cost-year summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; cursor: pointer; font-weight: 600; color: var(--ink-2); list-style: none; border-top: 1px solid var(--line); }
.citizen-cost-year summary::-webkit-details-marker { display: none; }
/* Seta indica que o ano abre com um clique; gira quando aberto. */
.citizen-cost-year summary::after { content: '›'; font-size: 20px; line-height: 1; color: var(--muted); transition: transform .15s; }
.citizen-cost-year[open] summary::after { transform: rotate(90deg); }
.citizen-cost-year summary:hover { color: var(--ink); }
.citizen-cost-month { display: grid; grid-template-columns: minmax(72px, auto) minmax(0, 1fr); gap: 3px 10px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--line); }
.citizen-cost-month > *:nth-child(n + 3) { grid-column: 1 / -1; }
.citizen-cost-used { color: var(--ok, var(--accent)); font-size: 12px; font-weight: 700; }
.citizen-cost-month a { color: var(--ink-2); }
.citizen-expense-original { padding: 12px; border-radius: var(--radius-control); background: var(--chip); }
.citizen-expense-original .muted { font-size: 12px; }
.citizen-cost-month-parts { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; grid-column: 1 / -1; }
.citizen-cost-month-parts li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: baseline; font-size: 13px; }
.citizen-cost-month-parts li span { min-width: 0; overflow-wrap: anywhere; }
.citizen-cost-month-parts li.citizen-cost-gap { grid-template-columns: 1fr; gap: 1px; }
.citizen-cost-month-parts li.citizen-cost-gap small { color: var(--muted); font-size: 12px; line-height: 1.35; }
.citizen-cost-month p { margin: 0; }
.citizen-cost-footnote { margin-top: 8px; font-size: 12px; }
.citizen-details { display: grid; gap: var(--space-3); min-width: 0; align-items: start; }
.citizen-detail { padding: 0; gap: 0; min-width: 0; }
.citizen-detail > h2, .citizen-detail > h3 { margin: 0; font-size: inherit; }
.citizen-detail-toggle { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); width: 100%; min-height: 58px; padding: 16px 18px; background: none; border: 0; border-radius: var(--radius-card); text-align: left; font-weight: 700; cursor: pointer; scroll-margin-top: 80px; }
.citizen-detail-toggle::after { content: '+'; flex: none; font-size: 23px; font-weight: 400; color: var(--muted); }
.citizen-detail-toggle[aria-expanded="true"]::after { content: '−'; }
.citizen-detail-body { display: flex; flex-direction: column; gap: var(--space-3); padding: 0 18px 18px; overflow-wrap: anywhere; }
.citizen-detail-body[hidden] { display: none; }
.citizen-detail-body p { margin: 0; }
.citizen-detail-body .big { font-size: 28px; }
.citizen-detail-part { display: flex; flex-direction: column; gap: var(--space-2); }
.citizen-detail-part + .citizen-detail-part { border-top: 1px solid var(--line); padding-top: var(--space-4); margin-top: var(--space-2); }
.citizen-detail-part h3 { margin: 0; }
.citizen-detail-part .item { min-width: 0; }
.citizen-detail-part .item > .mono:last-child { flex: none; white-space: nowrap; }
.citizen-detail-body .votes { grid-template-columns: 1fr; }
.citizen-detail-body .vt { text-align: left; cursor: pointer; }
a.vt, a.cmp-vote { color: inherit; text-decoration: none; }
.vt > small { color: var(--muted); font-size: 11px; }
.citizen-projects { display: flex; flex-direction: column; gap: var(--space-2); }
.citizen-project-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.citizen-project-list { display: flex; flex-direction: column; min-width: 0; }
.citizen-projects .proj { min-width: 0; }
.citizen-projects .citizen-project-main { display: flex; flex-direction: column; gap: 4px; color: inherit; text-decoration: none; }
.citizen-projects .citizen-project-main:focus-visible { border-radius: var(--radius-control); }
.citizen-project-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--muted); font-size: 12px; }
.citizen-project-meta a { color: var(--ink-2); }
.citizen-project-detail { margin: 0; font-size: 12px; line-height: 1.4; }
.citizen-projects [hidden] { display: none !important; }
.citizen-project-empty { padding-block: var(--space-2); }
@media (max-width: 899px) {
  .citizen-detail-part .item { flex-wrap: wrap; gap: var(--space-2); }
  .citizen-detail-part .item .g { min-width: 120px; }
}
@media (min-width: 900px) {
  .citizen-answers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); align-items: stretch; }
  .citizen-details { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); }
  .citizen-details > [data-profile-section="expenses"] { grid-column: 1; grid-row: 1; }
  .citizen-details > [data-profile-section="votes"] { grid-column: 2; grid-row: 1; }
}
.citizen-source, .citizen-source-list { display: flex; flex-direction: column; gap: var(--space-2); }
.citizen-source-list { gap: var(--space-4); }
/* O resumo de custo continua escuro também quando o tema do sistema é escuro. */
:root[data-theme="dark"] .citizen-answer.hero {
  --hero-bg: var(--bg); --hero-fg: var(--ink); --hero-muted: var(--muted); --hero-line: var(--line); --hero-chip: var(--chip);
  border-color: var(--line);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .citizen-answer.hero {
    --hero-bg: var(--bg); --hero-fg: var(--ink); --hero-muted: var(--muted); --hero-line: var(--line); --hero-chip: var(--chip);
    border-color: var(--line);
  }
}

/* Escala do ano em cada alerta: quem gasta pouco não parece igual a quem gasta muito. */
.citizen-context { margin: 0; padding: 8px 10px; border-radius: 10px; background: var(--chip); font-size: 13px; line-height: 1.4; color: var(--ink-2); }

/* Minha cidade */
body[data-view="city"] .app { max-width: 1080px; }
body[data-view="city"] .site-foot { max-width: 1080px; }
body[data-view="city"] nav.tabs .in { max-width: 1080px; }
@media (max-width: 899px) {
  nav.tabs .in { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  nav.tabs .nav-links { display: contents; }
}
nav.tabs :is(button, a) svg { flex: none; }
.city-search-card { gap: var(--space-2); }
.city-search-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.city-search-row .search { min-width: 0; }
.city-search-row .fchip { min-height: 50px; justify-content: center; padding-inline: 16px; }
.city-results { min-height: 28px; }
.city-search-message { margin: 4px 0; font-size: 13px; color: var(--ink-2); }
.city-suggestions { display: flex; flex-direction: column; max-height: 320px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface); }
.city-suggestion { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; min-height: 56px; cursor: pointer; border-bottom: 1px solid var(--line); }
.city-suggestion:last-child { border-bottom: 0; }
.city-suggestion:hover, .city-suggestion[aria-selected="true"] { background: var(--chip); }
.city-suggestion:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.city-suggestion-name { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.city-suggestion-name b { overflow-wrap: anywhere; }
.city-uf { flex: none; color: var(--muted); font: 600 12px var(--f-data); }
.city-geography-note { margin: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--chip); color: var(--ink-2); font-size: 13px; line-height: 1.5; }
.city-intro-card { gap: var(--space-3); }
.city-intro-grid { display: grid; gap: var(--space-3); }
.city-intro-grid p { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.city-intro-grid p span { color: var(--ink-2); font-size: 13px; }
.city-detail-header { display: flex; flex-direction: column; gap: 5px; }
.city-detail-header .h { font-size: clamp(30px, 7vw, 42px); }
.city-detail-header .ph-lead { margin: 0; }
.city-special-note { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--chip); color: var(--ink-2); font-size: 13px; line-height: 1.5; }
.city-overview { display: flex; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); }
.city-overview .src { flex: 1 1 220px; text-align: right; }
.city-overview-label { display: flex; flex-direction: column; gap: 2px; }
.city-population { font: 700 clamp(28px, 7vw, 40px) var(--f-data); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.city-content-grid { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.city-data-section { min-width: 0; }
.city-section-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.city-section-heading .h { margin-top: 2px; font-size: 21px; }
.city-section-heading .pill { flex: none; }
.city-subheading { margin: var(--space-2) 0 0; padding-top: var(--space-2); border-top: 1px solid var(--line); font-size: 14px; }
.city-people-list { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; }
.city-person { display: flex; align-items: center; gap: 10px; min-height: 56px; padding-block: 8px; border-top: 1px solid var(--line); }
.city-person-main { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 2px; }
.city-person-main > b { overflow-wrap: anywhere; }
.city-person-main .muted { line-height: 1.35; }
.city-votes { flex: none; font-size: 13px; text-align: right; }
.city-profile-link { flex: none; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface); color: var(--ink-2); text-decoration: none; font: 600 12px var(--f-body); cursor: pointer; }
.city-profile-link:hover { background: var(--chip); }
.city-collapsible { border-top: 1px solid var(--line); }
.city-collapsible summary { display: flex; align-items: center; min-height: 52px; padding-block: 8px; cursor: pointer; font-weight: 600; color: var(--ink-2); }
.city-collapsible summary::after { content: "+"; margin-left: auto; padding-left: 10px; font: 600 18px var(--f-data); }
.city-collapsible[open] summary::after { content: "−"; }
.city-collapsible[open] summary { margin-bottom: 4px; }
.city-collapsible .city-people-list { padding-bottom: 4px; }
.city-ranked-list { counter-reset: city-rank; }
.city-ranked-list .city-person { counter-increment: city-rank; }
.city-ranked-list .city-person::before { content: counter(city-rank); flex: none; width: 24px; color: var(--muted); font: 600 13px var(--f-data); text-align: center; }
@media (min-width: 720px) {
  body[data-view="city"] .view > .card, .city-geography-note { grid-column: 1 / -1; }
  body[data-view="city"] .view { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: var(--space-3) var(--space-4); }
  body[data-view="city"] .view > .ph, body[data-view="city"] .view > .back, .city-detail-header, .city-special-note { grid-column: 1 / -1; }
  .city-content-grid { display: contents; }
  .city-content-grid > .card { min-width: 0; }
  .city-intro-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}
@media (max-width: 420px) {
  nav.tabs :is(button, a) { font-size: 10px; }
  .city-search-row { grid-template-columns: minmax(0, 1fr); }
  .city-search-row .fchip { min-height: 44px; }
  .city-suggestion { align-items: flex-start; flex-direction: column; gap: 2px; }
  .city-person { align-items: flex-start; flex-wrap: wrap; }
  .city-person-main { flex: 1 1 180px; }
  .city-profile-link { margin-left: auto; }
  .city-overview .src { text-align: left; flex-basis: 100%; }
}

/* Emendas parlamentares na consulta por cidade */
.city-amendments-section { min-width: 0; }
.city-amendment-year-note { margin: 0; color: var(--ink-2); font-size: 13px; line-height: 1.5; }
.city-amendment-metrics { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
.city-amendment-metric { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--chip); }
.city-amendment-metric .k { color: var(--muted); }
.city-amendment-metric > b { font-size: clamp(20px, 5vw, 27px); overflow-wrap: anywhere; }
.city-amendment-metric .muted { line-height: 1.4; }
.city-amendment-caveat { margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-control); color: var(--ink-2); background: var(--surface); font-size: 13px; line-height: 1.5; }
.city-special-transfers { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.city-special-transfers h3 { margin: 2px 0 0; font-size: 17px; }
.city-special-transfers > p { margin: 0; }
.city-amendment-disclosure { min-width: 0; }
.city-amendment-authors { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.city-amendment-author { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px 0; border-top: 1px solid var(--line); }
.city-amendment-author-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.city-amendment-author-heading > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.city-amendment-author-heading small { color: var(--muted); }
.city-amendment-author-values { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.city-amendment-author-values .city-amendment-metric { padding: 10px; background: var(--surface); }
.city-amendment-author-values .city-amendment-metric > b { font-size: 16px; }
.city-amendment-records { display: flex; flex-direction: column; gap: 0; }
.city-amendment-record { border-top: 1px solid var(--line); min-width: 0; }
.city-amendment-record summary { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 52px; padding-block: 8px; cursor: pointer; font-weight: 600; overflow-wrap: anywhere; }
.city-amendment-record summary::after { content: "+"; margin-left: auto; padding-left: 10px; font: 600 18px var(--f-data); }
.city-amendment-record[open] summary::after { content: "−"; }
.city-amendment-tag { display: inline-flex; align-items: center; min-height: 26px; padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--chip); color: var(--ink-2); font-size: 11px; font-weight: 600; }
.city-amendment-record-body { display: flex; flex-direction: column; gap: var(--space-2); padding-bottom: var(--space-3); }
.city-amendment-id-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0; }
.city-amendment-id-line b { overflow-wrap: anywhere; font-family: var(--f-data); }
.city-amendment-source { display: inline-flex; align-items: center; min-height: 40px; color: var(--ink-2); font-weight: 600; font-size: 13px; }
@media (min-width: 520px) {
  .city-amendment-metrics, .city-amendment-author-values { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
}
@media (min-width: 720px) {
  .city-content-grid > .city-amendments-section { grid-column: 1 / -1; }
}

/* Contas municipais: valores por exercício e medianas sem ranking. */
.city-accounts-section { min-width: 0; }
.city-account-year-note { margin: 0; color: var(--ink-2); font-size: 13px; line-height: 1.5; }
.city-account-submitted { margin: 0; color: var(--ink-2); font-size: 13px; }
.city-account-comparison-note { display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface); color: var(--ink-2); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.city-account-comparison-note > b { color: var(--ink); }
.city-account-comparison-note .src { margin-top: 4px; }
.city-account-metrics { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); min-width: 0; }
.city-account-metric { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.city-account-metric-heading { min-width: 0; }
.city-account-metric-heading .k { display: block; overflow-wrap: anywhere; }
.city-account-metric h3 { margin: 3px 0 0; font-size: 17px; overflow-wrap: anywhere; }
.city-account-values { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; }
.city-account-values > div { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; padding: 12px; border-radius: var(--radius-control); background: var(--chip); }
.city-account-value-label { color: var(--ink-2); font-size: 12px; line-height: 1.4; }
.city-account-values b { max-width: 100%; font-size: clamp(14px, 3.8vw, 20px); white-space: nowrap; }
.city-account-values small { color: var(--muted); line-height: 1.4; overflow-wrap: anywhere; }
.city-account-metric-source { min-width: 0; overflow-wrap: anywhere; }
.city-account-caveat { margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-control); color: var(--ink-2); background: var(--surface); font-size: 13px; line-height: 1.5; }
@media (min-width: 720px) {
  .city-content-grid > .city-accounts-section { grid-column: 1 / -1; }
  .city-account-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Minha cidade em 3 respostas (mesmo padrão da ficha parlamentar) */
.city-head { display: flex; flex-direction: column; gap: 4px; }
.city-title { margin: 0; font-size: clamp(40px, 10vw, 60px); line-height: 1; }
.city-sub { margin: 4px 0 0; font-size: 17px; color: var(--ink-2); }
.city-answer { gap: var(--space-3); }
.city-answer p { margin: 0; }
.city-answer-lead { font-family: var(--f-display); font-size: 22px; line-height: 1.25; text-wrap: balance; }
.city-answer-note { font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.hero .city-answer-note { color: var(--hero-muted); }
.hero .city-answer-note b, .hero .city-answer-lead { color: var(--hero-fg); }
.city-mayor { display: flex; align-items: center; gap: 14px; padding: 6px 0 2px; }
.city-mayor > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.city-mayor b { font-family: var(--f-display); font-size: 28px; line-height: 1.1; color: var(--hero-fg); }
.city-mayor span { font-size: 14px; color: var(--hero-muted); }
.city-initials { flex: none; width: 56px; height: 56px; border-radius: 28px; display: grid; place-items: center; background: var(--hero-chip); color: var(--hero-fg); font: 700 19px var(--f-data); letter-spacing: -0.02em; }
.city-answer-action { margin-top: auto; }
.city-mini-seats { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--hero-line); }
.hero .city-seat { background: var(--hero-chip); border-color: var(--hero-line); color: var(--hero-fg); }
.city-figure b, .city-account-row > div b { white-space: nowrap; }
.city-unit { margin-left: 4px; }
.city-bars { display: flex; flex-direction: column; gap: 12px; }
.city-bar-row small { display: block; margin-top: 4px; font-size: 12px; }
.city-bar-label { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.city-bar { position: relative; display: block; height: 10px; margin-top: 6px; border-radius: 5px; background: var(--chip); }
.city-bar i { display: block; height: 100%; border-radius: 5px; background: var(--accent); }
.city-bar-mark { position: absolute; top: -4px; width: 3px; height: 18px; border-radius: 2px; background: var(--ink); transform: translateX(-50%); }
.city-verdict { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: auto; }
.city-verdict .citizen-verdict { margin: 0; }
.city-verdict small { font-size: 12px; line-height: 1.4; }
.city-progress { height: 10px; border-radius: 5px; background: var(--chip); overflow: hidden; }
.city-progress i { display: block; height: 100%; min-width: 3px; background: var(--accent); }
.city-top-authors { list-style: none; margin: 0; padding: 0; }
.city-top-authors li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.city-top-authors li > span { flex: 1; min-width: 0; }
.city-top-authors .city-profile-link { min-height: 32px; }
.city-seats { display: flex; flex-wrap: wrap; gap: 6px; }
.city-seat { min-height: 32px; cursor: default; font-size: 13px; }
.city-name-list { list-style: none; margin: 0; padding: 0; display: grid; column-gap: 28px; }
.city-name-list li { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.city-name-list li > span:first-child { flex: 1 1 auto; min-width: 8em; display: flex; flex-direction: column; gap: 2px; overflow-wrap: break-word; }
.city-name-list li > span:first-child b { font-weight: 600; }
.city-name-list .city-profile-link { flex: none; white-space: nowrap; }
.city-name-list li > .mono { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.city-name-list small { font-size: 12px; }
.city-tag { display: inline; font-size: 12px; color: var(--accent); font-weight: 600; }
.city-rank { list-style: none; margin: 0; padding: 0; }
.city-rank li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 6px 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.city-rank-n { color: var(--muted); font-size: 13px; }
.city-rank-name { display: flex; flex-direction: column; min-width: 0; font-size: 14px; }
.city-rank-votes { font-size: 14px; font-weight: 700; }
.city-rank .city-bar { grid-column: 2 / 4; height: 6px; margin: 0; }
.city-rank .city-profile-link { grid-column: 2 / 4; justify-self: start; min-height: 32px; }
.city-figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.city-figure { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 14px; background: var(--chip); min-width: 0; }
.city-figure b { font-size: 15px; overflow-wrap: anywhere; }
.city-figure small { font-size: 12px; line-height: 1.35; }
.city-account-table { display: flex; flex-direction: column; }
.city-account-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.city-account-row > b { grid-column: 1 / -1; font-size: 15px; }
.city-account-row > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.city-account-row > div span { font-size: 11px; color: var(--muted); }
.city-account-row > div b { font-size: 13px; overflow-wrap: anywhere; }
.city-account-row > div small { font-size: 11px; color: var(--muted); }
.city-account-missing { margin: 0; font-size: 12px; color: var(--ink-2); }
@media (max-width: 520px) {
  .city-figures { grid-template-columns: 1fr; }
  .city-account-row { grid-template-columns: 1fr 1fr; }
  .city-account-row > div:nth-child(2) { grid-column: 1 / -1; }
}
@media (min-width: 640px) { .city-name-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .city-name-list.city-people, .city-authors, .city-rank { grid-template-columns: 1fr; } }
@media (min-width: 900px) {
  .city-rank li { grid-template-columns: 22px minmax(170px, 1.3fr) 80px minmax(0, 1fr) 100px; }
  .city-rank .city-profile-link { justify-self: end; }
  .city-rank .city-bar { grid-column: auto; }
  .city-rank .city-profile-link { grid-column: auto; }
}

/* Ficha: cabeçalho, as três respostas e as seções de "Ver mais" com o acabamento da home */
.citizen-profile-head { align-items: flex-end; gap: var(--space-4); padding-block: 4px 8px; }
.citizen-profile-head .profile { gap: 18px; align-items: center; }
.citizen-profile-head .citizen-av, .citizen-profile-head .citizen-avs { flex: none; }
@media (max-width: 560px) { .citizen-profile-head .citizen-av, .citizen-profile-head .citizen-avs { width: 64px !important; height: 64px !important; } .citizen-profile-head .profile { align-items: flex-start; } }
.citizen-profile-id { display: flex; flex-direction: column; gap: 6px; }
.citizen-profile-head h1.n { font-family: var(--f-display); font-weight: 600; font-size: clamp(30px, 8vw, 40px); line-height: 1.05; letter-spacing: -0.03em; text-wrap: balance; }
.citizen-profile-role { font-size: 15px; color: var(--muted); }
.citizen-profile-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.citizen-profile-tags .citizen-tenure, .citizen-profile-tags .citizen-election { margin: 0; }
.citizen-profile-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.citizen-profile-actions .fchip { border-radius: 999px; }
.citizen-profile-compare { background: var(--accent); border-color: var(--line); color: var(--bg); }
.citizen-profile-actions .share-actions { display: flex; align-items: center; gap: 8px; }
.citizen-answers > .citizen-answer { box-shadow: var(--shadow-raised); }
.citizen-cost-exact { margin: -6px 0 0; font-size: 12px; color: var(--hero-muted); }
.citizen-cost-exact .mono { color: inherit; }
.citizen-details .citizen-detail { box-shadow: var(--shadow-raised); }
.citizen-detail-toggle { font-family: var(--f-display); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
@media (min-width: 900px) {
  .citizen-profile-head h1.n { font-size: 52px; }
  .citizen-answers { align-items: start; }
}

/* Home: abertura com busca, custo mensal, números da base, alertas e painéis */
.home-hero { display: flex; flex-direction: column; gap: 20px; padding-block: 8px 4px; }
.home-intro { display: flex; flex-direction: column; gap: 16px; }
.home-title { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(34px, 9vw, 44px); line-height: 1.04; letter-spacing: -0.03em; text-wrap: balance; }
.home-lead { margin: 0; font-size: 16px; line-height: 1.55; color: var(--muted); }
.home-search { display: flex; flex-direction: column; gap: 8px; }
.home-search label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.home-search-box { display: flex; gap: 6px; padding: 5px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-raised); }
.home-search-box input { flex: 1; min-width: 0; min-height: var(--control-height); padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); font: inherit; font-size: 16px; }
.home-search-box button { min-height: var(--control-height); padding: 0 22px; border: 0; border-radius: 999px; background: var(--accent); color: var(--bg); font: inherit; font-weight: 600; cursor: pointer; }
.home-search-box:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
.home-search-box input:focus-visible { outline: none; }
.home-search-box button:focus-visible, .home-shortcuts :is(button, a):focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.home-shortcuts { display: flex; flex-wrap: wrap; gap: 8px; }
.home-shortcuts :is(button, a) { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--chip); color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.home-cost { gap: 16px; padding: 24px; box-shadow: var(--shadow-raised); }
.home-cost-label { font-size: 14px; color: var(--muted); }
.home-cost-value { font-family: var(--f-data); font-weight: 700; font-size: clamp(48px, 15vw, 72px); line-height: 1; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.home-cost-value small { font-size: 0.5em; letter-spacing: -0.02em; color: var(--muted); }
.home-cost-parts { margin: 0; color: var(--ink-2); line-height: 1.5; }
.home-range { display: flex; flex-direction: column; gap: 8px; }
.home-range-track { position: relative; display: block; height: 8px; border-radius: 999px; background: var(--chip); }
.home-range-track i { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--surface); }
.home-range-ends { display: flex; justify-content: space-between; gap: 12px; font-family: var(--f-data); font-size: 12px; color: var(--muted); }
.home-cost-senate { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.home-cost-senate b { font-family: var(--f-data); font-size: 20px; color: var(--ink); }
.home-cost-note { margin: 0; font-size: 12px; line-height: 1.55; color: var(--muted); }
.home-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 8px 0; border-block: 1px solid var(--line); }
.home-stats > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 4px; padding: 18px 12px 18px 0; }
.home-stats > div:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--line); }
.home-stats > div:nth-child(n+3) { border-top: 1px solid var(--line); }
.home-stats dt { font-size: 12px; line-height: 1.4; color: var(--muted); }
.home-stats dd { margin: 0; font-family: var(--f-data); font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.home-pair { display: grid; gap: var(--space-4); }
.home-panel { gap: 14px; box-shadow: var(--shadow-raised); }
.home-panel-head { display: flex; flex-direction: column; gap: 4px; }
.home-ranking { list-style: none; margin: 0; padding: 0; }
.home-ranking :is(button, a) { width: 100%; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; padding: 12px 0; border: 0; border-top: 1px solid var(--line); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.home-ranking li:first-child :is(button, a) { border-top: 0; }
.home-rank { font-family: var(--f-data); font-size: 13px; color: var(--muted); }
.home-rank-name { display: flex; flex-direction: column; min-width: 0; }
.home-rank-name small { color: var(--muted); font-size: 12px; }
.home-rank-value { font-family: var(--f-data); font-weight: 700; }
.home-ranking i, .home-category-list i { grid-column: 2 / -1; display: block; height: 4px; border-radius: 999px; background: var(--accent); }
.home-category-list { list-style: none; margin: 0; padding: 0 8px 0 0; max-height: 360px; overflow-y: auto; border-top: 1px solid var(--line); }
.home-category-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.home-category-list b { font-family: var(--f-data); font-weight: 700; white-space: nowrap; }
.home-category-list small { color: var(--muted); font-weight: 500; }
.home-category-list i { grid-column: 1 / -1; }
body[data-view="home"] .citizen-home .h { font-size: 28px; font-weight: 600; }
body[data-view="home"] .citizen-alert { box-shadow: var(--shadow-raised); }
@media (min-width: 900px) {
  .home-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; padding-block: 40px 32px; }
  .home-title { font-size: clamp(46px, 4.6vw, 64px); }
  .home-lead { font-size: 18px; max-width: 520px; }
  .home-cost { padding: 32px; }
  .home-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .home-stats > div { padding: 24px 20px; border-top: 0 !important; }
  .home-stats > div:first-child { padding-left: 0; }
  .home-stats > div + div { border-left: 1px solid var(--line); }
  .home-stats dd { font-size: 30px; }
  .home-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
  body[data-view="home"] .view > .tax-card { grid-column: 1 / -1; }
}

/* Placar nominal ampliado */
.vote-yes { background: var(--accent); }
.vote-no { background: var(--warn); }
.vote-abstention { background: var(--muted); }
.vote-other { background: var(--no); }
.scoreboard-stats { display: flex; flex-wrap: wrap; gap: var(--space-3) 32px; margin: 0; }
.scoreboard-stats > div { display: flex; flex-direction: column-reverse; gap: 2px; }
.scoreboard-stats dt { color: var(--muted); font-size: 12px; }
.scoreboard-stats dd { margin: 0; white-space: nowrap; font-family: var(--f-data); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.scoreboard-coverage { color: var(--muted); font-size: 13px; }
.scoreboard-coverage > .h { color: var(--ink); }
.scoreboard-coverage > p { margin: 0; line-height: 1.5; }
.scoreboard-coverage > p strong { color: var(--ink); }
.scoreboard-coverage ul { padding-left: 20px; line-height: 1.45; }
.scoreboard-coverage summary { width: fit-content; min-height: var(--control-height); display: flex; align-items: center; cursor: pointer; color: var(--ink); font-weight: 600; }
.scoreboard-coverage details { border-top: 1px solid var(--line); }
.scoreboard-coverage details p { margin: 4px 0 0; line-height: 1.5; }
.scoreboard-funnel { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.scoreboard-funnel li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: baseline; color: var(--ink-2); }
.scoreboard-funnel b { font-family: var(--f-data); font-size: 15px; color: var(--ink); }
.scoreboard-funnel i { grid-column: 1 / -1; display: block; height: 8px; border-radius: 999px; background: var(--no); }
.scoreboard-funnel .funnel-candidates { background: var(--muted); }
.scoreboard-funnel .funnel-published { background: var(--accent); }
.scoreboard-fallback { margin: 0; padding: 12px; border-radius: 14px; background: var(--chip); color: var(--ink-2); font-size: 14px; }
.scoreboard-filters { gap: var(--space-3); }
.scoreboard-search-row { display: flex; gap: var(--space-2); }
.scoreboard-search { flex: 1; min-width: 0; display: flex; }
.scoreboard-search input, .scoreboard-theme select, .scoreboard-voters input { width: 100%; min-height: var(--control-height); padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; font-size: 15px; }
.scoreboard-submit { min-height: var(--control-height); padding: 0 20px; border: 0; border-radius: 999px; background: var(--accent); color: var(--bg); font: inherit; font-weight: 600; cursor: pointer; }
.scoreboard-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.scoreboard-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; border: 0; }
.scoreboard-chip { position: relative; cursor: pointer; }
.scoreboard-chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.scoreboard-chip span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-2); font-size: 13px; font-weight: 600; }
.scoreboard-chip input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.scoreboard-chip input:focus-visible + span, .scoreboard-search input:focus-visible, .scoreboard-theme select:focus-visible, .scoreboard-voters input:focus-visible, .scoreboard-submit:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.scoreboard-theme select { min-width: 200px; padding-right: 12px; font-size: 14px; }
.scoreboard-legend { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 0 auto; color: var(--muted); font-size: 12px; }
.scoreboard-legend span, .scoreboard-meaning .k { display: inline-flex; align-items: center; gap: 6px; }
.scoreboard-legend i, .scoreboard-meaning .k i { width: 10px; height: 10px; border-radius: 3px; }
.scoreboard-results { display: flex; flex-direction: column; gap: 28px; }
.scoreboard-month { display: flex; flex-direction: column; gap: var(--space-3); }
.scoreboard-month > h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; font-family: var(--f-display); font-size: 24px; font-weight: 500; }
.scoreboard-month > h2 span { font-family: var(--f-body); font-size: 13px; color: var(--muted); }
.scoreboard-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3) var(--space-4); }
.scoreboard-date { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 0; width: 44px; }
.scoreboard-date b { font-family: var(--f-data); font-size: 24px; line-height: 1; }
.scoreboard-date span { font-family: var(--f-data); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.scoreboard-card-body { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.scoreboard-card .h { font-size: 21px; }
.scoreboard-card p { margin: 0; line-height: 1.45; }
.scoreboard-summary { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.scoreboard-card-result { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.scoreboard-card-result .more { min-height: 36px; }
.scoreboard-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; }
.scoreboard-type { display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border-radius: 999px; background: var(--chip); color: var(--ink); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-decoration: none; cursor: help; }
.scoreboard-type[data-type="PEC"] { background: var(--accent-soft); color: var(--accent); }
.scoreboard-type[data-type="URG"], .scoreboard-type[data-type="SEG"] { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.scoreboard-chip b { margin-left: 6px; font-variant-numeric: tabular-nums; }
.scoreboard-type-name { color: var(--ink-2); font-size: 13px; font-weight: 600; }
.scoreboard-outcome { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; font-weight: 700; color: var(--ink); }
.scoreboard-outcome[data-outcome="approved"]::before { content: '✓'; color: var(--accent); }
.scoreboard-bar { display: flex; gap: 2px; height: 10px; border-radius: 999px; overflow: hidden; }
.scoreboard-bar i { display: block; flex-basis: 0; min-width: 2px; }
.scoreboard-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--muted); font-family: var(--f-data); font-size: 13px; }
.scoreboard-meta b { color: var(--ink); font-weight: 700; }
.scoreboard-themes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.scoreboard-text-status { margin: 0; color: var(--ink-2); font-size: 13px; }
.scoreboard-status, .scoreboard-empty, .scoreboard-error { margin: 0; }
.scoreboard-error { color: var(--ink-2); }
.scoreboard-pagination { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); }
.scoreboard-pagination span { text-align: center; }
.scoreboard-pagination .fchip { border-radius: 999px; }
.scoreboard-pagination button:disabled { opacity: .5; cursor: default; }
.scoreboard-result-count { margin: 0; }
.scoreboard-detail-head { display: flex; flex-direction: column; gap: var(--space-3); }
.scoreboard-detail-title { font-size: 34px; line-height: 1.08; }
.scoreboard-detail-head .scoreboard-outcome { min-height: 30px; padding: 0 12px; border-radius: 999px; background: var(--accent-soft); }
.scoreboard-decision p { margin: 0; line-height: 1.55; }
.scoreboard-meaning { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.scoreboard-meaning > div { min-width: 0; padding: 14px; border-radius: 14px; background: var(--chip); }
.scoreboard-meaning p { margin: 6px 0 0; color: var(--ink-2); line-height: 1.45; }
.scoreboard-pec-note { color: var(--ink-2); }
.scoreboard-tally { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; }
.scoreboard-tally > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.scoreboard-tally dt { color: var(--muted); font-size: 12px; }
.scoreboard-tally dd { margin: 0; font-family: var(--f-data); font-size: 30px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.scoreboard-tally small { color: var(--muted); font-size: 11px; }
.scoreboard-seats { display: grid; grid-template-columns: repeat(27, minmax(0, 1fr)); gap: 3px; }
.scoreboard-seats i, .scoreboard-seat-legend i { display: block; aspect-ratio: 1; border-radius: 50%; }
.seat-yes { background: var(--accent); }
.seat-no { background: var(--warn); }
.seat-abstention { background: var(--muted); }
.seat-obstruction { background: var(--cat5); }
.seat-chair { background: var(--ink); }
.seat-other, .seat-unknown { background: var(--no); }
.seat-empty { box-shadow: inset 0 0 0 1px var(--line); }
.scoreboard-seat-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; color: var(--ink-2); font-size: 13px; }
.scoreboard-seat-legend span { display: inline-flex; align-items: center; gap: 6px; }
.scoreboard-seat-legend i { width: 10px; }
.scoreboard-seat-note, .scoreboard-seat-warning { margin: 0; font-size: 12px; line-height: 1.5; }
.scoreboard-seat-warning { padding: 12px; border-radius: 12px; background: var(--chip); color: var(--ink-2); }
.scoreboard-sources .scoreboard-source-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.scoreboard-source-links li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 2px 12px; padding-block: 8px; border-top: 1px solid var(--line); }
.scoreboard-source-links li:first-child { border-top: 0; }
.scoreboard-source-links a { min-height: 36px; display: inline-flex; align-items: center; font-weight: 600; }
.scoreboard-source-links small { color: var(--muted); font-size: 12px; }
.scoreboard-voters { gap: var(--space-2); }
.scoreboard-voters label { display: flex; flex-direction: column; gap: 6px; color: var(--ink-2); font-size: 13px; font-weight: 600; }
.scoreboard-voters > .muted { margin: 0; }
.scoreboard-voter-group { border-top: 1px solid var(--line); padding-top: 8px; }
.scoreboard-voter-group h3 { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 4px; font-size: 14px; }
.scoreboard-voter-group h3 span { font-family: var(--f-data); color: var(--muted); font-weight: 500; }
.scoreboard-voter-group ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); column-gap: 20px; }
.scoreboard-voter-group li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding-block: 7px; border-top: 1px solid var(--line); font-size: 14px; }
.scoreboard-voter-group li a, .scoreboard-voter-group li > span { color: var(--ink); text-decoration: none; font-weight: 600; }
.scoreboard-voter-group li small { color: var(--muted); font-family: var(--f-data); font-size: 11px; }
.scoreboard-voters .fchip { align-self: flex-start; border-radius: 999px; }
.scoreboard-parties > .muted { margin: 0; font-size: 12px; }
.scoreboard-party-totals { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.scoreboard-party-totals li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'party counts' 'bar bar'; gap: 6px 12px; align-items: center; padding-block: 9px; border-top: 1px solid var(--line); font-size: 13px; }
.scoreboard-party-totals li > b { grid-area: party; }
.scoreboard-party-totals .scoreboard-party-bar { grid-area: bar; }
.scoreboard-party-totals li > span:last-child { grid-area: counts; color: var(--ink-2); font-family: var(--f-data); font-size: 12px; white-space: nowrap; }
.scoreboard-party-bar { display: flex; gap: 2px; height: 10px; }
.scoreboard-party-bar i { display: block; border-radius: 3px; }
@media (min-width: 900px) {
  body[data-view="votes"] .view > .scoreboard-stats { grid-column: 1 / span 6; grid-row: 2; align-self: start; }
  body[data-view="votes"] .view > .scoreboard-coverage { grid-column: 7 / -1; grid-row: 1 / span 2; }
  body[data-view="votes"] .view > .scoreboard-fallback, body[data-view="votes"] .view > .scoreboard-filters { grid-column: 1 / -1; }
  .scoreboard-card { grid-template-columns: 56px minmax(0, 1fr) minmax(220px, 280px); padding: 24px; }
  .scoreboard-card-result { grid-column: auto; justify-content: center; padding: 0 0 0 24px; border-top: 0; border-left: 1px solid var(--line); }
  .scoreboard-detail-title { font-size: 48px; }
  body[data-view="vote"] .view > .scoreboard-detail-head { grid-column: 1 / span 9; }
  body[data-view="vote"] .view > .card { align-self: start; }
  .scoreboard-party-totals li { grid-template-columns: 112px minmax(0, 1fr) auto; grid-template-areas: 'party bar counts'; }
}
@media (max-width: 560px) {
  .scoreboard-stats dd { font-size: 18px; }
  .scoreboard-tally { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scoreboard-seats { gap: 2px; }
  .scoreboard-legend { margin-left: 0; }
}
@media (max-width: 420px) {
  .scoreboard-meaning { grid-template-columns: 1fr; }
  .scoreboard-pagination { flex-wrap: wrap; justify-content: center; }
  .scoreboard-pagination span { order: -1; flex-basis: 100%; }
  .scoreboard-search-row { flex-direction: column; }
}

/* Ficha redesenhada: a página ocupa o panorama e mantém os mesmos tokens nos dois temas. */
.view > .citizen-profile-view { grid-column: 1 / -1; min-width: 0; }
.citizen-profile-view { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.citizen-profile-view > .back { align-self: flex-start; }
.citizen-profile-view .citizen-profile-head { align-items: center; gap: var(--space-4); padding: 0; }
.citizen-profile-view .citizen-profile-head .profile { align-items: center; gap: 18px; min-width: 0; }
.citizen-profile-view .citizen-profile-head .citizen-av,
.citizen-profile-view .citizen-profile-head .citizen-avs { flex: none; }
.citizen-profile-view .citizen-profile-id { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.citizen-profile-view .citizen-profile-head h1.n { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(34px, 6vw, 52px); line-height: 1.02; letter-spacing: -.03em; text-wrap: balance; }
.citizen-profile-view .citizen-profile-role { color: var(--muted); font-size: 14px; }
.citizen-profile-view .citizen-profile-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.citizen-profile-view .citizen-profile-tags .citizen-tenure,
.citizen-profile-view .citizen-profile-tags .citizen-election { margin: 0; }
.citizen-profile-view .citizen-profile-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.citizen-profile-view .citizen-profile-actions .fchip { border-radius: 999px; }
.citizen-profile-view .citizen-profile-compare { background: var(--accent); border-color: var(--line); color: var(--bg); }
.citizen-profile-view .citizen-profile-actions .share-actions { display: flex; align-items: center; gap: 8px; }
.profile-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.profile-summary-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 18px; text-decoration: none; box-shadow: var(--shadow-raised); }
.profile-summary-card:hover { color: var(--ink); }
.profile-summary-card .k { margin: 0; }
.profile-summary-card > b { color: var(--ink); font-family: var(--f-data); font-size: clamp(25px, 4vw, 34px); line-height: 1.05; letter-spacing: -.04em; overflow-wrap: anywhere; }
.profile-summary-card > b small { margin-left: 4px; font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.profile-summary-card > small { color: var(--muted); font-size: 12px; line-height: 1.4; }
.profile-summary-alert { background: var(--warn-soft); }
.profile-summary-alert > b { color: var(--warn); }
.profile-area { margin-top: 20px; display: flex; flex-direction: column; gap: 16px; min-width: 0; scroll-margin-top: 24px; }
.profile-area-head { display: flex; flex-direction: column; gap: 5px; }
.profile-area-head .h { margin: 0; font-family: var(--f-display); font-size: clamp(27px, 4vw, 34px); font-weight: 600; letter-spacing: -.02em; }
.profile-area-head p { max-width: 78ch; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.profile-cost-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr); gap: var(--space-4); align-items: stretch; }
.profile-cost-breakdown, .profile-quota-panel, .profile-work-card { box-shadow: var(--shadow-raised); }
.profile-cost-breakdown { gap: var(--space-3); min-width: 0; align-content: start; }
.profile-cost-breakdown > .k, .profile-quota-panel .k, .profile-work-card > .k { color: var(--muted); }
.profile-cost-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0; }
.profile-cost-total > span { color: var(--muted); font-size: 13px; }
.profile-cost-total > b { color: var(--ink); font-family: var(--f-data); font-size: clamp(27px, 4vw, 36px); font-weight: 700; letter-spacing: -.04em; line-height: 1.05; overflow-wrap: anywhere; }
.profile-cost-total-missing { margin: 0; color: var(--ink); font-family: var(--f-display); font-size: 21px; line-height: 1.2; }
.citizen-profile-view .citizen-cost-exact { margin: -5px 0 0; color: var(--muted); font-size: 12px; }
.citizen-profile-view .citizen-cost-period { margin: 0; color: var(--ink-2); font-size: 12px; font-weight: 500; line-height: 1.4; }
.profile-cost-stack { display: flex; gap: 2px; width: 100%; height: 10px; overflow: hidden; border-radius: 999px; background: var(--chip); }
.profile-cost-stack i { display: block; min-width: 0; height: 100%; flex: 0 0 auto; }
.citizen-profile-view .citizen-cost-parts { gap: 0; }
.citizen-profile-view .citizen-cost-part { padding-block: 9px; border-top: 1px solid var(--line); }
.citizen-profile-view .citizen-cost-part:first-child { border-top: 0; }
.citizen-profile-view .citizen-cost-part-label { color: var(--ink); }
.citizen-profile-view .citizen-cost-part-label b { font-family: var(--f-data); font-size: 13px; }
.citizen-profile-view .citizen-cost-part-label b small { color: var(--muted); }
.citizen-profile-view .citizen-cost-bar { background: var(--chip); }
.citizen-profile-view .citizen-cost-part small { color: var(--muted); }
.citizen-profile-view .citizen-cost-part a { color: var(--ink-2); text-underline-offset: 2px; }
.profile-card-links { display: flex; flex-wrap: wrap; gap: 2px 18px; align-items: center; margin-top: auto; }
.profile-card-links .more, .profile-work-card > .more { min-height: 36px; font-size: 13px; }
.profile-quota-panel { min-width: 0; gap: 12px; align-content: start; }
.profile-quota-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.profile-quota-head .k { margin: 0; }
.profile-quota-head > b { color: var(--ink); font-family: var(--f-data); font-size: 15px; text-align: right; }
.profile-quota-panel > .muted { margin: -7px 0 0; font-size: 12px; }
.profile-quota-group { display: flex; flex-direction: column; min-width: 0; }
.profile-quota-group h3 { margin: 0; padding-block: 0 5px; }
.profile-quota-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; min-width: 0; padding-block: 7px; border-top: 1px solid var(--line); }
.profile-quota-row > div { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; min-width: 0; font-size: 12px; }
.profile-quota-row > div > span { min-width: 0; overflow-wrap: anywhere; }
.profile-quota-row > div > b { flex: none; color: var(--ink); font-family: var(--f-data); font-size: 12px; white-space: nowrap; }
.profile-quota-row > small { grid-column: 1 / -1; color: var(--muted); font-size: 10px; line-height: 1.25; }
.profile-quota-bar { grid-column: 1 / -1; display: block; height: 5px; overflow: hidden; border-radius: 99px; background: var(--chip); }
.profile-quota-bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.profile-supplier-row > div > span { font-weight: 600; }
.profile-work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); align-items: stretch; }
.profile-work-card { min-width: 0; align-items: flex-start; }
.profile-work-card > .k { margin: 0; }
.profile-attendance-count { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.profile-attendance-count > b { color: var(--ink); font-family: var(--f-data); font-size: 38px; line-height: 1; letter-spacing: -.04em; }
.profile-attendance-count > span { color: var(--muted); font-size: 13px; }
.profile-attendance-percent { color: var(--ink); font-family: var(--f-data); font-size: 17px; }
.profile-presence-card .pbar { width: 100%; height: 9px; margin: 0; }
.profile-presence-card .legend { gap: 6px 12px; font-size: 11px; }
.profile-presence-card .legend i { background: var(--accent); }
.profile-presence-card .legend .justified { background: color-mix(in srgb, var(--muted) 55%, var(--surface)); }
.profile-presence-card .legend .absent { background: var(--warn); }
.profile-attendance-average, .profile-presence-card > .muted { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.profile-attendance-reasons { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.profile-attendance-reasons b { color: var(--ink); font-weight: 600; }
.profile-presence-card .src { margin-top: auto; }
.profile-project-count { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.profile-project-count > b { color: var(--ink); font-family: var(--f-data); font-size: 42px; line-height: 1; letter-spacing: -.04em; }
.profile-project-count > b.profile-project-unknown { font-family: var(--f-body); font-size: 18px; letter-spacing: 0; }
.profile-project-count > small { color: var(--muted); font-size: 11px; }
.profile-project-status { margin: 0; font-size: 13px; line-height: 1.4; }
.profile-project-card .muted { margin: 0; font-size: 11px; line-height: 1.4; }
.profile-project-card .src { margin-top: auto; }
.profile-vote-preview { display: flex; flex-direction: column; width: 100%; min-width: 0; }
.profile-vote-preview-item { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; min-width: 0; padding: 9px 0; border: 0; border-top: 1px solid var(--line); background: none; color: var(--ink); text-align: left; text-decoration: none; cursor: pointer; }
.profile-vote-preview-item:first-child { border-top: 0; padding-top: 0; }
.profile-vote-preview-item b { color: var(--accent); font-size: 11px; font-weight: 700; }
.profile-vote-preview-item span { font-size: 12px; line-height: 1.35; }
.profile-vote-preview-item small { color: var(--muted); font-family: var(--f-data); font-size: 10px; }
.profile-votes-card > .muted { margin: 0; font-size: 12px; }
.profile-alert-list { display: flex; flex-direction: column; gap: var(--space-3); }
.profile-alert-list .citizen-alert { width: 100%; box-shadow: var(--shadow-raised); }
.citizen-profile-view .profile-supplier-history { display: flex; flex-direction: column; gap: 8px; padding: 8px 12px; border-radius: var(--radius-control); background: var(--chip); }
.profile-supplier-history summary { min-height: 30px; color: var(--ink-2); }
.profile-supplier-history p { margin: 0; color: var(--ink-2); font-size: 12px; line-height: 1.4; }
.profile-alert-coverage { gap: 10px; box-shadow: var(--shadow-raised); }
.profile-alert-coverage > .k { margin: 0; font-family: var(--f-display); font-size: 20px; font-weight: 600; }
.profile-coverage-table { display: flex; flex-direction: column; }
.profile-coverage-row { display: grid; grid-template-columns: 58px repeat(2, minmax(0, 1fr)); gap: 4px 20px; align-items: start; padding-block: 10px; border-top: 1px solid var(--line); }
.profile-coverage-row h4 { margin: 0; font-family: var(--f-data); font-size: 13px; }
.profile-coverage-head { padding-block: 0 8px; border-top: 0; color: var(--muted); font-size: 11px; font-weight: 600; }
.profile-coverage-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.profile-coverage-cell b { font-size: 13px; font-weight: 600; }
.profile-coverage-cell small { color: var(--muted); font-size: 11px; line-height: 1.4; }
.profile-coverage-cell[data-tone="muted"] b { color: var(--muted); font-weight: 500; }
.profile-coverage-rule { display: none; color: var(--muted); font-size: 11px; }
.profile-alert-method { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line); }
.profile-alert-method h4 { margin: 0; font-size: 12px; font-weight: 600; }
.profile-alert-method .more { min-height: 36px; font-size: 13px; }
.profile-alert-method p { max-width: 78ch; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.profile-detail-area { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.profile-detail-area > .h { margin: 0; font-family: var(--f-display); font-size: 26px; font-weight: 600; }
.profile-detail-area .citizen-details { display: grid; gap: var(--space-3); }
.profile-detail-area .citizen-detail { box-shadow: var(--shadow-raised); }
.profile-detail-area .citizen-detail-toggle { font-family: var(--f-display); font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.profile-work-details { display: flex; flex-direction: column; gap: var(--space-3); }
.profile-work-details .citizen-vote-count { margin: 0; }
.profile-expense-fallback-details { display: flex; flex-direction: column; gap: var(--space-3); }

.citizen-profile-view .profile-detail-area .citizen-details { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
.citizen-profile-view .profile-detail-area .citizen-detail { flex: 0 1 auto; padding: 0; border-radius: 999px; box-shadow: none; }
.citizen-profile-view .profile-detail-area .citizen-detail-toggle { width: auto; min-height: 0; gap: 9px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-family: var(--f-body); font-size: 12px; font-weight: 600; letter-spacing: 0; }
.citizen-profile-view .profile-detail-area .citizen-detail-toggle::after { font-size: 17px; }
.citizen-profile-view .profile-detail-area .citizen-detail:has(.citizen-detail-toggle[aria-expanded="true"]) { flex: 1 0 100%; border-radius: var(--radius-card); box-shadow: var(--shadow-raised); }
.citizen-profile-view .profile-detail-area .citizen-detail:has(.citizen-detail-toggle[aria-expanded="true"]) .citizen-detail-toggle { width: 100%; min-height: 52px; padding: 13px 18px; border: 0; border-radius: var(--radius-card); background: transparent; font-family: var(--f-display); font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.citizen-profile-view .profile-detail-area .citizen-detail:has(.citizen-detail-toggle[aria-expanded="true"]) .citizen-detail-body { padding: 0 18px 18px; }

@media (min-width: 900px) {
  .citizen-profile-view .citizen-profile-head h1.n { font-size: 52px; }
  .citizen-profile-view .citizen-av, .citizen-profile-view .citizen-avs { width: 88px !important; height: 88px !important; }
  .citizen-profile-view .citizen-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .citizen-profile-view .citizen-details > [data-profile-section="expenses"] { grid-column: 1; grid-row: 1; }
  .citizen-profile-view .citizen-details > [data-profile-section="votes"] { grid-column: 2; grid-row: 1; }
}
@media (max-width: 899px) {
  .citizen-profile-view { gap: 24px; }
  .citizen-profile-view .citizen-profile-head { align-items: flex-start; }
  .citizen-profile-view .citizen-profile-head .profile { align-items: flex-start; }
  .profile-summary-grid, .profile-work-grid { grid-template-columns: 1fr; }
  .profile-cost-grid { grid-template-columns: 1fr; }
  .profile-coverage-head { display: none; }
  .profile-coverage-row { grid-template-columns: 1fr; gap: 8px; }
  .profile-coverage-head + .profile-coverage-row { border-top: 0; }
  .profile-coverage-rule { display: block; }
}
@media (max-width: 560px) {
  .citizen-profile-view .citizen-profile-head { flex-direction: column; align-items: flex-start; }
  .citizen-profile-view .citizen-profile-head .citizen-av,
  .citizen-profile-view .citizen-profile-head .citizen-avs { width: 64px !important; height: 64px !important; }
  .citizen-profile-view .citizen-profile-head h1.n { font-size: 36px; }
  .citizen-profile-view .citizen-profile-head .profile { gap: 12px; }
  .citizen-profile-view .citizen-profile-actions { width: 100%; }
  .profile-summary-grid { gap: 8px; }
  .profile-summary-card { padding: 14px; }
  .profile-summary-card > b { font-size: 27px; }
  .profile-quota-head { align-items: flex-start; flex-direction: column; gap: 3px; }
}

/* Rótulos e legenda dos painéis do protótipo. */
.citizen-profile-view .k { font-family: var(--f-body); text-transform: none; letter-spacing: 0; }
.citizen-profile-view .citizen-cost-note { color: var(--muted); }
.citizen-profile-view .citizen-cost-extra { color: var(--ink); border-color: var(--line); }
.citizen-profile-view .citizen-cost-extra span { color: var(--muted); }
.profile-cost-breakdown .citizen-cost-bar { display: none; }
.profile-cost-breakdown .citizen-cost-part-label > span::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 9px; border-radius: 2px; background: var(--cat1); }
.profile-cost-breakdown .citizen-cost-part:nth-child(2) .citizen-cost-part-label > span::before { background: var(--cat2); }
.profile-cost-breakdown .citizen-cost-part:nth-child(3) .citizen-cost-part-label > span::before { background: var(--cat3); }
.profile-cost-breakdown .citizen-cost-part:nth-child(4) .citizen-cost-part-label > span::before { background: var(--cat4); }
.profile-alert-method .citizen-alert-rules { max-width: 84ch; font-size: 12px; }
.profile-vote-preview-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 8px; }
.profile-vote-preview-item > span { grid-column: 1; grid-row: 1; }
.profile-vote-preview-item > b { grid-column: 2; grid-row: 1; max-width: 100px; padding: 3px 6px; border-radius: 999px; background: var(--chip); color: var(--ink-2); font-size: 10px; }
.profile-vote-preview-item > small { grid-column: 1 / -1; }

/* Alertas: resumo das duas regras, filtros em pílula e grade de cartões */
.alerts-page { display: flex; flex-direction: column; gap: 24px; }
.alerts-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 32px; align-items: center; padding-top: 8px; }
.alerts-intro { display: flex; flex-direction: column; gap: 16px; }
.alerts-intro .ph-t { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(40px, 5vw, 64px); line-height: 1; letter-spacing: -0.03em; }
.alerts-intro .ph-lead { margin: 0; max-width: 520px; color: var(--muted); }
.alerts-how-link { align-self: flex-start; font-size: 15px; font-weight: 500; color: var(--accent); text-decoration: none; }
.alerts-how-link:hover { text-decoration: underline; }
.alerts-top { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.alerts-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; }
.alerts-rule { gap: 10px; box-shadow: var(--shadow-raised); }
.alerts-rule > svg { color: var(--accent); }
.alerts-rule[data-kind="type-supplier"] > svg { color: var(--ink-2); }
.alerts-rule > b { font-size: 16px; font-weight: 600; }
.alerts-rule > span { font-size: 13px; line-height: 1.5; color: var(--muted); }
.alerts-rule > .alerts-rule-count { margin-top: auto; font-family: var(--f-data); font-size: 22px; }
.alerts-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 16px 0; border-block: 1px solid var(--line); }
.alerts-seg { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; }
.alerts-seg button { min-height: 36px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.alerts-seg button:hover { color: var(--ink); }
.alerts-seg button[aria-pressed="true"] { background: var(--chip); color: var(--ink); }
.alerts-status { margin-left: auto; font-size: 13px; }
.alerts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 16px; align-items: stretch; }
.alerts-grid > :not(.card) { grid-column: 1 / -1; }
.alerts-grid > .citizen-alert { box-shadow: var(--shadow-raised); }
.alerts-more { align-self: center; min-height: 48px; padding: 0 28px; border-radius: 999px; }
@media (max-width: 640px) {
  .alerts-status { margin-left: 0; }
  .alerts-seg { border-radius: 22px; }
}

/* Presença no Plenário: números no topo, filtros numa faixa e lista com barra por pessoa */
.attendance-page { display: flex; flex-direction: column; gap: 24px; }
.attendance-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 32px; align-items: end; padding-top: 8px; }
.attendance-intro { display: flex; flex-direction: column; gap: 12px; }
.attendance-intro .ph-t { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(40px, 5vw, 64px); line-height: 1; letter-spacing: -0.03em; }
.attendance-intro .ph-lead { margin: 0; max-width: 520px; color: var(--muted); }
.attendance-summary { display: flex; flex-direction: column; gap: 10px; }
.attendance-summary > .muted { margin: 0; font-size: 12px; line-height: 1.5; }
.attendance-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.attendance-stat { gap: 6px; padding: 20px; box-shadow: var(--shadow-raised); }
.attendance-stat b { font-size: clamp(26px, 6vw, 34px); font-weight: 600; line-height: 1; letter-spacing: -0.03em; }
.attendance-stat span { font-size: 13px; line-height: 1.35; color: var(--muted); }
.attendance-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 16px 0; border-block: 1px solid var(--line); }
.attendance-search { flex: 1 1 260px; min-height: 46px; border-radius: 999px; }
.attendance-legend { font-size: 13px; }
.attendance-legend i { background: var(--accent); }
.attendance-legend .justified { background: color-mix(in srgb, var(--muted) 55%, var(--surface)); }
.attendance-legend .absent { background: var(--warn); }
.attendance-results { display: flex; flex-direction: column; gap: 8px; }
.attendance-list { list-style: none; margin: 0; padding: 0; }
.attendance-row { width: 100%; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; padding: 14px 4px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.attendance-row:hover .attendance-who b { text-decoration: underline; }
.attendance-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.attendance-who b { font-size: 15px; font-weight: 600; }
.attendance-who small, .attendance-bar small, .attendance-value small { font-size: 12px; color: var(--muted); }
.attendance-bar { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.attendance-bar .pbar { height: 10px; margin: 0; border-radius: 999px; }
.attendance-value { grid-column: 3; grid-row: 1; display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.attendance-value b { font-size: 20px; font-weight: 600; }
.attendance-source { max-width: 720px; margin: 0; line-height: 1.5; }
@media (min-width: 900px) {
  .attendance-hero { padding-block: 32px 16px; }
  .attendance-row { grid-template-columns: 44px minmax(200px, 1fr) minmax(0, 2fr) 110px; }
  .attendance-bar { grid-column: 3; }
  .attendance-value { grid-column: 4; }
}
@media (max-width: 640px) {
  .attendance-stat { padding: 16px 14px; }
}

/* Comparar. Computador: cartões grandes das duas pessoas e cada métrica com o rótulo em cima e os dois valores
   lado a lado (protótipo). Celular: a estrutura da v1, mais densa: dois chips lado a lado e a tabela de três
   colunas com as fotos no cabeçalho, com o acabamento novo (pílulas e sombra). */
.compare-page { display: flex; flex-direction: column; gap: 20px; }
.compare-intro { display: flex; flex-direction: column; gap: 12px; padding-top: 8px; }
.compare-intro .ph-t { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(40px, 5vw, 64px); line-height: 1; letter-spacing: -0.03em; }
.compare-intro .ph-lead { margin: 0; max-width: 560px; color: var(--muted); }
.compare-people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.compare-person { flex-direction: row; align-items: center; gap: 8px; padding: 8px 8px 8px 10px; border-radius: 999px; box-shadow: var(--shadow-raised); }
.compare-person .citizen-av, .compare-person .citizen-avs { width: 36px !important; height: 36px !important; flex: none; }
.compare-person-name { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.compare-person-name button, .compare-person-name b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; line-height: 1.25; text-align: left; cursor: pointer; overflow: hidden; overflow-wrap: anywhere; }
.compare-person-role { display: none; }
.compare-person-name button:hover { text-decoration: underline; }
.compare-person-name small { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compare-swap { flex: none; width: 32px; height: 32px; padding: 0; border-radius: 999px; border: 0; background: var(--chip); color: var(--ink-2); font: inherit; font-size: 0; cursor: pointer; }
.compare-swap::before { content: "×"; font-size: 18px; line-height: 1; }
.compare-swap:hover { color: var(--ink); }
.compare-page > .card.wide, .compare-page .cmp { box-shadow: var(--shadow-raised); }
.compare-page .search { border-radius: 999px; }
.compare-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
@media (min-width: 721px) {
  .compare-people { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; }
  .compare-person { gap: 16px; padding: 20px; border-radius: var(--radius-card); }
  .compare-person .citizen-av, .compare-person .citizen-avs { width: 64px !important; height: 64px !important; }
  .compare-person-name { gap: 4px; }
  .compare-person-name button, .compare-person-name b { display: block; font-family: var(--f-display); font-size: clamp(22px, 3vw, 28px); line-height: 1.1; letter-spacing: -0.02em; white-space: normal; overflow-wrap: anywhere; }
  .compare-person-name small { display: block; font-size: 13px; white-space: normal; }
  .compare-person-role { display: inline; }
  .compare-swap { width: auto; height: auto; min-height: 40px; padding: 0 16px; border: 1px solid var(--line); background: transparent; font-size: 13px; font-weight: 500; }
  .compare-swap::before { content: none; }
  .compare-swap:hover { background: var(--chip); }
  .compare-page .cmp { padding: 8px 24px 16px; }
  .compare-page .cmp-head, .compare-page .cmp-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; align-items: start; }
  /* Os cartões das pessoas já dizem quem é cada coluna. */
  .compare-page .cmp-head, .compare-page .cmp-l:empty { display: none; }
  .compare-page .cmp-head + .cmp-row { border-top: 0; }
  .compare-page .cmp-row { padding-block: 18px 6px; }
  .compare-page .cmp-row:has(> .cmp-l:empty), .compare-page .cmp-row:not(:has(> .cmp-l)) { border-top: 0; padding-top: 0; }
  .compare-page .cmp-l { grid-column: 1 / -1; font-size: 15px; font-weight: 600; color: var(--ink); }
  .compare-page .cmp-l small { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--muted); }
  .compare-page .cmp-v { text-align: left; padding: 6px 10px; margin-inline: -10px; font-size: 14px; line-height: 1.45; }
  .compare-page .cmp-v > b { font-family: var(--f-data); font-size: clamp(20px, 2.4vw, 28px); font-weight: 600; letter-spacing: -0.02em; }
  .compare-page .cmp-v[style*="grid-column"] { grid-column: 1 / -1 !important; }
  .compare-page .cmp-source { font-size: 12px; }
  .compare-page .cmp-bars { padding-bottom: 4px; }
  .compare-page .cmp-bars > div { height: 8px; border-radius: 999px; }
  .compare-page .cmp-bars i { border-radius: 999px; }
}

/* Minha cidade (protótipo): abertura com o nome grande e a busca para trocar de cidade; no computador,
   "Quem governa" na largura toda, em três colunas, e gasto e emendas lado a lado. No celular os blocos de
   "Quem governa" seguem empilhados dentro do cartão. */
body[data-view="city"] .view:has(> .city-hero) > .back[data-city-search] { display: none; }
.city-hero { display: flex; flex-direction: column; gap: 20px; }
.city-hero-search { display: flex; flex-direction: column; gap: 8px; position: relative; }
.city-hero-search label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.city-hero-box { display: flex; gap: 6px; padding: 5px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-raised); }
.city-hero-box:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
.city-hero-box input { flex: 1; min-width: 0; min-height: var(--control-height); padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); font: inherit; font-size: 16px; }
.city-hero-box input:focus-visible { outline: none; }
.city-hero-box button { min-height: var(--control-height); padding: 0 20px; border: 0; border-radius: 999px; background: var(--accent); color: var(--bg); font: inherit; font-weight: 600; cursor: pointer; }
.city-hero-box button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.city-hero-search .city-results { position: absolute; top: 100%; left: 0; right: 0; z-index: 20; min-height: 0; margin-top: 8px; }
.city-hero-search .city-results:not(:empty) { padding: 8px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-raised); }
.city-hero-search .city-suggestions { border: 0; }
.city-govern { display: flex; flex-direction: column; gap: var(--space-3); }
.city-govern-part { display: flex; flex-direction: column; gap: var(--space-3); }
.city-govern-congress { padding-top: 12px; border-top: 1px solid var(--hero-line); }
.city-govern-congress > b { font-size: 34px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: var(--hero-fg); }
@media (min-width: 900px) {
  body[data-view="city"] .view > .city-hero { grid-column: 1 / -1; }
  .city-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: end; padding-block: 24px 16px; }
  .city-title { font-weight: 600; font-size: clamp(56px, 6vw, 80px); letter-spacing: -0.03em; }
  .city-answers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .city-answers > [data-city-answer="govern"] { grid-column: 1 / -1; }
  .city-govern { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; padding-top: 4px; }
  .city-govern-part { padding-inline: 24px; border-left: 1px solid var(--hero-line); }
  .city-govern-part:first-child { padding-left: 0; border-left: 0; }
  .city-govern-part:last-child { padding-right: 0; }
  .city-govern-congress { padding-top: 0; border-top: 0; }
  .city-govern .city-mini-seats { padding-top: 0; border-top: 0; }
}

/* Comparar partidos (protótipo): escolha em pílulas numa faixa, um cartão por partido, cada métrica com o
   rótulo em cima e os dois valores lado a lado (com barra quando os dois existem). Os cartões ficam na mesma ordem das colunas, então dizem de quem é cada valor. */
.parties-page { display: flex; flex-direction: column; gap: 20px; }
.party-pick { display: flex; flex-direction: column; gap: 10px; padding: 16px 0; border-block: 1px solid var(--line); }
.party-pick .fchip { border-radius: 999px; }
.party-pick .fchip b { font-family: var(--f-data); font-weight: 500; color: var(--muted); }
.party-pick .fchip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); }
.party-pick .fchip[aria-pressed="true"] b { color: var(--accent); }
.party-pick > .muted { font-size: 13px; line-height: 1.5; }
.party-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.party-card { align-items: flex-start; gap: 8px; padding: 18px; box-shadow: var(--shadow-raised); }
.party-card .party-acronym { font-size: min(var(--fit, 56px), 40px); }
.party-card-count { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.party-card-count b { font-size: 17px; font-weight: 600; }
.party-card-count small { font-size: 13px; line-height: 1.4; color: var(--muted); }
.parties-page .party-cmp { padding: 8px 16px 16px; box-shadow: var(--shadow-raised); }
.parties-page .party-cmp .cmp-head { display: none; }
.parties-page .party-cmp .cmp-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; align-items: start; padding-block: 18px 6px; }
.parties-page .party-cmp .cmp-head + .cmp-row { border-top: 0; }
.parties-page .party-cmp .cmp-row:not(:has(> .cmp-l)) { border-top: 0; padding-top: 0; }
.parties-page .party-cmp .cmp-l { grid-column: 1 / -1; font-size: 15px; font-weight: 600; color: var(--ink); }
.parties-page .party-cmp .cmp-l small { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--muted); }
.party-note { display: block; margin-top: 4px; font-size: 12px; line-height: 1.4; color: var(--muted); }
.parties-page .party-cmp .cmp-v { text-align: left; padding: 6px 10px; margin-inline: -10px; font-size: 14px; line-height: 1.45; }
.parties-page .party-cmp .cmp-v > b { font-family: var(--f-data); font-size: clamp(20px, 2.4vw, 28px); font-weight: 600; letter-spacing: -0.02em; }
.parties-page .party-cmp .cmp-v[style*="grid-column"] { grid-column: 1 / -1 !important; font-size: 12px; }
.party-bar { display: block; height: 8px; margin-top: 8px; border-radius: 999px; background: var(--chip); overflow: hidden; }
.party-bar i { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.parties-page > .card.wide { box-shadow: var(--shadow-raised); }
.party-votes-headline { font-family: var(--f-display); font-weight: 600; font-size: clamp(22px, 3vw, 30px); line-height: 1.2; letter-spacing: -0.015em; }
.party-code { font-size: 11px; font-weight: 600; color: var(--muted); }
.parties-page .citizen-more { align-self: center; border-radius: 999px; padding-inline: 24px; }
@media (min-width: 721px) {
  .party-card { flex-direction: row; align-items: center; gap: 20px; padding: 24px; }
  .party-card .party-acronym { font-size: var(--fit, 56px); }
  .party-card-count b { font-size: 22px; }
  .parties-page .party-cmp { padding-inline: 24px; }
  .parties-page .party-cmp .cmp-row { gap: 8px 24px; }
  .parties-page .party-vote { grid-template-columns: minmax(0, 1fr) 110px 110px; }
}

/* Placar: decisões sobre trechos (destaques e emendas) */
.scoreboard-segment-count { margin: 0; font-size: 13px; font-weight: 600; color: var(--accent); }
.scoreboard-segments > p { margin: 0; }
.scoreboard-segment-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.scoreboard-segment { display: flex; flex-direction: column; gap: 10px; padding-top: var(--space-4); border-top: 1px solid var(--line); }
.scoreboard-segment h3 { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: 20px; line-height: 1.25; }
.scoreboard-segment > p { margin: 0; line-height: 1.5; color: var(--ink-2); }
.scoreboard-segment-kind { margin: 0; font-family: var(--f-data); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.scoreboard-segment-meaning { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin: 0; }
.scoreboard-segment-meaning > div { padding: 10px 12px; border-radius: 12px; background: var(--chip); }
.scoreboard-segment-meaning dt { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; }
.scoreboard-segment-meaning dt i { width: 10px; height: 10px; border-radius: 3px; }
.scoreboard-segment-meaning dd { margin: 4px 0 0; font-size: 14px; color: var(--ink-2); line-height: 1.4; }
.scoreboard-segment-result { display: flex; flex-direction: column; gap: 6px; }
.scoreboard-segment > .more { align-self: flex-start; }
.scoreboard-outcome[data-outcome="kept"]::before { content: '✓'; color: var(--accent); }
@media (max-width: 640px) { .scoreboard-segment-meaning { grid-template-columns: 1fr; } }
@media (min-width: 900px) { .scoreboard-segment-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } }

/* Metodologia e perguntas: abertura, índice "Nesta página" (pílulas no celular, coluna fixa no computador) e as
   regras em perguntas que abrem com um clique. */
.methodology-page { display: flex; flex-direction: column; gap: 32px; }
.methodology-intro { display: flex; flex-direction: column; gap: 16px; max-width: 820px; padding-top: 8px; }
.methodology-intro .ph-t { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(40px, 5vw, 64px); line-height: 1; letter-spacing: -0.03em; }
.methodology-intro .ph-lead { margin: 0; font-size: 18px; line-height: 1.6; color: var(--ink-2); }
.methodology-notice { display: block; margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink); box-shadow: var(--shadow-raised); }
.methodology-layout { display: flex; flex-direction: column; gap: 32px; }
.methodology-toc { display: flex; flex-wrap: wrap; gap: 8px; }
.methodology-toc .k { flex-basis: 100%; }
.methodology-toc a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: 14px; font-weight: 500; text-decoration: none; }
.methodology-toc a:hover { color: var(--ink); background: var(--chip); }
.methodology-sections { display: flex; flex-direction: column; gap: 56px; min-width: 0; }
.methodology-section { display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 24px; }
.methodology-section header { display: flex; flex-direction: column; gap: 8px; }
.methodology-section h2 { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(28px, 4vw, 36px); line-height: 1.1; letter-spacing: -0.02em; }
.methodology-section header p { max-width: 72ch; margin: 0; font-size: 16px; line-height: 1.6; color: var(--muted); }
.methodology-questions { border-top: 1px solid var(--line); }
.methodology-question { border-bottom: 1px solid var(--line); }
.methodology-question summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; padding: 16px 4px; font-size: 17px; font-weight: 600; line-height: 1.4; cursor: pointer; list-style: none; }
.methodology-question summary::-webkit-details-marker { display: none; }
/* Seta indica que a pergunta abre com um clique; gira quando aberta. */
.methodology-question summary::after { content: '›'; flex: none; font-size: 22px; line-height: 1; color: var(--muted); transition: transform .15s; }
.methodology-question[open] summary::after { transform: rotate(90deg); }
.methodology-answer { display: flex; flex-direction: column; gap: 10px; max-width: 72ch; padding: 0 4px 20px; font-size: 15px; line-height: 1.65; color: var(--ink-2); }
.methodology-answer p, .methodology-answer ul { margin: 0; }
.methodology-answer ul { padding-left: 20px; }
.methodology-links { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.methodology-links a, .methodology-view-link { font-size: 14px; font-weight: 500; color: var(--accent); text-decoration: none; }
.methodology-links a:hover, .methodology-view-link:hover { text-decoration: underline; }
.methodology-view-link { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 900px) {
  .methodology-intro { padding-block: 32px 16px; }
  .methodology-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 48px; align-items: start; }
  .methodology-toc { position: sticky; top: 96px; flex-direction: column; flex-wrap: nowrap; gap: 2px; }
  .methodology-toc .k { flex-basis: auto; padding-bottom: 10px; }
  .methodology-toc a { min-height: 40px; padding: 0 12px; border: 0; border-radius: 10px; background: none; }
  .methodology-section { scroll-margin-top: 96px; }
}