/* ============================================================ */
/* Atkinson Hyperlegible Next, do Braille Institute of America. */
/* Desenhada para baixa visão: as letras que costumam se        */
/* confundir (I l 1, O 0, b d p q, c e o) recebem formas        */
/* deliberadamente distintas. Auto-hospedada em site/fonts/,    */
/* pela mesma razão que o maplibre e o pmtiles: uma origem só,  */
/* e nada quebra se o CDN cair.                                 */
/*                                                              */
/* A versão VARIÁVEL (200 a 800), e não a estática 400/700: o   */
/* site usa peso 500 e 600, que a estática o navegador teria de */
/* falsificar engrossando o traço — exatamente o que uma fonte  */
/* de legibilidade não pode sofrer.                             */
/*                                                              */
/* Os arquivos são os subconjuntos latin e latin-ext do Google  */
/* Fonts. O português cabe inteiro no latin (Latin-1); o        */
/* latin-ext entra por 30 KB e cobre o resto.                   */
/* ============================================================ */

@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(../fonts/ahn-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(../fonts/ahn-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url(../fonts/ahn-latin-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url(../fonts/ahn-latin-ext-italic.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Mono';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(../fonts/ahm-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Mono';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(../fonts/ahm-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================ */
/* Temas: escuro (padrão) e claro, alternáveis pelo botão do    */
/* cabeçalho (data-theme="claro" no <html>).                    */
/* ============================================================ */

:root {
  --font-body: "Atkinson Hyperlegible Next", system-ui, -apple-system,
               "Segoe UI", Arial, sans-serif;
  --font-mono: "Atkinson Hyperlegible Mono", ui-monospace, "Cascadia Mono",
               Consolas, monospace;

  --bg-page: #0f1216;
  --surface: #1a1f26;
  --surface-2: #151a20;
  --overlay: rgba(22, 27, 34, 0.94);
  --border: rgba(255, 255, 255, 0.10);
  --shadow: 0 1px 6px rgba(0, 0, 0, 0.5);

  --accent: #3d7dc4;
  --on-accent: #ffffff;
  /* marca do par (indicador, ano) em uso */
  --marca: #d1493c;

  --text: #e8ecf1;
  --text-2: #aab4bf;
  --muted: #7d8791;

  --tooltip-bg: rgba(30, 36, 44, 0.97);
  --tooltip-text: #e8ecf1;
}

:root[data-theme="claro"] {
  --bg-page: #f4f5f7;
  --surface: #ffffff;
  --surface-2: #fbfbfc;
  --overlay: rgba(255, 255, 255, 0.95);
  --border: rgba(0, 0, 0, 0.12);
  --shadow: 0 1px 6px rgba(0, 0, 0, 0.14);

  --accent: #2b6cb0;
  --on-accent: #ffffff;
  --marca: #c0392b;

  --text: #14181d;
  --text-2: #4a5560;
  --muted: #6d7883;

  --tooltip-bg: rgba(255, 255, 255, 0.97);
  --tooltip-text: #14181d;
}

* { box-sizing: border-box; }

/* o navegador daria seu monospace proprio a estes; o par da familia mantem
   metrica e desenho coerentes com o corpo do texto */
code, kbd, samp, pre { font-family: var(--font-mono); }

html, body {
  margin: 0;
  height: 100%;
  font-family: var(--font-body);
  background: var(--bg-page);
  color: var(--text);
}

/* ------------------------------------------------------------ cabeçalho */
#app-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

#app-header h1 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  white-space: nowrap;
}

/* o período fica junto do título mas em peso menor: é escopo, não nome */
.h1-sub {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

#hover-label {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  flex: 1;
}

#btn-tema {
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text-2);
  cursor: pointer;
}
#btn-tema::before { content: "☾"; font-size: 14px; }
:root[data-theme="claro"] #btn-tema::before { content: "☀"; }

/* ------------------------------------------------------------- layout */
#app-layout {
  display: flex;
  height: calc(100% - 51px);
}

#map-panel {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

#right-panel {
  flex: 0 0 320px;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--border);
  overflow-y: auto;
  padding: 14px;
}

/* ------------------------------------------------ coluna do indicador
   Coluna de cima a baixo, como a da direita, e não um cartão flutuante sobre o
   mapa. Flutuando, ela cobria o Acre e Rondônia no enquadramento nacional e a
   lista de indicadores nunca podia crescer sem tapar mais mapa; como coluna,
   ela divide a largura em vez de disputar a mesma. */
#sidebar {
  flex: 0 0 270px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 14px;
}
/* O seletor fica parado no topo e o texto rola embaixo dele: assim a posicao do
   botao de indicador nao depende do tamanho da descricao do indicador anterior. */
#sb-content { display: flex; flex-direction: column; min-height: 0; flex: 1; }
#sb-texto { flex: 1; min-height: 0; overflow-y: auto; }

