/* Celular e toque. Três situações, cada uma com a sua regra: tela de toque em
   qualquer largura (pointer:coarse), telefone em pé (até 700 px de largura) e
   telefone deitado (até 500 px de altura). O desktop com mouse não entra em
   nenhuma delas. As alças que recolhem os painéis só existem no telefone. */

.alca{display:none;-webkit-tap-highlight-color:transparent}

/* A ficha rola quando é longa, e o × rolava junto: depois de ler até o fim
   não havia como fechar sem voltar ao topo. Preso ao alto da ficha, em
   qualquer tela. O top e o right de um sticky contam a partir do conteúdo,
   depois dos 22 px de espaçamento da ficha: -14 px o deixa a 8 px da borda,
   onde sempre esteve, e o right herdado (8 px) o empurrava para dentro. */
#feature-close{position:sticky;top:-14px;right:auto;float:right;z-index:2;margin:-14px -14px 0 6px;min-width:36px;border-radius:8px;background:rgba(12,26,31,.94)}

/* Toque: o dedo pede alvo de 44 px (Apple) a 48 px (Material), e o Safari do
   iPhone dá zoom na página quando o campo focado tem letra menor que 16 px. */
@media (pointer:coarse){
  input[type=search],input[type=number],input[type=text],select,textarea{font-size:16px!important}
  button:not(.layer-indicator):not(.pedir-area button),select,input[type=search],input[type=number],input[type=text]{min-height:44px}
  .pedir-area button{min-height:34px;padding:4px 10px;font-size:14px}
  #feature-close{min-width:44px;font-size:24px}
  .filter-chips button,#taxon-chips button{font-size:13px;padding:6px 12px}
  .multi-add button{flex-basis:44px}
  /* A escolha só vale no + (CAMADAS-v09.md). No toque o seletor nativo fecha e
     parece ter aplicado; o + com escolha pendente se destaca para dizer que não. */
  .multi-add button:not(:disabled){border-color:#8ce5bd;background:#265044;color:#e8f2ee}
  .area-tools button{min-width:44px}
  /* O indicador fica com 24 px, que o alinhamento ao rótulo supõe
     (layer-status.js); o que cresce é a área que responde ao dedo. */
  .layer-indicator::after{content:'';position:absolute;inset:-10px}
  /* O rótulo acaba antes dessa área: um toque ao lado do indicador desligava a camada. */
  .layers section.layer>label.toggle{padding-right:36px}
  /* Sem title à vista no toque, os glifos das ferramentas de área ganham nome. */
  .area-tools button{line-height:1;padding:4px 0}
  .area-tools button::after{content:attr(data-rotulo);display:block;margin-top:3px;font-size:10px}
  .pedir-area button::after{content:' ' attr(data-rotulo)}
  input[type=checkbox]{width:22px;height:22px;flex:none}
  input[type=range]{height:36px!important}
  .toggle{min-height:44px}
  summary{padding-block:12px;line-height:20px}
  .layers a,.feature a{display:inline-block;padding-block:12px;line-height:20px}
  .layers .water-layer a,#energia-source~a{display:block}
  /* Os créditos seguem pequenos na letra; o alvo cresce pela folga (no tablet
     de toque, por um ::after: veja o bloco das três colunas). */
  #credits a{display:inline-block;padding-block:7px}
  /* O rótulo de cada ponto segue o mouse; no toque ele surgia ao arrastar o
     globo e ficava parado sobre o mapa depois que o dedo saía. */
  .dica{display:none!important}
}

/* Telefone, em pé ou deitado: o globo ocupa a tela toda, a marca encolhe, e
   cada painel ganha a sua alça. */
@media (max-width:700px),(max-height:500px) and (orientation:landscape){
  /* Só os painéis rolam: a página em si sobrava alguns pixels, e um
     scrollIntoView dentro de uma gaveta arrastava o mapa inteiro junto. */
  html,body{height:100%;overflow:hidden;overscroll-behavior:none}
  #globe{inset:0}
  .brand{left:max(10px,env(safe-area-inset-left,0px));top:max(10px,env(safe-area-inset-top,0px));padding:8px 12px;gap:8px;border-radius:12px}
  .brand p{display:none}
  .brand h1{font-size:15px;letter-spacing:-.3px}
  .mark{font-size:22px}
  footer{padding:3px max(8px,env(safe-area-inset-right,0px)) max(3px,env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px));gap:6px;font-size:10px}
  .stage{display:none}
  #credits{max-width:100%;font-size:10px}
  /* O Cesium põe os créditos fora do fluxo, e o rodapé media só o próprio
     espaçamento: a gaveta, apoiada nessa altura, cobria metade deles. */
  #credits .cesium-widget-credits{position:static;padding:0}
  /* Cada camada ligada soma um crédito, e o rodapé crescia empurrando as
     gavetas: fica em cerca de duas linhas, que rolam. */
  #credits{max-height:46px;overflow-y:auto;pointer-events:auto}
  /* O desfoque sob os painéis era refeito a cada quadro do globo, que agora
     ocupa a tela inteira; com o fundo 94% opaco, ele quase não se via. */
  .panel{-webkit-backdrop-filter:none;backdrop-filter:none}
  /* Desenhando, o mapa é o que importa: a ficha aberta sai da frente e volta ao
     fim do desenho, e o toque no globo marca pontos em vez de cair nela. */
  body:has(#draw-panel:not([hidden])) #feature-card{visibility:hidden}

  /* Painel de camadas: a alça é o título, com quantas camadas estão ligadas. */
  .alca-camadas{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:3;width:calc(100% + 28px);margin:0 -14px;padding:18px 16px 12px;min-height:56px;border:0;border-radius:16px 16px 0 0;background:#0c1a1f;color:#e8f2ee;font-size:16px;font-weight:600;text-align:left;cursor:pointer;touch-action:none}
  .alca-camadas::before,.alca-ficha::before{content:'';position:absolute;top:7px;left:50%;width:36px;height:4px;margin-left:-18px;border-radius:2px;background:#4a6a70}
  .alca-camadas::after{content:'▾';margin-left:auto;font-size:15px;color:#8fd9b5}
  .alca-camadas[aria-expanded=false]::after{content:'▴'}
  .alca-camadas:hover{background:#0c1a1f}
  .alca-conta{padding:2px 9px;border-radius:99px;background:#8ce5bd;color:#0c1a1f;font-size:12px;font-weight:600}
  .alca-conta:empty{display:none}
  .layers>h2,.layers>.note{display:none}
  .layers.recolhida{padding-bottom:0;overflow:hidden}
  .layers.recolhida>:not(.alca-camadas){display:none!important}
  /* A gaveta é a única rolagem: listas com altura própria dentro dela prendiam
     o gesto e mostravam poucos resultados por vez. */
  #uc-results,#cnuc-results,#osm-results,#ti-results,#terr-results{max-height:none;overflow:visible}
  /* O que rola até a vista não para debaixo da alça, que fica presa no alto. */
  .layers details.tema,#aoi-box,.layers input[type=search]{scroll-margin-top:64px}
  .pedir-area{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 0}

  /* Controles: a alça "Mapa" é o título; fechados, sobra só ela. */
  .alca-controles{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;margin:0 0 6px;padding:0 6px;min-height:44px;border:0;background:none;color:#e8f2ee;font-size:15px;font-weight:600}
  .alca-controles:hover{background:none}
  .alca-controles::after{content:'▴';font-size:14px;color:#8fd9b5}
  .alca-controles[aria-expanded=false]::after{content:'▾'}
  .controls.recolhida{width:auto;padding:0 8px;overflow:hidden}
  .controls.recolhida>:not(.alca-controles){display:none!important}
  .controls.recolhida .alca-controles{margin:0;padding:0 6px}
  .controls h2,.controls>.intro,.controls>label:not(.toggle),.controls>details,.controls>.status,.controls>hr,.controls .longo{display:none}
  /* O mapa de fundo também se escolhe no telefone: o satélite baixa blocos pela
     rede móvel, e o mapa local não. O estado só aparece quando avisa falha. */
  .controls>select{margin:0 0 6px;padding:4px 8px}
  .controls>.status[data-alerta]{display:block;margin-top:6px;padding-top:4px;font-size:11px}
  .controls{left:auto;bottom:auto;padding:8px;border-radius:12px;overflow:auto;overscroll-behavior:contain}
  .area-tools{gap:6px;margin:0 0 6px}
  .area-tools button{flex:1;font-size:19px;padding:0}
  .controls .toggle{margin:2px 0;gap:10px;font-size:14px;line-height:1.25}
  .controls .buttons{gap:6px;margin:4px 0}
  .controls .buttons button{padding:0 6px;font-size:14px}
  #perf-status{margin:4px 0 0;font-size:11px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  /* Abertos, em duas colunas: os dois interruptores lado a lado, em vez de
     empilhados, levavam a caixa até o meio da tela. A segunda coluna só abre
     com 170 px para cada uma; mais estreita, "Relevo do terreno" quebrava em
     três linhas (deitado, com 240 px) e cada interruptor vai para a sua. */
  .controls:not(.recolhida){display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));column-gap:10px;align-items:center}
  .controls:not(.recolhida)>*{grid-column:1/-1}
  .controls:not(.recolhida)>label.toggle{grid-column:auto;order:3}
  .controls:not(.recolhida)>.area-tools{order:1}
  .controls:not(.recolhida)>select{order:2}
  .controls:not(.recolhida)>.buttons{order:4}
  .controls:not(.recolhida)>#perf-status{order:5}
  .controls:not(.recolhida)>.status{order:6}

  /* Ficha: a alça fica no alto sem empurrar o texto; recolhida, sobram o
     tipo, o nome e o ×. */
  .alca-ficha{display:block;position:sticky;top:-22px;z-index:1;width:calc(100% + 36px);height:44px;min-height:44px;margin:-22px -18px -22px;padding:0;border:0;border-radius:16px 16px 0 0;background:linear-gradient(#0c1a1f 14px,transparent 14px);cursor:pointer;touch-action:none}
  .alca-ficha:hover{background:linear-gradient(#0c1a1f 14px,transparent 14px)}
  .feature.recolhida>:is(#feature-figure,#feature-actions,#feature-fields,#feature-link){display:none!important}
  .feature.recolhida{max-height:none}
  .feature h2{font-size:18px}

  .draw-panel{padding:12px 14px}
  .draw-panel .buttons{flex-wrap:wrap}
  .draw-panel input{width:110px}

  /* A legenda dos símbolos era o elemento mais destacado do painel, acima dos
     próprios temas: no telefone ela é uma linha como as outras. */
  #symbol-legend{border:0;padding:0;margin:4px 0}
}

/* Letra de leitura: 9 a 11 px servem ao desktop, não à mão, e o tablet de
   toque também é lido de mais longe que um monitor. O tema, que organiza as
   camadas, era o texto mais apagado do painel. */
@media (max-width:700px),(max-height:500px) and (orientation:landscape),(pointer:coarse) and (max-width:1100px){
  .layers .note,.feature .note,.draw-panel .note{font-size:13px;line-height:1.55}
  .tema>summary{font-size:15px;font-weight:600;color:#e8f2ee}
  .layers .toggle{font-size:15px;line-height:1.35}
  .layers .toggle.small{font-size:14px}
  .layers label{font-size:13px}
  .corpo>summary,.layer summary{font-size:13px}
  .legend,.industry-legend{font-size:12px}
  .water-edition,.layer-count{font-size:12px}
  #uc-results button,#cnuc-results button,#ti-results button,#terr-results button,#osm-results button,#taxon-results button,.water-results button,[id$="-results"]>button{font-size:13px;line-height:1.4;padding:8px 10px}
  #resumo-corpo{font-size:12px}
  #resumo-ressalva{font-size:11px}
  .feature dl{font-size:14px}
  .eyebrow{font-size:11px}
  #feature-figure figcaption{font-size:11px}
  .report-table,.series-table{font-size:12px}
  .symbol-key{font-size:13px}
}

/* Telefone em pé: as gavetas presas embaixo, acima dos créditos, e a alça
   arrastada muda a altura entre recolhida, meia tela e cheia. Um telefone
   deitado de até 700 px de largura fica de fora: nele valem as gavetas laterais. */
@media (max-width:700px) and (orientation:portrait),(max-width:700px) and (min-height:501px){
  .controls{top:max(10px,env(safe-area-inset-top,0px));right:max(10px,env(safe-area-inset-right,0px));width:164px;max-height:calc(100vh - 137px - max(10px,env(safe-area-inset-top,0px)) - max(3px,env(safe-area-inset-bottom,0px)));max-height:calc(100dvh - 137px - max(10px,env(safe-area-inset-top,0px)) - max(3px,env(safe-area-inset-bottom,0px)))}
  /* Abertos, os controles ocupam o alto da tela inteira: numa caixa de 164 px
     o mapa de fundo, com a letra de 16 px que o iPhone pede, não cabia. Por
     cima da marca, o fundo de 94% deixava o nome dela aparecer atrás. */
  .controls:not(.recolhida){left:max(10px,env(safe-area-inset-left,0px));width:auto;background:#0c1a1f}
  .layers{top:auto;left:env(safe-area-inset-left,0px);right:env(safe-area-inset-right,0px);bottom:var(--rodape,30px);z-index:4;width:auto;max-height:62vh;max-height:62dvh;padding:0 14px 16px;border-radius:16px 16px 0 0;border-bottom:0;overscroll-behavior:contain}
  .layers.meia{max-height:42vh;max-height:42dvh}
  .layers.cheia{max-height:calc(80vh + 13px - max(10px,env(safe-area-inset-top,0px)) - max(3px,env(safe-area-inset-bottom,0px)));max-height:calc(80dvh + 13px - max(10px,env(safe-area-inset-top,0px)) - max(3px,env(safe-area-inset-bottom,0px)))}
  /* Uma gaveta por vez: a ficha e o desenho pedem o espaço de baixo. A gaveta
     fica invisível, não desmontada, para voltar na mesma rolagem. */
  body:has(#feature-card:not([hidden])) .layers,body:has(#draw-panel:not([hidden])) .layers{visibility:hidden}
  .feature{top:auto;left:env(safe-area-inset-left,0px);right:env(safe-area-inset-right,0px);bottom:var(--rodape,30px);width:auto;max-height:72vh;max-height:72dvh;padding:22px 18px 20px;border-radius:16px 16px 0 0;border-bottom:0;z-index:6;overscroll-behavior:contain}
  .feature.meia{max-height:45vh;max-height:45dvh}
  .feature.cheia{max-height:calc(85vh + 13px - max(10px,env(safe-area-inset-top,0px)) - max(3px,env(safe-area-inset-bottom,0px)));max-height:calc(85dvh + 13px - max(10px,env(safe-area-inset-top,0px)) - max(3px,env(safe-area-inset-bottom,0px)))}
  .feature.recolhida{padding-bottom:12px}
  .draw-panel{left:max(8px,env(safe-area-inset-left,0px));right:max(8px,env(safe-area-inset-right,0px));bottom:calc(var(--rodape,30px) + 8px);width:auto;transform:none}
}

/* Tablet de 940 a 1100 px: há 450 px livres entre os painéis, e a ficha, que
   cobria os controles (o Modo leve, em 1024 × 768), abre ali. Continua por
   cima de tudo (#64); só não precisa mais cobrir nada. */
@media (min-width:940px) and (max-width:1100px) and (min-height:501px){.feature{left:calc(308px + max(28px,env(safe-area-inset-left,0px)));right:auto}}

/* Toque com os créditos em três colunas (tablet, monitor de toque): em
   1024 × 768 sobram 41 px entre a base do painel de camadas e o espaçamento
   de 10 px do rodapé (51 px até a base da tela). A folga de 7 px que o toque
   dá a cada link fazia do logotipo do Cesium uma caixa de 42 px, que
   encostava no painel, e de uma linha com link (o CC BY das ecorregiões) uma
   linha de 28,5 px: das duas linhas de texto (29 px) só uma ficava à vista.
   Aqui a folga sai do desenho e fica no alvo, num ::after posicionado que não
   muda a altura da linha. No logotipo, fora de caixa rolável, o alvo cresce
   7 px acima e abaixo (42 px). No texto, que rola com mais de duas linhas, só
   para cima: 7 px abaixo do link da última linha faziam a caixa rolar à toa.
   Na primeira linha, ou numa caixa de uma linha só, a borda corta o alvo e
   ele fica só na letra. "Data attribution" tem coluna própria e segue com a
   folga. */
@media (pointer:coarse) and (min-width:701px) and (min-height:501px){
  #credits .cesium-credit-logoContainer a{padding-block:0;position:relative}
  #credits .cesium-credit-logoContainer a::after{content:'';position:absolute;inset:-7px 0}
  #credits .cesium-credit-textContainer a{display:inline;padding-block:0;position:relative}
  #credits .cesium-credit-textContainer a::after{content:'';position:absolute;inset:-7px 0 0}
}

/* Abaixo de 380 px a marca inteira e os controles não cabem lado a lado. */
@media (max-width:380px){.brand .mark{display:none}.brand{padding:8px 10px}}

/* Telefone deitado: pouca altura. A gaveta vai para a esquerda, os controles
   ficam à direita e a ficha abre por cima deles. */
@media (max-height:500px) and (orientation:landscape){
  .brand{left:max(8px,env(safe-area-inset-left,0px));top:max(8px,env(safe-area-inset-top,0px));padding:6px 10px}
  .brand h1{font-size:14px}
  .mark{font-size:20px}
  .controls{top:max(8px,env(safe-area-inset-top,0px));right:max(8px,env(safe-area-inset-right,0px));width:240px;max-height:calc(100vh - 8px - max(8px,env(safe-area-inset-top,0px)) - var(--rodape,30px));max-height:calc(100dvh - 8px - max(8px,env(safe-area-inset-top,0px)) - var(--rodape,30px))}
  .layers{top:calc(44px + max(8px,env(safe-area-inset-top,0px)));left:max(8px,env(safe-area-inset-left,0px));right:auto;bottom:var(--rodape,30px);width:min(340px,44vw);max-height:none;padding:0 12px 12px;border-radius:14px;overscroll-behavior:contain}
  .layers.recolhida{bottom:auto}
  .alca-camadas{width:calc(100% + 24px);margin:0 -12px;border-radius:14px 14px 0 0}
  .layers.recolhida .alca-camadas{border-radius:14px}
  body:has(#draw-panel:not([hidden])) .layers{visibility:hidden}
  .feature{top:max(8px,env(safe-area-inset-top,0px));right:max(8px,env(safe-area-inset-right,0px));left:auto;bottom:var(--rodape,30px);width:min(380px,50vw);max-height:none;padding:22px 16px 16px;z-index:6;overscroll-behavior:contain}
  .feature.recolhida{bottom:auto}
  .alca-ficha{width:calc(100% + 32px);margin:-22px -16px -22px}
  .feature h2{font-size:17px}
  .draw-panel{bottom:calc(var(--rodape,30px) + 6px);padding:10px 12px}
  .draw-panel .note{margin-bottom:6px}
}

/* Áreas seguras (notch, Ilha Dinâmica, barra de início do iPhone, barra de
   gestos do Android): com viewport-fit=cover o globo vai até a borda da tela,
   e cada painel preso a uma borda soma o recuo dela, que vale 0 onde não há
   recorte. O rodapé soma o de baixo, e as gavetas, apoiadas em --rodape, sobem
   junto. O JS lê o recuo de cima por --recuo-topo (celular.js, no arrasto).
   A caixa de créditos do Cesium, em tela cheia abaixo de 576 px, põe o × no
   canto de cima; o estilo dela entra no head depois deste, por isso o #globe. */
:root{--recuo-topo:env(safe-area-inset-top,0px)}
#globe .cesium-credit-lightbox.cesium-credit-lightbox-mobile{padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
#globe .cesium-credit-lightbox-mobile .cesium-credit-lightbox-close{top:env(safe-area-inset-top,0px);right:max(6px,env(safe-area-inset-right,0px))}