/* O mapa com as nossas imagens (mapa-proprio.js): o crédito curto, o painel "Créditos" e a legenda do território. Veio do protótipo
   aprovado (_prototipo-obs-maplibre.css, 05/10/2026). */

/* o mar tratado do Blue Marble: é o fundo do mapa (a camada "fundo" de mapa-proprio.js e o contêiner), para o ladrilho que ainda não
   chegou sumir no mar; é cor da imagem, não da paleta */
:root { --mapa-mar: #060606; }
/* o contêiner do mapa ocupa o palco em qualquer ordem das folhas (o maplibre-gl.css põe .maplibregl-map { position: relative }) */
.fundo-mapa.maplibregl-map { position: absolute; inset: 0; }
.maplibregl-ctrl-bottom-left, .maplibregl-ctrl-bottom-right { display: none; } /* nada do controle da biblioteca: o crédito é o nosso */

/* ---------- o crédito: diz só o que está à mostra (mapa-proprio.js põe data-cr-ativo) ---------- */
/* só com o mapa à mostra: sem imagem não há o que creditar (antes, "Imagem: NASA" aparecia com o mapa ainda invisível). Um véu curto
   atrás da linha (a cor de fundo da casa a 86%, sumindo à esquerda e em cima): os traços do mapa passavam atrás do texto (1,07:1) */
#pa-creditos { display: flex; align-items: baseline; justify-content: flex-end; gap: 0; z-index: 3; padding: 6px 0 4px 32px; }
#pa-creditos::before { content: ''; position: absolute; z-index: -1; inset: -18px -16px -10px 0; pointer-events: none;
  background: linear-gradient(90deg, color-mix(in srgb, var(--ds-cor-fundo) 0%, transparent) 0, color-mix(in srgb, var(--ds-cor-fundo) 86%, transparent) 32px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16px); mask-image: linear-gradient(180deg, transparent 0, #000 16px); }
html:not([data-mapa-vivo]) #pa-creditos { opacity: 0; pointer-events: none; }
html[data-mapa-vivo] #pa-creditos { opacity: 1; }
/* as frases ocupam o mesmo lugar, alinhadas à direita: a troca é um esmaecer, nada se move */
.pa-cr-pilha { display: grid; justify-items: end; }
/* uma frase de cada vez: a que sai esmaece em 100 ms e só então a que entra aparece (antes as duas ficavam à mostra juntas, uma por
   cima da outra, no meio da troca) */
.pa-cr { grid-area: 1 / 1; white-space: nowrap; opacity: 0; transition: opacity 100ms cubic-bezier(0.2, 0, 0, 1); }
#pa-creditos[data-cr-ativo='foto'] [data-cr='foto'], #pa-creditos[data-cr-ativo='foto-relevo'] [data-cr='foto-relevo'],
#pa-creditos[data-cr-ativo='relevo'] [data-cr='relevo'], #pa-creditos[data-cr-ativo='pouso'] [data-cr='pouso'] { opacity: 1; transition-delay: 100ms; }
@media (prefers-reduced-motion: reduce) { .pa-cr { transition-timing-function: linear; } }
.pa-cr-abrir { display: inline; margin: 0; padding: 2px 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 46%, transparent);
  border-radius: 2px; transition: color var(--ds-dur-rapida) var(--ds-curva), background-color var(--ds-dur-rapida) var(--ds-curva); }
@media (hover: hover) { .pa-cr-abrir:hover { color: var(--ds-cor-texto); } }
.pa-cr-abrir:active { color: var(--ds-cor-texto); background-color: var(--ds-cor-realce); transition-duration: 0ms; }
.pa-cr-abrir:focus-visible { outline: 2px solid color-mix(in srgb, var(--ds-cor-texto) 72%, transparent); outline-offset: 2px; }
/* o painel dos avisos completos: abre ali mesmo, acima da linha, e sai pelo mesmo caminho; fecha com Esc e com o clique fora */
.pa-cr-painel { position: absolute; right: 16px; bottom: 34px; z-index: 4; width: min(400px, calc(100vw - 32px)); max-height: min(60vh, 420px); overflow-y: auto; overscroll-behavior: contain;
  padding: 16px 18px; border-radius: var(--ds-raio-grande); background: var(--ds-cor-superficie); box-shadow: inset 0 0 0 1px var(--ds-cor-borda);
  color: var(--ds-cor-texto-2); font-size: 12px; line-height: 16px; text-align: left;
  opacity: 0; transform: translateY(4px); transition: opacity 160ms var(--ds-curva), transform 160ms var(--ds-curva); }
.pa-cr-painel[data-aberto] { opacity: 1; transform: none; }
/* o foco que chega pelo teclado ao abrir mostra o anel (o clique, não) */
.pa-cr-painel:focus { outline: none; }
.pa-cr-painel:focus-visible { outline: 2px solid color-mix(in srgb, var(--ds-cor-texto) 72%, transparent); outline-offset: 2px; }
.pa-cr-titulo { margin: 0 0 10px; color: var(--ds-cor-texto); font-size: 13px; line-height: 18px; font-weight: 600; }
.pa-cr-painel ul { margin: 0; padding: 0; list-style: none; }
.pa-cr-painel li + li { margin-top: 8px; }
.pa-cr-termos { margin: 12px 0 0; }
.pa-cr-termos .link-texto { display: inline; padding: 2px 0; font-size: inherit; line-height: inherit; color: var(--ds-cor-texto-2);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 46%, transparent); }
/* hover e pressão do link dos termos (a regra acima tinha a mesma força da do hover da casa e vinha depois: o hover não mudava nada) */
@media (hover: hover) { .pa-cr-painel .pa-cr-termos .link-texto:hover { color: var(--ds-cor-texto); } }
.pa-cr-painel .pa-cr-termos .link-texto:active { color: var(--ds-cor-texto); background-color: var(--ds-cor-realce); transition-duration: 0ms; }
@media (prefers-reduced-motion: reduce) { .pa-cr-painel { transform: none; transition: opacity 160ms linear; } }
@media (max-width: 760px) {
  /* sem o logotipo do Mapbox, a linha vai até a margem esquerda da faixa */
  .obs #pa-creditos { left: 12px; right: 12px; }
  /* o painel desce sobre a folha, como um diálogo: o texto inteiro, sem rolagem (antes, 189 de 328 px) */
  .pa-cr-painel { right: 12px; bottom: auto; top: calc(var(--lp-topo) + 8px); max-height: calc(100svh - var(--lp-topo) - 24px); }
}
/* de 761 a 900 px a área do mapa à direita do painel de vidro é estreita: a linha e o painel aberto ficam nela (antes encostavam no
   vidro e cobriam o Município e o botão "Acessar o mapa"); a frase quebra se não couber */