#sidebar h2 {
  margin: 0 0 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* -------------------------------------------- seletor de indicador
   Lista propria em vez de <select>: cada linha leva um selo com os seis censos,
   e <option> so aceita texto. */
#sel-indicador { position: relative; }

#ind-botao {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  /* Altura de DUAS linhas, sempre. Nome curto deixava o botao com 42 px e nome
     longo com 48, e os 6 px de diferenca empurravam tudo abaixo a cada troca
     de ano. */
  min-height: 48px;
  padding: 6px 7px;
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
}
#ind-botao:hover { border-color: var(--muted); }
/* no maximo duas linhas: um nome de tres linhas voltaria a mexer na altura */
#ind-botao .ind-rotulo {
  flex: 1;
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ind-seta {
  flex: none;
  border: 4px solid transparent;
  border-top: 5px solid var(--muted);
  margin-top: 3px;
}

/* O SELO: dois de tres censos por linha, na ordem cronologica. Azul onde o
   indicador existe, cinza claro onde nao — a resposta para "isso da para
   comparar com 1980?" sem abrir nada. */
.selo-anos {
  flex: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  line-height: 1;
}
.selo-anos i {
  font-style: normal;
  font-size: 8.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  padding: 1px 2px;
  border-radius: 2px;
  text-align: center;
}
/* a célula do ano em que o indicador existe leva até aquele censo */
.selo-anos i.sim { color: var(--on-accent); background: var(--accent); cursor: pointer; }
.selo-anos i.sim:hover { filter: brightness(1.25); }
/* O par (indicador, ano) que está no mapa agora. Vermelho porque ele não é
   "mais um ano disponível": é onde você está, e precisa se separar do azul dos
   outros à primeira vista. */
.selo-anos i.atual { background: var(--marca); }
.selo-anos i.nao { color: var(--muted); background: none; opacity: 0.45; }

#ind-lista {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 58vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
#ind-busca {
  flex: none;
  margin: 6px;
  padding: 5px 7px;
  font-family: inherit;
  font-size: 12px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 5px;
}
#ind-opcoes { overflow-y: auto; padding: 0 4px 6px; }
.ind-tema {
  padding: 8px 6px 3px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.ind-opcao {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 4px 6px;
  font-family: inherit;
  font-size: 12.5px;
  text-align: left;
  color: var(--text);
  background: none;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
.ind-opcao .ind-rotulo { flex: 1; min-width: 0; }
.ind-opcao:hover,
.ind-opcao:focus-visible { background: var(--surface-2); outline: none; }
.ind-opcao[aria-selected="true"] { color: var(--accent); font-weight: 600; }
/* Indicador que nao existe no censo corrente: esmaecido, mas CLICAVEL — leva
   ao censo mais proximo que o tenha. So o rotulo apaga; o selo fica inteiro,
   porque e ele que explica POR QUE a linha esta apagada e para onde clicar
   leva. Apagar o selo junto tiraria a resposta e deixaria so o sintoma. */
.ind-opcao.fora-do-ano .ind-rotulo { opacity: 0.45; }
.ind-vazio { padding: 10px 8px; font-size: 12px; color: var(--muted); margin: 0; }

#ind-aviso,
#ano-nota {
  margin: 8px 0 0;
  padding: 6px 8px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-2);
  background: var(--surface-2);
  border-left: 2px solid var(--muted);
  border-radius: 3px;
}

.tema-titulo {
  margin: 14px 0 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 600;
}

.dado-linha.instavel .dado-valor { color: var(--muted); font-style: italic; }

#ind-desc {
  margin: 10px 0 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-2);
  border-top: 1px solid var(--border);
  padding-top: 8px;
}

/* modo limpo: sem coluna de indicador, sem legenda, sem controles — só os
   polígonos. A coluna saiu de dentro do #map-panel quando virou coluna do
   layout, então a marca do modo limpo tem de estar no <body> para alcançá-la. */
body.modo-limpo #sidebar,
body.modo-limpo #sb-toggle { display: none; }
#map-panel.modo-limpo #choro-legend,
#map-panel.modo-limpo .maplibregl-ctrl-top-right,
#map-panel.modo-limpo .maplibregl-ctrl-bottom-right { display: none; }

#btn-limpo {
  position: absolute;
  top: 10px;
  right: 50px;
  z-index: 2;
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--overlay);
  color: var(--text-2);
  cursor: pointer;
}
#btn-limpo.ativo { color: var(--on-accent); background: var(--accent); }
#map-panel.modo-limpo #btn-limpo { opacity: 0.25; }
#map-panel.modo-limpo #btn-limpo:hover { opacity: 1; }

/* --------------------------------------------------------- carregando */
#carregando {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  padding: 10px 16px;
  background: var(--overlay);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  font-size: 13px;
  color: var(--text-2);
}

