/* Rolagem (ROLAGEM.md): regras de pais. Carregado por último no index.html, ganha na cascata sem mexer nos CSS antigos. */
/* Cartão do país sem rolar em 740×360 (334 px úteis): estado em 2 linhas, números e a troca Ações | Detalhes na mesma linha,
   e embaixo uma área que troca de conteúdo em vez de crescer. */
body.map-first #country-sheet[open]{padding-bottom:max(10px,env(safe-area-inset-bottom))}
body.map-first #country-sheet .country-heading{margin:0 0 6px}
body.map-first #country-sheet .country-status{margin:0 0 6px;padding:6px 10px}
/* A linha curta não quebra: o texto inteiro está em Detalhes › Estado. */
body.map-first #country-sheet .country-status small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.map-first #country-sheet .country-bar{display:flex;align-items:center;gap:8px;margin:0 0 8px}
body.map-first #country-sheet .country-bar .country-metrics{flex:1;min-width:0;gap:4px}
body.map-first #country-sheet .country-bar .country-metrics>span{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.map-first #country-sheet .country-bar .country-metrics strong{font-size:21px;line-height:1.15}
/* Controle segmentado: 44 px de alvo, a vista ativa preenchida. */
body.map-first #country-sheet .country-view{flex:none;display:flex;border:1px solid #81a8a755;border-radius:8px;overflow:hidden}
body.map-first #country-sheet .country-view button{min-height:44px;min-width:44px;padding:0 10px;border:0;border-radius:0;background:transparent;color:#a9bec3;font:12px var(--body)}
body.map-first #country-sheet .country-view button+button{border-left:1px solid #81a8a755}
body.map-first #country-sheet .country-view button[aria-pressed=true]{background:#5fd8e822;color:#e4f4f2}
body.map-first #country-sheet .country-pane{display:flex;flex-direction:column;gap:6px}
body.map-first #country-sheet .country-pane .base-control .local-action{margin-bottom:0}
body.map-first #country-sheet .country-pane .local-action{min-height:44px!important}
/* Abandonar em uma linha (antes 2 linhas, 62 px); o texto longo está no title. */
body.map-first #country-sheet .local-action[data-action=abandon] small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Explicações de Detalhes: botões de 44 px com o número curto; a aberta troca de lugar com os números. */
body.map-first #country-sheet .country-why{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px}
body.map-first #country-sheet .country-why button{min-height:44px;padding:3px 4px;border:1px solid #81a8a733;border-radius:6px;background:#ffffff06;color:#c8d7dc;font:11px/1.25 var(--body)}
body.map-first #country-sheet .country-why button[aria-pressed=true]{border-color:#5fd8e8aa;background:#5fd8e81a;color:#e4f4f2}
body.map-first #country-sheet .country-why b{display:block;font:11px var(--mono);color:#e4eeee;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.map-first #country-sheet .country-why-text{margin:0;font:11px/1.45 var(--body);color:#c3d3d6}
body.map-first #country-sheet .country-why-text strong{color:#e4eeee;font-weight:600}
body.map-first #country-sheet .country-pane .country-vitals,body.map-first #country-sheet .country-pane .sector-overview{margin:0}