@media (min-width: 761px) {
  /* a linha e a legenda com a largura do próprio texto, presas à direita: o véu de trás acompanha o texto (antes ia da borda do vidro
     até a direita, uma faixa de 800 px sobre o mapa, que o Alex leu como um contêiner cinza). O teto de largura mantém o texto fora do
     vidro mais largo, e a frase longa quebra ali dentro */
  .obs #pa-creditos, .obs .pa-legenda { left: auto; right: 16px; width: max-content; max-width: calc(100vw - var(--obs-esq) - var(--obs-largo, var(--obs-painel)) - 32px); padding-left: 48px; }
  #pa-creditos::before, .pa-legenda::before { background: linear-gradient(90deg, color-mix(in srgb, var(--ds-cor-fundo) 0%, transparent) 0, color-mix(in srgb, var(--ds-cor-fundo) 86%, transparent) 48px); }
  /* só a frase à mostra ocupa lugar: as outras ficam no mesmo canto, fora do fluxo, e a largura (com o véu) acompanha a frase */
  .pa-cr-pilha { position: relative; }
  .pa-cr { white-space: normal; text-align: right; position: absolute; right: 0; bottom: 0; }
  #pa-creditos[data-cr-ativo='foto'] [data-cr='foto'], #pa-creditos[data-cr-ativo='foto-relevo'] [data-cr='foto-relevo'], #pa-creditos[data-cr-ativo='relevo'] [data-cr='relevo'], #pa-creditos[data-cr-ativo='pouso'] [data-cr='pouso'] { position: relative; }
  .pa-cr-painel { width: min(400px, calc(100vw - var(--obs-esq) - var(--obs-painel) - 32px)); }
}
/* o alvo de toque do "Créditos": 44 px de altura (a faixa sobe mais do que desce: embaixo da linha começa a folha) */
@media (pointer: coarse) {
  .pa-cr-abrir { position: relative; }
  .pa-cr-abrir::after { content: ''; position: absolute; left: -10px; right: -10px; bottom: -4px; height: 46px; }
}

/* ---------- a legenda do território: só com o território à mostra (mapa-proprio.js põe data-territorio), acima do crédito, com o
   mesmo véu curto atrás ---------- */
.pa-legenda { position: absolute; z-index: 4; right: 16px; bottom: 34px; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 4px 14px; margin: 0;
  padding: 6px 0 2px 32px; color: var(--ds-cor-texto-2); font-size: 11px; line-height: 14px; pointer-events: none; opacity: 0; transition: opacity 200ms var(--ds-curva); }
.pa-legenda::before { content: ''; position: absolute; z-index: -1; inset: -18px -16px -2px 0; pointer-events: none;
  background: linear-gradient(90deg, color-mix(in srgb, var(--ds-cor-fundo) 0%, transparent) 0, color-mix(in srgb, var(--ds-cor-fundo) 86%, transparent) 32px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16px); mask-image: linear-gradient(180deg, transparent 0, #000 16px); }
html[data-mapa-vivo][data-territorio] .pa-legenda { opacity: 1; }
/* a legenda por cima da linha do crédito: o véu do crédito sobe 8 px acima dela e cobria a metade de baixo das letras (1,3 a 1,9:1,
   achado do auditor). O painel "Créditos" (z-index 4, depois no DOM) continua por cima das duas */
.pa-leg { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.pa-leg svg { width: 16px; height: 8px; flex: none; }
@media (prefers-reduced-motion: reduce) { .pa-legenda { transition: opacity 200ms linear; } }
@media (max-width: 760px) { .obs .pa-legenda { left: 12px; right: 12px; bottom: auto; top: calc(var(--lp-topo) + 30svh - 68px); } }