/* ------------------------------------------------------------- legenda */
#choro-legend {
  position: absolute;
  bottom: 22px;
  left: 10px;
  z-index: 2;
  background: var(--overlay);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 8px 10px;
}

.legend-title {
  font-size: 11.5px;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--text);
}
.legend-tick { font-size: 10px; fill: var(--text-2); }

/* Legenda por classes: cor, faixa de valores, barra de população, percentual.
   Grid em vez de flex para as quatro colunas ficarem alinhadas entre as linhas
   mesmo com rótulos de larguras diferentes ("menos de 10,0%" x "80,0% ou
   mais"). A coluna da barra é a única elástica. */
/* Coluna da barra com largura FIXA, não 1fr: assim a barra mede o mesmo em
   todos os indicadores e dá para comparar de olho. Com 1fr ela encolhia quando
   os rótulos eram longos ("99,25% a 99,75%") e o histograma sumia. */
.legend-classes {
  display: grid;
  grid-template-columns: auto auto 76px auto;
  align-items: center;
  gap: 2px 7px;
  margin-bottom: 5px;
}
.legend-linha { display: contents; }

.legend-cor {
  width: 13px;
  height: 13px;
  border-radius: 2px;
  /* contorno claro: as cores escuras da ponta somem no tema escuro */
  box-shadow: inset 0 0 0 1px rgba(128, 128, 128, 0.45);
}

.legend-faixa {
  font-size: 10.5px;
  color: var(--text-2);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.legend-barra {
  height: 9px;
  background: var(--surface-2);
  border-radius: 2px;
  overflow: hidden;
}
.legend-barra > i {
  display: block;
  height: 100%;
  background: var(--muted);
  border-radius: 2px;
}

.legend-pct {
  font-size: 10px;
  color: var(--text-2);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-align: right;
  min-width: 30px;
}

/* -------------------------------------------------------- painel direito */
#ap-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

#placeholder-panel p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-2);
}
#placeholder-panel .nota {
  font-size: 11.5px;
  color: var(--muted);
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

.ap-sub {
  margin: 10px 0 12px;
  font-size: 11.5px;
  color: var(--muted);
}

.dado-linha {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
}
.dado-linha.ativo { font-weight: 600; }
.dado-linha.ativo .dado-valor { color: var(--accent); }
.dado-linha.secundario { color: var(--muted); }
.dado-label { color: var(--text-2); }
.dado-linha.ativo .dado-label { color: var(--text); }
.dado-valor { font-variant-numeric: tabular-nums; white-space: nowrap; }

.sem-dado { font-size: 12.5px; color: var(--muted); }

#app-footer {
  margin-top: auto;
  padding-top: 14px;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--muted);
}

/* ------------------------------------------------------------- popup */
.maplibregl-popup-content {
  background: var(--tooltip-bg);
  color: var(--tooltip-text);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 12px;
  line-height: 1.45;
  box-shadow: var(--shadow);
}
.maplibregl-popup-tip { border-top-color: var(--tooltip-bg) !important; }
.popup-ap { color: var(--muted); font-size: 11px; }

/* ------------------------------------------------------------- mobile */
@media (max-width: 800px) {
  #app-layout { flex-direction: column; height: auto; }
  #map-panel { height: 62vh; }
  #right-panel { flex: 1 1 auto; border-left: none; border-top: 1px solid var(--border); }
  #sidebar { width: calc(100% - 20px); max-height: 42%; }
  #app-header { flex-wrap: wrap; }
  #hover-label { display: none; }
}

.legend-nota {
  margin-top: 3px;
  font-size: 9.5px;
  color: var(--muted);
}

/* ------------------------------------------- censo e nível geográfico */
/* Os dois grupos são o mesmo componente: uma barra segmentada. O de censo vem
   primeiro porque é ele que decide quais níveis e quais indicadores existem. */
#sel-ano,
#sel-nivel {
  display: flex;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.btn-ano,
.btn-nivel {
  padding: 5px 11px;
  font-family: inherit;
  font-size: 12px;
  color: var(--text-2);
  background: var(--surface-2);
  border: none;
  border-right: 1px solid var(--border);
  cursor: pointer;
  white-space: nowrap;
}
.btn-ano { padding: 5px 9px; font-variant-numeric: tabular-nums; }
.btn-ano:last-child,
.btn-nivel:last-child { border-right: none; }
.btn-ano:hover,
.btn-nivel:hover { color: var(--text); }

/* Censo em que o indicador escolhido não existe. Fica esmaecido, não
   desabilitado: o clique continua valendo e cai no primeiro indicador daquele
   ano. O esmaecido é aviso, não bloqueio. */
.btn-ano.sem-indicador { opacity: 0.38; }
.btn-ano.sem-indicador:hover { opacity: 0.7; }

