/* ==========================================================================
   botize-mundo — o CSS do motor: o palco, os rótulos presos à cena, o modo leve.
   --------------------------------------------------------------------------
   Lê os tokens do produto que o abre (`--fundo`, `--tinta`, `--acento`, as fontes)
   com um valor de reserva para cada um, para a vitrine e a demonstração abrirem
   sem nenhum token definido. A etiqueta, a fita e os modos são do produto; a régua,
   a bússola e o painel da praça (as peças do HUD que o motor pinta) ficam aqui, no fim.

   Toda mistura de cor tem RESERVA (0.3.2): a declaração com `color-mix()` vem depois da
   mesma propriedade sem a mistura. O navegador que não mistura (Safari até 16.1) descarta
   a segunda e fica com a primeira — o rótulo, a régua, a bússola e o painel da praça
   continuam com fundo, opaco. O `teste-mundo.mjs` (guard `css-reserva`) cobra, com isca.
   ========================================================================== */

.bm-palco {
  position: relative;
  width: 100%;
  min-height: 420px;
  height: clamp(420px, 62vh, 760px);
  overflow: hidden;
  border-radius: var(--r-lg, 8px);
  background: var(--fundo-fundo, #f0ece8);
  box-shadow: var(--elev-1, 0 0 0 1px rgba(0, 0, 0, .08));
  touch-action: none;
  user-select: none;
}
.bm-palco.bm-cheio { height: 100%; min-height: 0; border-radius: 0; }

.bm-3d { position: absolute; inset: 0; }
.bm-3d[hidden] { display: none; }
.bm-tela { display: block; width: 100% !important; height: 100% !important; outline: none; }
.bm-tela:focus-visible { box-shadow: var(--anel-foco, 0 0 0 3px rgba(218, 153, 44, .35)); }

/* os rótulos: HTML sobre o canvas, projetado a cada quadro */
.bm-rotulos { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.bm-rotulo {
  position: absolute; left: 0; top: 0; will-change: transform;
  font-family: var(--fonte-ui, Inter, system-ui, sans-serif);
  font-size: 12px; line-height: 1.25; white-space: nowrap;
  color: var(--tinta, #12161e);
  text-shadow: 0 0 2px var(--fundo-fundo, #f0ece8), 0 0 6px var(--fundo-fundo, #f0ece8);
  transition: opacity 160ms ease;
}
/* o descongestionamento (rotulos.js): quem cruza um rótulo mais importante some por opacidade, nunca de supetão */
.bm-rotulo-oculto { opacity: 0; pointer-events: none; }
/* o fio da etiqueta (ADR-048, decisão 13): uma linha tracejada em latão, do item até a etiqueta */
.bm-fios { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.bm-fio { stroke: var(--acento, #da992c); stroke-width: 1.5px; stroke-dasharray: 4 4; fill: none; }

.bm-rotulo-local { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 3px 7px;
  background: var(--superficie, #fff); background: color-mix(in oklab, var(--superficie, #fff) 88%, transparent); border-radius: var(--r-md, 5px);
  box-shadow: 0 0 0 1px var(--borda-sutil, rgba(0, 0, 0, .08)); text-shadow: none; }
.bm-rotulo-local b { font-weight: 600; font-size: 12.5px; }
.bm-rotulo-local span { font-size: 11px; color: var(--tinta-2, #3f424a); font-variant-numeric: tabular-nums; }
.bm-rotulo-local[data-tom="grave"] span { color: var(--grave, #a01e23); }
.bm-rotulo-local[data-tom="atencao"] span { color: var(--atencao, #a05000); }
.bm-rotulo-local[data-tom="laranja"] span { color: var(--laranja, #b33c00); }
.bm-rotulo-local[data-tom="ok"] span { color: var(--ok, #006436); }
.bm-rotulo-local .bm-preco { color: var(--acento, #a16100); font-weight: 600; }
.bm-rotulo-van { padding: 2px 6px; border-radius: 999px; background: var(--marca, #2d56b6); color: var(--tinta-inversa, #fdfbfa);
  font-size: 11px; font-weight: 600; text-shadow: none; font-variant-numeric: tabular-nums; }
.bm-rotulo-bandeira, .bm-rotulo-sobra { padding: 1px 6px; border-radius: 999px; background: var(--tinta, #12161e); color: var(--tinta-inversa, #fdfbfa);
  font-size: 11px; font-weight: 700; text-shadow: none; }
.bm-cinema .bm-rotulo-local span { display: none; }
/* a facção que acabou de entrar no mapa (0.2.0): o rótulo acende em latão por uns segundos */
.bm-rotulo-local.bm-rotulo-novo { box-shadow: 0 0 0 2px var(--acento, #da992c); box-shadow: 0 0 0 2px var(--acento, #da992c), 0 0 18px 2px color-mix(in oklab, var(--acento, #da992c) 55%, transparent);
  animation: bm-acende 1.2s ease-out 3; }
/* so brilho e opacidade: o rotulo e posicionado por `transform` (rotulos.js) e animar transform o mandaria para o canto */
@keyframes bm-acende { 0% { opacity: .2; box-shadow: 0 0 0 0 var(--acento, #da992c); } 60% { opacity: 1; box-shadow: 0 0 0 4px var(--acento, #da992c); box-shadow: 0 0 0 4px var(--acento, #da992c), 0 0 24px 4px color-mix(in oklab, var(--acento, #da992c) 60%, transparent); } 100% { opacity: 1; } }

/* --------------------------------------------------------------------------
   A cidade (0.3.0, ADR-048 decisão 5): os rótulos por nível de leitura. A camada
   leva `data-nivel` (rotulos.js → `nivel()`): panorama · bairro · quadra. O HUD é
   papel (ADR-050 decisão 6): superfície a 92 %, borda sutil, nunca vidro.
   -------------------------------------------------------------------------- */
/* a placa de bairro: o nome e a palavra do pior status */
.bm-rotulo-bairro { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 3px 8px;
  background: var(--superficie, #fff); background: color-mix(in oklab, var(--superficie, #fff) 92%, transparent); border-radius: var(--r-md, 5px);
  box-shadow: 0 0 0 1px var(--borda-sutil, rgba(0, 0, 0, .08)); text-shadow: none; }
.bm-rotulo-bairro b { font-weight: 600; font-size: 13px; }
.bm-rotulo-bairro span { font-size: 11px; color: var(--tinta-2, #3f424a); }
.bm-rotulo-bairro[data-tom="grave"] span { color: var(--grave, #a01e23); }
.bm-rotulo-bairro[data-tom="atencao"] span { color: var(--atencao, #a05000); }
.bm-rotulo-bairro[data-tom="laranja"] span { color: var(--laranja, #b33c00); }
.bm-rotulo-bairro[data-tom="ok"] span { color: var(--ok, #006436); }
/* o totem: o número da praça em Fraunces tabular e a palavra embaixo; no panorama o número cresce e a palavra encolhe */
.bm-rotulo-totem { display: flex; flex-direction: column; align-items: center; gap: 0; }
.bm-rotulo-totem .numero { font-family: var(--fonte-display, Fraunces, Georgia, serif); font-variant-numeric: tabular-nums;
  font-size: 16px; font-weight: 600; line-height: 1.1; }
.bm-rotulo-totem .palavra { font-size: 11px; color: var(--tinta-2, #3f424a); }
.bm-rotulos[data-nivel="panorama"] .bm-rotulo-totem .numero { font-size: 22px; }
.bm-rotulos[data-nivel="panorama"] .bm-rotulo-totem .palavra { font-size: 10px; }
/* o nome da avenida: discreto, sem fundo (o halo do rótulo basta), itálico leve */
.bm-rotulo-avenida { font-size: 11px; font-style: italic; font-weight: 500; letter-spacing: .01em; color: var(--tinta-3, #69625b);
  text-shadow: 0 0 2px var(--fundo-fundo, #f0ece8), 0 0 5px var(--fundo-fundo, #f0ece8), 0 0 10px var(--fundo-fundo, #f0ece8); }
/* o lugar (a praça, a matriz): o nome em papel */
.bm-rotulo-lugar { font-size: 12px; font-weight: 600; padding: 2px 7px;
  background: var(--superficie, #fff); background: color-mix(in oklab, var(--superficie, #fff) 92%, transparent); border-radius: var(--r-md, 5px);
  box-shadow: 0 0 0 1px var(--borda-sutil, rgba(0, 0, 0, .08)); text-shadow: none; }
/* a etiqueta temporária do amarrado (o pairar, no nível Quadra): `.codigo` em mono, `.pecas` e `.prazo` embaixo */
.bm-rotulo-amarrado { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 3px 7px;
  background: var(--superficie, #fff); background: color-mix(in oklab, var(--superficie, #fff) 92%, transparent); border-radius: var(--r-md, 5px);
  box-shadow: 0 0 0 1px var(--borda-sutil, rgba(0, 0, 0, .08)); text-shadow: none; }
.bm-rotulo-amarrado .codigo, .bm-rotulo-amarrado code { font-family: var(--fonte-mono, 'IBM Plex Mono', monospace); font-size: 11px; font-weight: 600; }
.bm-rotulo-amarrado .pecas, .bm-rotulo-amarrado .prazo { font-size: 11px; color: var(--tinta-2, #3f424a); font-variant-numeric: tabular-nums; }
.bm-rotulo-amarrado[data-tom="grave"] .prazo { color: var(--grave, #a01e23); }
.bm-rotulo-amarrado[data-tom="atencao"] .prazo { color: var(--atencao, #a05000); }
.bm-rotulo-amarrado[data-tom="laranja"] .prazo { color: var(--laranja, #b33c00); }
.bm-rotulo-amarrado[data-tom="ok"] .prazo { color: var(--ok, #006436); }
/* o responsável na placa da casa: só no nível Quadra */
.bm-rotulos .bm-responsavel { display: none; font-size: 11px; color: var(--tinta-2, #3f424a); }
.bm-rotulos[data-nivel="quadra"] .bm-responsavel { display: block; }

/* o modo leve */
.bm-leve-camada { position: absolute; inset: 0; overflow: auto; padding: 8px; }
.bm-leve-camada[hidden] { display: none; }
.bm-leve { width: 100%; height: auto; max-height: calc(100% - 28px); display: block; font-family: var(--fonte-ui, Inter, system-ui, sans-serif); }
.bm-leve-base { fill: #a9b9ac; }
.bm-leve-grade { stroke: #93a596; stroke-width: 1; opacity: .5; }
.bm-leve-pesponto { stroke: #1d4094; stroke-width: 2; stroke-dasharray: 8 6; opacity: .8; }
.bm-leve-matriz { fill: #2d56b6; }
.bm-leve-oficina { fill: #f0ece8; stroke: #3f424a; stroke-width: 1.5; }
.bm-leve-local { cursor: pointer; outline: none; }
.bm-leve-local:focus-visible circle:first-child, .bm-leve-local.selecionado circle:first-child { stroke: #da992c; stroke-width: 5; }
.bm-leve-local.novo { transform-box: fill-box; transform-origin: center; animation: bm-nasce .9s cubic-bezier(.34, 1.56, .64, 1) 1; }
@keyframes bm-nasce { from { transform: scale(.1); opacity: 0; } to { transform: none; opacity: 1; } }
.bm-leve-nome { font-size: 13px; font-weight: 600; fill: #12161e; }
.bm-leve-sub { font-size: 11px; fill: #3f424a; }
.bm-leve-bandeira { font-size: 12px; font-weight: 700; fill: #a01e23; }
.bm-leve-bandeira-haste { fill: #cf4040; stroke: #a01e23; stroke-width: 1.2; }
.bm-leve-preco { font-size: 12px; font-weight: 700; fill: #7d4700; }
.bm-leve-nota { margin: 6px 0 0; font-size: 12px; color: var(--tinta-3, #69625b); }
/* as visões no leve (ADR-050, decisão 4): o que não interessa ao modo apaga — as marcas perdem cor e peso; o nome e os
   números ficam em tinta cheia, porque continuam sendo os mesmos do 3D */
.bm-leve-local.bm-leve-apagado > circle, .bm-leve-local.bm-leve-apagado > rect, .bm-leve-local.bm-leve-apagado > path,
.bm-leve-amarrado.bm-leve-apagado { opacity: .35; filter: saturate(.3); }

/* o modo tabela */
.bm-tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.bm-tabela caption { text-align: left; font-weight: 600; padding: 6px 0; }
.bm-tabela th, .bm-tabela td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--borda, #dedad5); }
.bm-tabela td.num { text-align: right; font-variant-numeric: tabular-nums; }
.bm-tabela tr[tabindex] { cursor: pointer; }
.bm-tag { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; background: var(--neutro-bg, #f0ece8); color: var(--neutro, #3f424a); }
.bm-tag.ok { background: var(--ok-bg, #e6f2ea); color: var(--ok, #006436); }
.bm-tag.atencao { background: var(--atencao-bg, #fbeedc); color: var(--atencao, #a05000); }
.bm-tag.grave { background: var(--grave-bg, #f9e3e2); color: var(--grave, #a01e23); }
.bm-tag.laranja { background: var(--laranja-bg, #fbe8d8); color: var(--laranja, #b33c00); }

/* Os olhos do painel (a palavra pequena acima do nome: Etiqueta, Facção, Praça, Pendências) e a etiqueta vazia
   desenhada: o olho em versalete espaçado, a frase de abertura em Fraunces, os gestos como fichas com a explicação ao
   lado — papel, sem vidro (ADR-050). Tokens do produto com reserva, nos dois temas. */
.bm-olho { font-family: var(--fonte-ui, Inter, system-ui, sans-serif); font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tinta-3, #69625b); margin: 0 0 6px; }
.bm-etq-vazia { display: flex; flex-direction: column; gap: 10px; padding: 2px 0 4px; font-family: var(--fonte-ui, Inter, system-ui, sans-serif); color: var(--tinta, #12161e); }
.bm-etq-vazia .bm-olho { margin: 0; }
.bm-etq-abertura { margin: 0; font-family: var(--fonte-display, Fraunces, Georgia, serif); font-weight: 600; font-size: 19px; line-height: 1.25;
  letter-spacing: -.005em; color: var(--tinta, #12161e); text-wrap: balance; }
.bm-etq-nota { margin: 0; font-size: 13px; line-height: 1.45; color: var(--tinta-2, #3f424a); }
.bm-etq-gestos { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bm-etq-gesto { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 10px; padding-top: 8px;
  border-top: 1px solid var(--borda-sutil, rgba(0, 0, 0, .08)); font-size: 13px; line-height: 1.45; color: var(--tinta-2, #3f424a); }
.bm-etq-gesto:first-child { border-top: 0; padding-top: 0; }
.bm-etq-ficha { display: inline-block; min-width: 62px; text-align: center; padding: 3px 9px 4px; border-radius: 6px;
  font-family: var(--fonte-mono, 'IBM Plex Mono', ui-monospace, monospace); font-size: 11px; font-weight: 600; letter-spacing: .02em; line-height: 1.2;
  color: var(--tinta, #12161e); background: var(--superficie-2, #f1ede8); border: 1px solid var(--borda-sutil, rgba(0, 0, 0, .10));
  box-shadow: inset 0 -1px 0 var(--borda-sutil, rgba(0, 0, 0, .10)); white-space: nowrap; }
.bm-etq-diz { min-width: 0; }
/* A etiqueta como sistema (o contêiner que o produto dá recebe `bm-etiqueta` ao ser pintada): o olho, o nome em
   Fraunces, o subtítulo, as linhas rótulo/valor com fio de cabelo, a lista de amarrados em fileiras, as ações.
   Os `.tag` (o status em palavra) e os `.bt` continuam do produto. */
.bm-etiqueta { font-family: var(--fonte-ui, Inter, system-ui, sans-serif); color: var(--tinta, #12161e); }
.bm-etiqueta h2 { margin: 0 0 2px; font-family: var(--fonte-display, Fraunces, Georgia, serif); font-weight: 600; font-size: 20px; line-height: 1.2;
  letter-spacing: -.005em; color: var(--tinta, #12161e); text-wrap: balance; }
.bm-etiqueta > p.ajuda { margin: 0 0 10px; font-size: 13px; line-height: 1.45; color: var(--tinta-2, #3f424a); }
.bm-etiqueta .mundo-etq-linhas { display: flex; flex-direction: column; gap: 0; margin: 10px 0 12px; }
.bm-etiqueta .mundo-etq-linha { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 12px;
  padding: 7px 0; border-bottom: 0; border-top: 1px solid var(--borda-sutil, rgba(0, 0, 0, .08)); font-size: 13px; line-height: 1.35; }
.bm-etiqueta .mundo-etq-linha:first-child { border-top: 0; padding-top: 2px; }
.bm-etiqueta .mundo-etq-linha > span:first-child { color: var(--tinta-3, #69625b); font-size: 12px; letter-spacing: .01em; }
.bm-etiqueta .mundo-etq-linha strong, .bm-etiqueta .mundo-etq-linha > :last-child { font-weight: 600; color: var(--tinta, #12161e); font-variant-numeric: tabular-nums; text-align: right; }
.bm-etiqueta .mundo-etq-linha .selo-det { font-weight: 400; color: var(--tinta-3, #69625b); font-size: 12px; margin-left: 4px; }
.bm-etiqueta .mundo-etq-lista { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bm-etiqueta .mundo-etq-lista li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 8px 10px; border-radius: var(--r-md, 8px);
  background: var(--superficie-2, #f1ede8); border: 1px solid transparent; font-size: 12.5px; line-height: 1.35; color: var(--tinta-2, #3f424a); cursor: pointer; }
.bm-etiqueta .mundo-etq-lista li b { font-family: var(--fonte-mono, 'IBM Plex Mono', ui-monospace, monospace); font-size: 12px; font-weight: 600; color: var(--tinta, #12161e); }
.bm-etiqueta .mundo-etq-lista li .tag { margin-left: auto; }
.bm-etiqueta .mundo-etq-lista li:hover { border-color: var(--borda, rgba(0, 0, 0, .14)); }
.bm-etiqueta .mundo-etq-lista li:focus-visible { outline: none; box-shadow: var(--anel-foco, 0 0 0 3px rgba(45, 86, 182, .35)); }
.bm-etiqueta .mundo-etq-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--borda-sutil, rgba(0, 0, 0, .08)); }
.bm-etiqueta .mundo-etq-acoes .bt { flex: 1 1 auto; justify-content: center; }
.bm-etiqueta p.ajuda + p.ajuda { margin-top: -4px; }

/* As portas de um lugar (0.4.0, ADR-051): um botão por tela que o lugar guarda, de fora a fora, o nome à esquerda e o
   número vivo à direita. E a lista dos lugares na etiqueta vazia: o caminho de quem não aponta no mapa. */
.bm-etiqueta .bm-portas { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 0; }
.bm-etiqueta .bm-porta { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; text-decoration: none; }
.bm-etiqueta .bm-porta-nome { min-width: 0; }
.bm-etiqueta .bm-portas + .mundo-etq-lista { margin-top: 12px; } /* a matriz: as portas, e só depois a lista de lotes */
.bm-etiqueta .mundo-etq-linhas + .bm-portas { margin-top: 0; }
.bm-etiqueta .bm-porta-numero { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 400; opacity: .82; font-size: 12px; }
.bm-etq-lugares { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--borda-sutil, rgba(0, 0, 0, .08)); }
.bm-etq-lugares .bm-olho { margin: 0; }
/* dois por linha, com cara de botão (o contorno do secundário): seis lugares em três fileiras. Soltos e sem contorno
   quebravam em quatro, e na janela baixa de um notebook só os dois primeiros apareciam */
.bm-etq-lugares-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.bm-etq-lugares-lista .bm-etq-lugar { width: 100%; min-width: 0; justify-content: flex-start; padding-left: 10px; padding-right: 10px;
  font-size: 13px; line-height: 1.2; text-align: left; white-space: normal; }

/* O totem pulsa UMA vez quando o numero muda numa leitura (mundo.js poe .bm-rotulo-pulsa por 1,5 s; ADR-050, decisao 8). So opacidade. */
.bm-rotulo-totem.bm-rotulo-pulsa { animation: bm-pulsa 1.2s ease-out 1; }
@keyframes bm-pulsa { 0% { opacity: .35; } 50% { opacity: 1; } 100% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .bm-rotulo { transition: none; }
  .bm-rotulo-local.bm-rotulo-novo, .bm-leve-local.novo, .bm-rotulo-totem.bm-rotulo-pulsa { animation: none; }
}

/* --------------------------------------------------------------------------
   A praça (0.3.0, ADR-049): o painel que abre ao tocar num totem — a pergunta, o
   número grande (Fraunces tabular), a palavra com o tom, as frases factuais e os
   gráficos em SVG próprio (graficos.js), cada um com a tabela equivalente. É papel
   (ADR-050, decisão 6): superfície a 92 %, borda sutil, --elev-2, sem backdrop-filter.
   Toque ≥ 44 px nos botões e nas linhas de lista. O contêiner (`montagem.praca`) é de
   quem abre o mundo; `.bm-praca-sobre` é a janela sobre a cidade (420–480 px no
   desktop; a tela inteira até 600 px). Os tokens vêm do produto, com reserva.
   -------------------------------------------------------------------------- */
.bm-praca-sobre { position: absolute; top: 12px; right: 12px; bottom: 12px; width: clamp(420px, 38%, 480px); z-index: 4; display: flex; align-items: flex-start; }
.bm-praca-sobre[hidden] { display: none; }
/* o painel tem a altura do conteúdo, até a do contêiner (aí rola por dentro); nunca estica para deixar vazio antes do botão */
.bm-praca { box-sizing: border-box; flex: 0 1 auto; min-height: 0; width: 100%; max-height: 100%; overflow: auto; display: flex; flex-direction: column; gap: 14px; padding: 16px;
  font-family: var(--fonte-ui, Inter, system-ui, sans-serif); font-size: 13px; line-height: 1.4; color: var(--tinta, #12161e);
  background: var(--superficie, #fff); background: color-mix(in oklab, var(--superficie, #fff) 92%, transparent); border-radius: var(--r-lg, 8px);
  box-shadow: var(--elev-2, 0 2px 6px rgba(0, 0, 0, .08), 0 10px 24px -10px rgba(0, 0, 0, .12), 0 0 0 1px rgba(0, 0, 0, .08)); }
/* o painel recebe o foco ao abrir (tabindex -1): o anel só quando o foco veio do teclado */
.bm-praca:focus { outline: none; }
.bm-praca:focus-visible { outline: 2px solid var(--acento, #da992c); outline-offset: -2px; }
.bm-praca-cabeca { display: flex; align-items: flex-start; gap: 8px; }
.bm-praca-titulos { flex: 1 1 auto; min-width: 0; }
.bm-praca-olho { margin: 0 0 2px; font-size: 12px; color: var(--tinta-3, #69625b); }
.bm-praca-pergunta { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.25; }
.bm-praca-fechar { flex: 0 0 auto; min-width: 44px; min-height: 44px; padding: 0 12px; font: inherit; font-weight: 600; color: var(--tinta-2, #3f424a);
  background: transparent; border: 1px solid var(--borda-sutil, rgba(0, 0, 0, .08)); border-radius: var(--r-md, 5px); cursor: pointer; }
.bm-praca-fechar:hover { background: var(--neutro-bg, #f0ece8); }
.bm-praca-fechar:focus-visible { outline: none; box-shadow: var(--anel-foco, 0 0 0 3px rgba(218, 153, 44, .35)); }
/* o número grande: Fraunces tabular (ADR-050, decisão 1), a palavra ao lado com o tom; a minilinha dos últimos 7 dias */
.bm-praca-totem { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 6px 16px; padding: 10px 12px; border-radius: var(--r-md, 5px);
  background: var(--superficie-2, #fdfbfa); box-shadow: 0 0 0 1px var(--borda-sutil, rgba(0, 0, 0, .08)); }
.bm-praca-numero-bloco { display: flex; flex-direction: column; gap: 2px; }
.bm-praca-numero { font-family: var(--fonte-display, Fraunces, Georgia, serif); font-variant-numeric: tabular-nums; font-size: 40px; line-height: 1; font-weight: 600; letter-spacing: -.01em; }
.bm-praca-palavra { font-size: 13px; color: var(--tinta-2, #3f424a); }
.bm-praca-detalhe { font-size: 12px; color: var(--tinta-3, #69625b); font-variant-numeric: tabular-nums; }
.bm-praca-totem[data-tom="grave"] .bm-praca-palavra { color: var(--grave, #a01e23); }
.bm-praca-totem[data-tom="atencao"] .bm-praca-palavra { color: var(--atencao, #a05000); }
.bm-praca-totem[data-tom="laranja"] .bm-praca-palavra { color: var(--laranja, #b33c00); }
.bm-praca-totem[data-tom="ok"] .bm-praca-palavra { color: var(--ok, #006436); }
.bm-praca-totem .bm-minilinha { color: var(--tinta-3, #69625b); margin-bottom: 6px; }
.bm-praca-porque { flex-basis: 100%; margin: 0; font-size: 12px; color: var(--tinta-3, #69625b); }
.bm-praca-frase, .bm-praca-aviso, .bm-grafico-nota { margin: 0; font-size: 13px; color: var(--tinta-2, #3f424a); }
.bm-praca-aviso { padding: 10px 12px; border-radius: var(--r-md, 5px); background: var(--neutro-bg, #f0ece8); }
.bm-praca-bloco { display: flex; flex-direction: column; gap: 4px; }
.bm-praca-sub { margin: 0; font-size: 13px; font-weight: 600; }
/* as listas (o que vence em até 2 dias, as leituras a confirmar): linhas de 44 px, tocáveis quando têm facção */
.bm-praca-lista { list-style: none; margin: 0; padding: 0; }
.bm-praca-lista li { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 6px; border-top: 1px solid var(--borda-sutil, rgba(0, 0, 0, .08)); border-radius: var(--r-md, 5px); }
.bm-praca-lista li[role="button"] { cursor: pointer; }
.bm-praca-lista li[role="button"]:hover, .bm-praca-lista li.bm-praca-realce { background: var(--acento-tenue, rgba(218, 153, 44, .12)); }
.bm-praca-lista li:focus-visible { outline: none; box-shadow: var(--anel-foco, 0 0 0 3px rgba(218, 153, 44, .35)); }
.bm-praca-codigo { font-family: var(--fonte-mono, 'IBM Plex Mono', ui-monospace, monospace); font-size: 12px; font-weight: 600; }
.bm-praca-quem { flex: 1 1 auto; min-width: 0; }
.bm-praca-quando { font-variant-numeric: tabular-nums; color: var(--tinta-2, #3f424a); white-space: nowrap; }
/* a tela dona: o par --papel-50 sobre --indigo-800, o mesmo do destaque (ADR-050, decisão 6, no guard contraste) */
.bm-praca-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 4px; }
.bm-praca-abrir { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--r-md, 5px); font-weight: 600; text-decoration: none;
  background: var(--indigo-800, #132d6c); color: var(--papel-50, #fdfbfa); }
.bm-praca-abrir:hover { filter: brightness(1.15); }
.bm-praca-abrir:focus-visible { outline: none; box-shadow: var(--anel-foco, 0 0 0 3px rgba(218, 153, 44, .35)); }

/* os gráficos (graficos.js): marcas finas, grade em fio de cabelo, texto em tinta — nunca na cor da série */
.bm-grafico { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.bm-grafico-titulo { font-size: 13px; font-weight: 600; color: var(--tinta, #12161e); line-height: 1.35; }
.bm-grafico-svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--fonte-ui, Inter, system-ui, sans-serif); }
.bm-grafico-eixo { stroke: var(--borda, #dedad5); stroke-width: 1; }
.bm-grafico-texto { fill: var(--tinta-2, #3f424a); font-size: 11px; font-variant-numeric: tabular-nums; }
.bm-grafico-valor { fill: var(--tinta, #12161e); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bm-grafico-valor-miudo { font-size: 10px; font-weight: 500; }
.bm-grafico-marca { fill: var(--marca, #2d56b6); }
.bm-grafico-segunda { fill: var(--acento, #a16100); }
.bm-grafico-linha { fill: none; stroke: var(--marca, #2d56b6); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.bm-grafico-area { fill: var(--marca, #2d56b6); opacity: .1; }
.bm-grafico-contexto { fill: none; stroke: var(--tinta-3, #69625b); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; opacity: .55; }
.bm-grafico-ponto { stroke: var(--superficie, #fff); stroke-width: 2; }
.bm-grafico-trilha { fill: var(--neutro-bg, #f0ece8); }
.bm-grafico-meta { stroke: var(--tinta, #12161e); stroke-width: 2; }
/* cor de status só para status (ADR-049): o tom pintado por classe, pelos tokens do produto */
.bm-grafico-tom-ok { fill: var(--ok, #006436); }
.bm-grafico-tom-atencao { fill: var(--atencao, #a05000); }
.bm-grafico-tom-grave { fill: var(--grave, #a01e23); }
.bm-grafico-tom-laranja { fill: var(--laranja, #b33c00); }
.bm-grafico-tom-neutro { fill: var(--neutro, #69625b); }
.bm-grafico-linha.bm-grafico-tom-ok { fill: none; stroke: var(--ok, #006436); }
.bm-grafico-linha.bm-grafico-tom-atencao { fill: none; stroke: var(--atencao, #a05000); }
.bm-grafico-linha.bm-grafico-tom-grave { fill: none; stroke: var(--grave, #a01e23); }
.bm-grafico-linha.bm-grafico-tom-laranja { fill: none; stroke: var(--laranja, #b33c00); }
.bm-grafico-linha.bm-grafico-tom-neutro { fill: none; stroke: var(--neutro, #69625b); }
.bm-grafico-area.bm-grafico-tom-ok, .bm-grafico-area.bm-grafico-tom-atencao, .bm-grafico-area.bm-grafico-tom-grave, .bm-grafico-area.bm-grafico-tom-laranja, .bm-grafico-area.bm-grafico-tom-neutro { opacity: .1; }
/* o alvo de toque: a linha inteira, transparente; o foco e o realce em latão, só na barra selecionada */
.bm-grafico-alvo { fill: transparent; outline: none; }
.bm-grafico-alvo[role="button"] { cursor: pointer; }
.bm-grafico-alvo:focus-visible { stroke: var(--acento, #da992c); stroke-width: 2; fill: var(--acento-tenue, rgba(218, 153, 44, .12)); }
.bm-grafico-linha-barra:hover .bm-grafico-barra { filter: brightness(1.08); }
.bm-grafico-realce .bm-grafico-barra { stroke: var(--acento, #da992c); stroke-width: 2; }
.bm-grafico-realce .bm-grafico-texto { fill: var(--tinta, #12161e); font-weight: 600; }
.bm-grafico-legenda { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11px; color: var(--tinta-2, #3f424a); }
.bm-grafico-chave { display: inline-block; width: 14px; height: 4px; border-radius: 2px; margin-right: 5px; vertical-align: middle; background: var(--marca, #2d56b6); }
.bm-grafico-chave-segunda { background: var(--acento, #a16100); }
.bm-grafico-chave-contexto { background: var(--tinta-3, #69625b); opacity: .55; }
.bm-grafico-chave-meta { width: 3px; height: 12px; background: var(--tinta, #12161e); }
.bm-grafico-chave.bm-grafico-tom-ok { background: var(--ok, #006436); }
.bm-grafico-chave.bm-grafico-tom-atencao { background: var(--atencao, #a05000); }
.bm-grafico-chave.bm-grafico-tom-grave { background: var(--grave, #a01e23); }
.bm-grafico-chave.bm-grafico-tom-laranja { background: var(--laranja, #b33c00); }
.bm-grafico-chave.bm-grafico-tom-neutro { background: var(--neutro, #69625b); }
/* a tabela equivalente, num <details>: a mesma verdade, para o leitor de tela e para quem prefere ler */
.bm-grafico-tabela { font-size: 12px; }
.bm-grafico-tabela summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--tinta-3, #69625b); }
.bm-grafico-tabela summary:focus-visible { outline: none; box-shadow: var(--anel-foco, 0 0 0 3px rgba(218, 153, 44, .35)); border-radius: var(--r-md, 5px); }
.bm-grafico-tabela table { width: 100%; border-collapse: collapse; }
.bm-grafico-tabela th, .bm-grafico-tabela td { text-align: left; padding: 5px 6px; border-bottom: 1px solid var(--borda-sutil, rgba(0, 0, 0, .08)); }
.bm-grafico-tabela th { color: var(--tinta-3, #69625b); font-weight: 600; font-size: 11px; }
.bm-grafico-tabela .num { text-align: right; font-variant-numeric: tabular-nums; }
/* a minilinha (o totem e o número grande): a contagem a partir de zero, na cor do texto que a cerca */
.bm-minilinha { display: block; }
.bm-minilinha-linha { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.bm-minilinha-fim { fill: currentColor; }
.bm-rotulo-totem .bm-minilinha { color: var(--tinta-3, #69625b); margin-top: 1px; }
.bm-rotulos[data-nivel="panorama"] .bm-rotulo-totem .bm-minilinha { display: none; }
/* no celular a praça é a tela inteira: papel opaco (a página não vaza por baixo), sem canto, rolando por dentro */
@media (max-width: 600px) {
  .bm-praca-sobre { position: fixed; inset: 0; width: auto; z-index: 40; align-items: stretch; }
  .bm-praca { flex: 1 1 auto; border-radius: 0; max-height: none; background: var(--superficie, #fff); }
}
@media (prefers-reduced-motion: reduce) {
  .bm-grafico-linha-barra:hover .bm-grafico-barra { filter: none; }
}

/* --------------------------------------------------------------------------
   A RÉGUA (0.3.0 · 6.C9 — ADR-050 decisão 5, ADR-048 decisão 7): UM instrumento numa
   linha, com cinco marcas; o número em Fraunces tabular, a palavra em Inter; o tom só
   onde há status (grave, atenção, laranja — o "ok" fica em tinta, como na prancha). É
   papel (ADR-050, decisão 6): superfície a 92 %, borda sutil, --elev-2, nunca vidro.
   Cada marca é um botão de 44 px que abre a praça dona. Onde a régua não cabe inteira,
   rola de lado (o celular). Os tokens vêm do produto, com reserva.
   -------------------------------------------------------------------------- */
.bm-regua { display: flex; align-items: stretch; gap: 2px; padding: 3px; min-height: 50px; overflow-x: auto; scrollbar-width: none;
  font-family: var(--fonte-ui, Inter, system-ui, sans-serif); color: var(--tinta, #12161e);
  background: var(--superficie, #fff); background: color-mix(in oklab, var(--superficie, #fff) 92%, transparent); border-radius: var(--r-lg, 8px);
  box-shadow: var(--elev-2, 0 2px 6px rgba(0, 0, 0, .08), 0 10px 24px -10px rgba(0, 0, 0, .12), 0 0 0 1px rgba(0, 0, 0, .08)); }
.bm-regua::-webkit-scrollbar { display: none; }
/* `flex: 1 0 auto`: a marca cresce para dividir a linha e NUNCA encolhe — onde a régua não cabe (o celular a 390 px) ela
   rola de lado em vez de sobrepor os números (visto na foto de 09/10 a 390 px) */
.bm-marca { position: relative; flex: 1 0 auto; display: inline-flex; align-items: baseline; justify-content: center; gap: 7px; min-height: 44px; min-width: 44px;
  padding: 4px 14px; margin: 0; border: 0; border-radius: var(--r-md, 5px); background: transparent; color: inherit; font: inherit; cursor: pointer;
  white-space: nowrap; text-align: left; }
.bm-marca + .bm-marca::before { content: ""; position: absolute; left: -1px; top: 10px; bottom: 10px; width: 1px; background: var(--borda-sutil, rgba(0, 0, 0, .08)); }
.bm-marca-numero { font-family: var(--fonte-display, Fraunces, Georgia, serif); font-variant-numeric: tabular-nums; font-size: 20px; font-weight: 600; line-height: 1; letter-spacing: -.01em; }
.bm-marca-palavra { font-size: 12px; color: var(--tinta-2, #3f424a); }
.bm-marca[data-tom="grave"] .bm-marca-numero { color: var(--grave, #a01e23); }
.bm-marca[data-tom="atencao"] .bm-marca-numero { color: var(--atencao, #a05000); }
.bm-marca[data-tom="laranja"] .bm-marca-numero { color: var(--laranja, #b33c00); }
@media (hover: hover) { .bm-marca:hover { background: var(--neutro-bg, #f0ece8); } }
.bm-marca:focus-visible { outline: none; box-shadow: var(--anel-foco, 0 0 0 3px rgba(218, 153, 44, .35)); }
/* a praça aberta: a marca dela fica sublinhada em latão */
.bm-marca[data-aberta="true"] { box-shadow: inset 0 -3px 0 var(--acento, #da992c); }
/* a visão (ADR-050, decisão 4): o que não interessa ao modo apaga, não some */
.bm-regua[data-modo="atrasos"] .bm-marca:not([data-praca="prazo"]), .bm-regua[data-modo="financeiro"] .bm-marca:not([data-praca="dinheiro"]) { opacity: .55; }
.bm-regua[data-modo="atrasos"] .bm-marca:not([data-praca="prazo"]) .bm-marca-numero, .bm-regua[data-modo="financeiro"] .bm-marca:not([data-praca="dinheiro"]) .bm-marca-numero { color: inherit; }

/* a bússola (ADR-048, decisão 7): aparece quando a câmera girou; a agulha aponta o norte; tocar volta */
.bm-bussola { width: 44px; height: 44px; padding: 0; margin: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  position: relative; color: var(--tinta, #12161e); background: var(--superficie, #fff); background: color-mix(in oklab, var(--superficie, #fff) 92%, transparent);
  box-shadow: var(--elev-2, 0 2px 6px rgba(0, 0, 0, .08), 0 10px 24px -10px rgba(0, 0, 0, .12), 0 0 0 1px rgba(0, 0, 0, .08)); }
.bm-bussola[hidden] { display: none; }
.bm-bussola-agulha { display: block; transition: transform 200ms ease; transform-origin: 50% 50%; }
.bm-bussola-norte { fill: var(--acento, #da992c); }
.bm-bussola-sul { fill: var(--tinta-3, #69625b); }
.bm-bussola-letra { position: absolute; top: 2px; left: 50%; transform: translateX(-50%); font-family: var(--fonte-ui, Inter, system-ui, sans-serif); font-size: 8px; font-weight: 700; line-height: 1; color: var(--tinta-3, #69625b); }
.bm-bussola:focus-visible { outline: none; box-shadow: var(--anel-foco, 0 0 0 3px rgba(218, 153, 44, .35)); }
@media (hover: hover) { .bm-bussola:hover { background: var(--superficie, #fff); } }
@media (prefers-reduced-motion: reduce) { .bm-bussola-agulha { transition: none; } }