/* Shares the Dark Sky panel styles; these rules cover the globe.gl specifics. */
#map { cursor: grab; }
.panel, .credit { z-index: 10; }
#map:active { cursor: grabbing; }
.phase-legend { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 5px; font-size: .8125rem; }
.phase-legend li { display: flex; align-items: center; gap: 9px; }
.swatch { width: 14px; height: 14px; border-radius: 2px; }
.phase-5 { background: #8b0a0a; }
.phase-4 { background: #f0501e; }
.phase-3 { background: #f2a33a; }
.credit { position: absolute; right: 12px; bottom: 8px; margin: 0; color: var(--muted); font-size: 11px; }

.country-label { color: rgba(255, 255, 255, .78); font: 600 11px Montserrat, system-ui, sans-serif; text-shadow: 0 1px 3px rgba(0, 0, 0, .9); white-space: nowrap; pointer-events: none; transition: opacity .3s ease; }
.float-tooltip-kap { z-index: 20 !important; }
.tooltip { min-width: 190px; padding: 10px 12px; background: #0c1117; border: 1px solid rgba(224, 247, 255, .2); border-radius: 4px; color: var(--star); font: 12px/1.45 Montserrat, system-ui, sans-serif; box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
.tooltip strong { display: block; margin-bottom: 4px; font-size: 13px; }
.tooltip .phase { display: inline-block; margin-bottom: 6px; padding: 1px 7px; border-radius: 2px; color: white; font-size: 11px; font-weight: 600; }
.tooltip dl { display: grid; grid-template-columns: auto auto; gap: 1px 12px; margin: 0; }
.tooltip dt { color: var(--muted); }
.tooltip dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.tooltip .period { margin-top: 6px; color: var(--muted); font-size: 11px; }

@media (max-width: 640px) {
    .credit { left: 8px; right: auto; bottom: 6px; }
}