/* Nivel que aquele censo nao tem. Fica no lugar, apagado: o que muda entre
   censos e o que esta disponivel, e o botao sumindo encolhia a barra em trinta
   pixels ao trocar de ano — parecia falha de renderizacao, nao ausencia. */
.btn-nivel.ausente {
  opacity: 0.3;
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.btn-ano.ativo,
.btn-nivel.ativo { color: var(--on-accent); background: var(--accent); font-weight: 600; }


/* ============================================================ */
/* Montagem da figura                                           */
/* Substituiu o modo gráfico. Aquele era um MODO: entrar         */
/* escondia a lista de indicadores, o painel de valores e metade */
/* do cabeçalho, mesmo para quem só queria ver os municípios de  */
/* um estado. Agora recortar é navegação (shift+clique) e montar */
/* a figura é um estado curto, que só acrescenta dois textos     */
/* sobre o mapa e um painel flutuante.                           */
/* ============================================================ */

/* textos da figura: escondidos até alguém pedir a figura */
.gr-texto { display: none; }

body.editando-figura .gr-texto {
  display: block;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  max-width: 80%;
  text-align: center;
  color: var(--text);
  outline: none;
  cursor: text;
}
/* Abaixo da faixa de controles, não do lado dela. Com cores, base da escala e
   seletor de censo na linha de cima, um título centralizado na MESMA linha
   sobra com uns 350 px e fica cortado — foi o que aconteceu. */
/* Abaixo da barra de controles, medida em tempo real: ela ganhou o chip do
   recorte e quebra em duas linhas conforme o que esta ligado, e um 'top' fixo
   deixava o titulo debaixo dela — invisivel e nao clicavel. */
body.editando-figura #gr-titulo {
  top: var(--fig-topo, 56px);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
}
/* a dica do shift+clique e sobre navegar, nao sobre a figura: enquanto se monta
   a figura ela so ocupa espaco na barra e empurra o titulo para baixo */
body.editando-figura #foco-dica { display: none; }
body.editando-figura #gr-fonte {
  bottom: 14px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--muted);
}
/* realce discreto só ao editar, para não aparecer no print */
body.editando-figura .gr-texto:focus {
  background: var(--surface-2);
  box-shadow: 0 0 0 1px var(--border);
  border-radius: 4px;
}

/* ------------------------------------------------ nota metodológica */
/* Aparece só ao montar a figura, como o título e a fonte. A largura é do
   usuário (resize horizontal): é ela que decide a quebra do texto, na tela e
   no PNG, então arrastar o canto é diagramar a nota. A altura não: ela vem do
   texto, e travá-la esconderia linha sem avisar. */
#gr-nota { display: none; }
/* o :not([hidden]) nao e decorativo: sem ele esta regra ganha do display:none
   que o atributo hidden traz, e o X da alca fecharia a nota so no papel */
body.editando-figura #gr-nota:not([hidden]) {
  display: block;
  position: absolute;
  /* Canto oposto ao da legenda, que mora embaixo à esquerda: nascer em cima
     dela obrigava a arrastar antes de conseguir ler qualquer uma das duas. */
  right: 12px;
  bottom: 46px;
  z-index: 4;
  width: 340px;
  min-width: 170px;
  max-width: 92%;
  background: var(--overlay);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  overflow: hidden;      /* sem isto o resize não vale */
  resize: horizontal;
}
#gr-nota-alca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 4px 3px 9px;
  border-bottom: 1px solid var(--border);
  cursor: move;
  user-select: none;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
/* A alça NÃO entra no PNG: ela é o controle, não a figura. O que é exportado é
   a caixa do texto, na posição e na largura em que ela está na tela. */
.gr-nota-btns { display: flex; gap: 2px; }
.gr-nota-btns button {
  border: none;
  background: none;
  color: var(--muted);
  font-size: 13px;
  line-height: 1;
  padding: 1px 4px;
  cursor: pointer;
}
.gr-nota-btns button:hover { color: var(--text); }
#gr-nota-texto {
  padding: 8px 9px 9px;
  font-size: 10px;
  line-height: 1.45;
  color: var(--text-2);
  white-space: pre-wrap;
  outline: none;
  cursor: text;
}
/* Sem realce na primeira linha, de propósito: um contenteditable de texto puro
   não tem como marcar "a linha lógica 1" em CSS (::first-line pega a primeira
   linha VISUAL, e negritaria meio cabeçalho quando ele quebra). Uniforme na
   tela e uniforme no PNG vale mais do que um negrito que só às vezes acerta. */
#gr-nota-texto:focus { background: var(--surface-2); }

/* A legenda entra na figura, então reaparece mesmo com o mapa de fundo
   desligado. E arrasta SEMPRE — ela tapa o canto inferior esquerdo, que é onde
   ficam o Acre, Rondônia e boa parte do Sul dependendo do enquadramento.
   (Arrastar move só a legenda da TELA: a do PNG é posicionada pelo canto
   escolhido no painel da figura.) */
body.editando-figura #map-panel.modo-limpo #choro-legend { display: block; }
#choro-legend { cursor: move; user-select: none; }

/* ------------------------------------------------ painel da figura */
#fig-panel {
  position: absolute;
  top: 130px;
  right: 12px;
  z-index: 6;
  width: 232px;
  background: var(--overlay);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  font-size: 11px;
  color: var(--text-2);
}
#fig-cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 6px 6px 10px;
  border-bottom: 1px solid var(--border);
  cursor: move;
  user-select: none;
  font-weight: 600;
  color: var(--text);
}
#fig-cancelar {
  border: none;
  background: none;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
}
#fig-cancelar:hover { color: var(--text); }
#fig-corpo { padding: 9px 10px 10px; display: grid; gap: 8px; }
#fig-corpo > label { display: flex; align-items: center; gap: 6px; }
#fig-corpo select {
  flex: 1;
  font-family: inherit;
  font-size: 11px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 4px;
}
.fig-caixa { cursor: pointer; }
.fig-secao {
  margin-top: 2px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 9.5px;
}
#fig-anos { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.fig-ano { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
/* Censo que a figura não pode mostrar continua VISÍVEL, esmaecido: sumir daria
   a entender que aquele censo não existe, quando o que falta é o indicador ou
   a unidade naquela malha. O title diz qual dos dois. */
.fig-ano.fora { opacity: 0.35; cursor: not-allowed; }
.fig-nota { margin: 0; color: var(--muted); line-height: 1.35; }
#fig-salvar {
  margin-top: 2px;
  padding: 5px 8px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--on-accent);
  background: var(--accent);
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
#fig-salvar:disabled { opacity: 0.5; cursor: progress; }

/* ------------------------------------------------ trilha do recorte */
#foco-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 3px 1px 7px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-weight: 600;
}
#foco-sair {
  border: none;
  background: none;
  color: var(--muted);
  font-size: 13px;
  line-height: 1;
  padding: 0 3px;
  cursor: pointer;
}
#foco-sair:hover { color: var(--text); }
#foco-dica { color: var(--muted); font-style: italic; }
#btn-png.ativo { color: var(--on-accent); background: var(--accent); }

/* ============================================================ */
/* Página de metodologia                                        */
/* ============================================================ */
/* Página de texto: rola normalmente, ao contrário do mapa, que ocupa a tela
   inteira e não rola. */
body.pagina-texto { height: auto; overflow: auto; }
body.pagina-texto #app-header { position: sticky; top: 0; z-index: 10; }

#busca {
  flex: 1;
  max-width: 320px;
  padding: 5px 9px;
  font-family: inherit;
  font-size: 12px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.link-voltar { font-size: 12px; color: var(--muted); text-decoration: none; }
.link-voltar:hover { color: var(--text); }

#met-main { max-width: 980px; margin: 0 auto; padding: 18px 16px 60px; }
#met-intro { margin: 0 0 8px; font-size: 12.5px; color: var(--text-2); }

#met-aviso, #met-conflito {
  margin: 0 0 18px;
  padding: 9px 11px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-2);
  background: var(--surface-2);
  border-left: 2px solid var(--muted);
  border-radius: 3px;
}
#met-conflito { border-left-color: #d29922; }

.met-tema h2 {
  margin: 26px 0 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  padding-bottom: 5px;
}
.met-n { font-weight: 400; color: var(--muted); font-size: 12px; }

.met-card {
  margin-bottom: 10px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 7px;
}
.met-cab { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.met-col { font-size: 12px; color: var(--accent); }
.met-rot { font-size: 13px; font-weight: 600; color: var(--text); }
.met-tags { margin-left: auto; display: flex; gap: 5px; flex-wrap: wrap; }
.met-tag {
  font-size: 10px;
  padding: 1px 6px;
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  white-space: nowrap;
}
.met-flag {
  font-size: 10px; padding: 1px 6px; border-radius: 10px;
  color: #d29922; border: 1px solid #d29922;
}

/* A fórmula é o conteúdo principal da página: monoespaçada e com quebra, para
   condição longa não sumir na horizontal. */
.met-formula {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 2px 10px;
  margin: 8px 0 0;
}
.met-formula dt { font-size: 11px; color: var(--muted); }
.met-formula dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text);
  overflow-wrap: anywhere;
}
.met-var { color: var(--accent); font-weight: 600; }

.met-gloss { margin-top: 8px; padding-left: 9px; border-left: 2px solid var(--border); }
.met-gloss-cab { font-size: 11.5px; color: var(--text-2); }
.met-gloss-cab code { color: var(--accent); }
.met-cods { display: flex; flex-wrap: wrap; gap: 3px 12px; margin-top: 3px; }
.met-cods span { font-size: 11px; color: var(--muted); }
.met-cods code {
  color: var(--text-2);
  background: var(--surface-2);
  padding: 0 4px;
  border-radius: 3px;
}
.met-numerica { font-style: italic; }

/* Nota de divergência já investigada: fica ANTES do glossário, porque quase
   sempre serve para explicar por que a fórmula contradiz o dicionário. */
.met-nota {
  margin: 8px 0 0;
  padding: 6px 9px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-2);
  background: var(--surface-2);
  border-left: 2px solid #d29922;
  border-radius: 3px;
}

/* Apelidos das fórmulas de 1980. Ficam ENTRE a fórmula e o glossário porque é
   nessa ordem que se lê: a fórmula fala em 'part', o apelido diz o que é, e o
   glossário diz o que a variável do IBGE significa. */
.met-apelidos {
  margin-top: 9px;
  padding: 7px 9px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.met-ap-cab {
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 5px;
}
.met-apelido {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  padding: 3px 0;
  border-top: 1px solid var(--border);
}
.met-apelido:first-of-type { border-top: 0; }
.met-ap-nome {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  color: #d29922;
}
.met-ap-def {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-2);
  overflow-wrap: anywhere;
}
.met-ap-desc { font-size: 11px; color: var(--muted); }
.met-ap-nota { flex: 1 1 100%; font-size: 10.5px; color: var(--muted); line-height: 1.45; }

/* Rótulo que diverge do dicionário do IBGE. Dito, e não trocado em silêncio:
   quem confere a conta contra o dicionário precisa saber onde eles discordam. */
.met-flag-corr { color: var(--accent); border-color: var(--accent); }
.met-correcao {
  margin-top: 3px;
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--muted);
  border-left: 2px solid var(--accent);
  padding-left: 7px;
}

/* ------------------------------------------- controles do painel lateral */
.sb-linha {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.sb-linha label {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  min-width: 42px;
}
.sb-linha select {
  flex: 1;
  min-width: 0;
  padding: 4px 6px;
  font-family: inherit;
  font-size: 11.5px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  cursor: pointer;
}

#base-nota {
  margin: 6px 0 0;
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--muted);
}

/* Baixar dado e imagem: barra de cima, junto do que define o recorte. Mesma
   barra segmentada dos seletores de censo e de nivel, para ler como um grupo. */
#sel-baixar {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
#sel-baixar button {
  padding: 5px 10px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--text-2);
  background: var(--surface-2);
  border: none;
  border-right: 1px solid var(--border);
  cursor: pointer;
}
#sel-baixar button:last-child { border-right: none; }
#sel-baixar button:hover { color: var(--text); background: var(--surface); }
#sel-baixar button:disabled { opacity: 0.4; cursor: default; }

/* ----------------------------------------------------- pirâmide etária */
/* Duas cores fixas em vez da paleta do mapa: aqui elas codificam sexo, que é
   categórico, e não intensidade. Reusar a rampa do coroplético sugeriria uma
   ordem que não existe. */
.pir-h { fill: #4a7fb5; }
.pir-m { fill: #c2705f; }
:root[data-theme="claro"] .pir-h { fill: #3d6f9e; }
:root[data-theme="claro"] .pir-m { fill: #b05c4b; }

.pir-svg {
  display: block;
  width: 100%;
  height: auto;
  margin: 2px 0 8px;
  overflow: visible;
}
.pir-grade { stroke: var(--border); stroke-width: 1; }
.pir-idade { fill: var(--muted); font-size: 8.5px; }
.pir-eixo  { fill: var(--muted); font-size: 9px; }

.pir-legenda {
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: var(--text-2);
  margin: 6px 0 2px;
}
.pir-legenda span { display: inline-flex; align-items: center; gap: 4px; }
.pir-chip {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  /* <i> não é SVG: o fill das regras acima não o pinta */
  background: #4a7fb5;
}
.pir-chip.pir-m { background: #c2705f; }
:root[data-theme="claro"] .pir-chip.pir-h { background: #3d6f9e; }
:root[data-theme="claro"] .pir-chip.pir-m { background: #b05c4b; }

/* ------------------------------------------- página de metodologia geral */
/* Texto corrido, não cartões: aqui se lê do começo ao fim, ao contrário da
   página de fórmulas, que se consulta. */
/* especificidade de id: #met-main ja define max-width, e classe sozinha
   perderia para ele. Texto corrido pede linha mais curta que a pagina de
   cartoes, que se consulta em vez de ler. */
#met-main.texto-longo { max-width: 780px; }
.texto-longo { font-size: 14px; line-height: 1.62; }
.texto-longo .lede {
  font-size: 15.5px;
  color: var(--text);
  border-left: 3px solid var(--accent);
  padding-left: 12px;
  margin: 4px 0 20px;
}
.texto-longo section { margin: 34px 0; }
.texto-longo h2 {
  font-size: 17px;
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.texto-longo h3 { font-size: 14px; margin: 22px 0 6px; color: var(--text-2); }
.texto-longo p { margin: 0 0 12px; color: var(--text-2); }
.texto-longo li { margin-bottom: 7px; color: var(--text-2); }
.texto-longo strong { color: var(--text); font-weight: 600; }
.texto-longo code {
  font-size: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0 3px;
  color: var(--accent);
}
.texto-longo a { color: var(--accent); }

/* sumário: âncoras da própria página */
.sumario {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 0 0 8px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 12.5px;
}

/* Regra destacada: o que se deve levar desta seção, quando há uma frase que
   resume o aprendizado e não só descreve o procedimento. */
.texto-longo .regra {
  border-left: 3px solid #d29922;
  padding: 8px 0 8px 12px;
  background: var(--surface-2);
  border-radius: 0 4px 4px 0;
  color: var(--text);
}

.tab { width: 100%; border-collapse: collapse; margin: 4px 0 16px; font-size: 13px; }
.tab th, .tab td {
  text-align: left;
  padding: 6px 9px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  color: var(--text-2);
}
.tab th { color: var(--muted); font-size: 11.5px; font-weight: 600;
          text-transform: uppercase; letter-spacing: 0.04em; }
.tab td:first-child { color: var(--text); }
.tab code { white-space: nowrap; }

.rodape-nota {
  margin-top: 40px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--muted);
}


/* ============================================================ */
/* Pirâmide etária: quadro flutuante sobre o mapa                */
/* ============================================================ */
/* Ela é a única coisa do painel que se lê COMPARANDO com o mapa — "esta área é
   mais velha que a vizinha?" — e presa na coluna da direita obrigava a tirar os
   olhos do mapa e voltar. Arrastável pela cabeça, porque no zoom certo ela tapa
   exatamente a unidade que se acabou de clicar. */
#pir-panel {
  position: absolute;
  z-index: 5;
  right: 14px;
  /* Canto inferior direito. Estava no alto, onde disputava com o controle de
     zoom do MapLibre; embaixo a unica coisa por perto e a atribuicao do
     basemap, e o 26px de folga passa por cima dela sem cobri-la. A legenda
     mora no canto inferior ESQUERDO, entao os dois quadros nao se encontram. */
  bottom: 26px;
  max-height: calc(100% - 150px);
  overflow-y: auto;
  width: 268px;
  background: var(--overlay);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
#pir-cabeca {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px 7px 11px;
  border-bottom: 1px solid var(--border);
  cursor: move;
  user-select: none;
}
#pir-titulo {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#pir-fechar {
  flex: none;
  width: 20px;
  height: 20px;
  padding: 0;
  font-size: 15px;
  line-height: 1;
  color: var(--muted);
  background: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
#pir-fechar:hover { color: var(--text); background: var(--surface-2); }
#pir-box { padding: 4px 11px 10px; }
/* o título "Estrutura etária" já está na cabeça do quadro */
#pir-box .tema-titulo { display: none; }

/* Na montagem da figura e no modo limpo o quadro sai: os dois existem para produzir
   uma figura do mapa, e a pirâmide é outra figura. */
#map-panel.modo-limpo #pir-panel { display: none; }

@media (max-width: 900px) {
  #pir-panel { right: 8px; top: auto; bottom: 8px; width: 230px; }
}


/* Link dentro do rodapé do painel (o geobr). Sem isto ele sai na cor padrão do
   navegador sobre um texto já esmaecido, e some. */
#app-footer a {
  color: var(--text-2);
  text-decoration: underline;
  text-decoration-color: var(--muted);
  text-underline-offset: 2px;
}
#app-footer a:hover { color: var(--accent); text-decoration-color: var(--accent); }


/* ============================================================ */
/* Barra de controles do mapa, sempre visível                   */
/* ============================================================ */
/* Paleta e base da escala mudam a leitura do mapa tanto quanto o indicador, e
   viviam escondidas na barra lateral enquanto controles que só valem no modo
   gráfico tinham barra própria. Agora é uma barra só, e o que não se aplica
   some em vez de aparecer inerte.

   Ela se desloca com a barra lateral: --sb-larg é a largura que o painel de
   indicadores ocupa no momento. */
/* A coluna do indicador nao fica mais por cima do mapa, entao a barra comeca
   sempre na borda do painel. A variavel fica porque o calculo de max-width
   depende dela. */
#map-panel { --sb-larg: 10px; }

#mapa-controles {
  position: absolute;
  z-index: 4;
  top: 10px;
  left: var(--sb-larg);
  max-width: calc(100% - var(--sb-larg) - 200px);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 7px 9px;
  background: var(--overlay);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  font-size: 11px;
  color: var(--muted);
  transition: left 0.18s ease;
}
#mapa-controles label { display: inline-flex; align-items: center; gap: 4px; }
#mapa-controles select {
  margin-left: 0;
  max-width: 165px;
  font-family: inherit;
  font-size: 11px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 4px;
}
/* "Mostrar" e "Cortes" só existem com um recorte: sem ele não há filhos que
   escolher nem recorte sobre o qual calcular os cortes de cor.
   O seletor precisa do #mapa-controles: '#mapa-controles label' acima vale
   1-0-1 e ganharia de um '.so-foco' solto, deixando os dois sempre à vista. */
#mapa-controles .so-foco { display: none; }
body.com-foco #mapa-controles .so-foco { display: inline-flex; }

/* a nota da base da escala sai do fluxo, senão estica a barra sobre o título */
#mapa-controles #base-nota {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 300px;
  margin: 0;
  padding: 6px 9px;
  background: var(--overlay);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
}
/* O modo limpo esconde a barra, MENOS enquanto se monta a figura: é ali que
   estão o canto da legenda e os cortes, e perdê-los junto com o basemap
   deixaria a figura sem controle nenhum. */
#map-panel.modo-limpo #mapa-controles { display: none; }
body.editando-figura #map-panel.modo-limpo #mapa-controles { display: flex; }

/* ============================================================ */
/* Painéis colapsáveis                                          */
/* ============================================================ */
/* Os dois somam 590 px e cobrem metade da tela num notebook. O mapa é a
   informação: recolher devolve o espaço a ele. A aba fica na borda, presa ao
   painel do mapa, para continuar clicável com o painel fechado. */
.aba {
  position: absolute;
  z-index: 6;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 46px;
  padding: 0;
  display: grid;
  place-items: center;
  font-size: 13px;
  line-height: 1;
  color: var(--text-2);
  background: var(--overlay);
  border: 1px solid var(--border);
  cursor: pointer;
}
.aba:hover { color: var(--text); background: var(--surface); }

#sb-toggle {
  left: 270px;
  border-radius: 0 5px 5px 0;
  transition: left 0.18s ease;
}
body.sb-fechada #sb-toggle { left: 0; }

/* o da direita mora no #app-layout, que é o pai do painel da direita */
#rp-toggle {
  right: 320px;
  border-radius: 5px 0 0 5px;
  transition: right 0.18s ease;
}
body.rp-fechada #rp-toggle { right: 0; }

body.sb-fechada #sidebar { display: none; }
body.rp-fechada #right-panel { display: none; }

/* no modo limpo as abas somem junto com os painéis */
#map-panel.modo-limpo #sb-toggle { display: none; }

/* ---------------------------------------- 'i' e ficha do indicador */
.ind-info {
  flex: 0 0 auto;
  align-self: flex-start;
  margin-left: auto;
  width: 14px;
  height: 14px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  font-size: 9px;
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  color: var(--muted);
}
.ind-opcao:hover .ind-info { color: var(--text); border-color: var(--muted); }

#ind-ficha {
  position: fixed;
  z-index: 40;
  width: 330px;
  max-height: 70vh;
  overflow-y: auto;
  padding: 11px 13px;
  background: var(--overlay);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-2);
  pointer-events: none;   /* o mouse esta sobre o 'i': o balao nao pode roubar */
}
#ind-ficha h4 { margin: 0 0 3px; font-size: 12.5px; color: var(--text); }
#ind-ficha p { margin: 0 0 7px; }
#ind-ficha .fi-anos { color: var(--muted); font-size: 10.5px; }
#ind-ficha .fi-marca { color: var(--text); }
#ind-ficha .fi-nota { color: var(--muted); font-style: italic; }
#ind-ficha .fi-formula {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 2px 8px;
  margin: 0 0 7px;
  font-size: 10.5px;
}
#ind-ficha dt { color: var(--muted); }
#ind-ficha dd {
  margin: 0;
  font-family: var(--font-mono);
  color: var(--text);
  overflow-wrap: anywhere;
}

/* ------------------------------- a lista de indicadores, ate embaixo */
/* Com a barra lateral servindo só ao indicador, a lista pode usar toda a altura
   que sobra abaixo do botão. Fração de viewport (72vh) parava sempre antes do
   fim, e cada vez mais longe quanto maior a tela: numa de 1080 px sobravam 161
   px de coluna vazia. '--lista-alt' é medido em abrirLista(), a partir do topo
   real da lista, porque esse topo depende do botão — que tem uma ou duas linhas
   conforme o nome do indicador. */
#ind-lista { max-height: var(--lista-alt, calc(100dvh - 160px)); }