/* The globe and everything that rides on it. */
.globe { position: relative; }
.globe-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; -webkit-tap-highlight-color: transparent; }
.globe-canvas.is-round { border-radius: 50%; }
.globe-ring { position: absolute; pointer-events: none; transition: opacity 0.4s ease; }
.globe-ring svg { position: absolute; inset: -12%; width: 124%; height: 124%; overflow: visible; }
.globe-overlay { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.globe-detail { position: absolute; inset: 0; pointer-events: none; }

/* featured pins */
.gp { position: absolute; left: -18px; top: -18px; width: 36px; height: 36px; padding: 0; border: 0; background: transparent; visibility: hidden; display: grid; place-items: center; pointer-events: auto; color: var(--ink); will-change: transform, opacity; }
.gpm { width: 9px; height: 9px; border: 1.5px solid var(--ink); background: var(--paper); box-shadow: 0 0 0 1.5px rgba(247, 247, 243, 0.8); }
.gpm.tier-lidar { background: var(--ink); }
.gp.is-sel .gpm { width: 12px; height: 12px; background: var(--accent); border: 2px solid var(--paper); box-shadow: 0 0 0 1px var(--ink); }
.gpl { position: absolute; left: 24px; top: 50%; transform: translateY(-50%); white-space: nowrap; font: 500 11px/1 var(--mono); letter-spacing: 0.05em; text-transform: uppercase; padding: 5px 7px; border-radius: 5px; background: var(--paper-a); color: var(--ink); opacity: 0; transition: opacity 0.2s; pointer-events: none; box-shadow: 0 0 0 1px var(--line); }
.gp:hover .gpl, .gp:focus-visible .gpl, .gp.is-sel .gpl { opacity: 1; }

/* the search marker */
.gmk { position: absolute; left: 0; top: 0; visibility: hidden; pointer-events: none; z-index: 2; will-change: transform, opacity; }
.gmk i { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px rgba(30, 38, 36, 0.28); }
.gmk b { position: absolute; left: 14px; top: -13px; white-space: nowrap; font: 500 11px/1 var(--mono); letter-spacing: 0.05em; text-transform: uppercase; padding: 6px 8px; border-radius: 5px; background: var(--paper-a); box-shadow: 0 0 0 1px rgba(30, 38, 36, 0.12); color: var(--ink); }
.gmk b:empty { display: none; }

/* hover and tap rings */
.ghv, .gpg { position: absolute; left: 0; top: 0; width: 12px; height: 12px; border-radius: 50%; pointer-events: none; opacity: 0; will-change: transform, opacity; z-index: 2; }
.ghv { border: 1.25px solid rgba(30, 38, 36, 0.5); transition: opacity 0.14s ease; }
.gpg { border: 1px solid var(--accent); }

/* the boundary: survey red, paper handles, a soft wash inside and a veil outside */
.gbd { position: absolute; left: 0; top: 0; visibility: hidden; border: 2px solid var(--boundary); background: var(--boundary-soft); box-shadow: 0 0 0 1px rgba(247, 247, 243, 0.85), 0 0 0 1px rgba(247, 247, 243, 0.85) inset, 0 0 0 4000px rgba(235, 236, 230, 0.34); cursor: move; pointer-events: auto; touch-action: none; z-index: 3; outline: none; }
.gbd:focus-visible { border-style: dashed; }
.gbd .bh { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; padding: 0; border-radius: 50%; background: var(--paper); border: 2px solid var(--boundary); cursor: nwse-resize; touch-action: none; box-shadow: 0 1px 3px rgba(30, 38, 36, 0.25); transition: transform 0.12s; }
.gbd .bh:hover, .gbd .bh:focus-visible { transform: scale(1.18); }
.gbd .bh::before { content: ""; position: absolute; inset: -12px; }
.gbd .bh.ne, .gbd .bh.sw { cursor: nesw-resize; }
.gbd .bl { position: absolute; left: -2px; bottom: calc(100% + 8px); display: flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 11px; padding: 5px 8px; border-radius: 6px; background: var(--ink); color: var(--paper); pointer-events: none; }
.gbd .bl::before { content: ""; width: 7px; height: 7px; border-radius: 1px; background: var(--boundary); }
.gbd .bl .sep { opacity: 0.55; }
.gbd .bl .lim { color: #F2A595; }
.gbd .bl .lim:empty { display: none; }
.gbd.is-limit { border-color: var(--boundary-ink); }

/* georeferenced layers in the 2D map (map variant) */
.gdl { position: absolute; left: 0; top: 0; transform-origin: 0 0; visibility: hidden; pointer-events: none; will-change: transform, opacity;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 78%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 78%, transparent 100%); }
.plan-layers { position: relative; width: 100%; height: 100%; }
.plan-layers .pl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; -webkit-user-drag: none; }

/* the zoom control */
.lz { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px; border-radius: 14px; background: var(--paper-a); box-shadow: var(--shadow); }
.lz button { width: 36px; height: 36px; padding: 0; border: 0; border-radius: 9px; background: transparent; display: grid; place-items: center; color: var(--ink); }
.lz button:hover { background: var(--bg); }
.lz .lt { height: 22px; }
.lz .lt span { display: block; border-radius: 50%; background: var(--faint); transition: background 0.2s, box-shadow 0.2s; }
.lz .lt.is-map span { border-radius: 1.5px; }
.lz .lt.is-on span { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.lz hr { width: 20px; margin: 3px 0; border: 0; border-top: 1px solid var(--line-2); }
.lz-mini { position: absolute; right: -2%; bottom: 3%; z-index: 4; }

/* simulated relief label and switch */
.simtag { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 9px; border: 0; border-radius: 7px; background: var(--paper-a); box-shadow: 0 0 0 1px rgba(30, 38, 36, 0.08); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.simtag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--disabled); }
.simtag[aria-pressed="true"]::before { background: var(--accent); }

/* tiles: a boundary bigger than one tile is a grid; dashed seams between tiles, and + / − on each side to grow or shrink it */
.gbd-grid { position: absolute; inset: 0; pointer-events: none; }
.gbd-grid i { position: absolute; }
.gbd-grid .v { top: 0; bottom: 0; width: 0; margin-left: -0.75px; border-left: 1.5px dashed rgba(208, 74, 55, 0.8); }
.gbd-grid .h { left: 0; right: 0; height: 0; margin-top: -0.75px; border-top: 1.5px dashed rgba(208, 74, 55, 0.8); }
.gbd .bl { bottom: calc(100% + 16px); }
.gbd .bs { position: absolute; z-index: 2; display: flex; border-radius: 12px; background: var(--paper); box-shadow: 0 0 0 1.5px var(--boundary), 0 2px 6px rgba(30, 38, 36, 0.18); overflow: hidden; }
.gbd .bs-n { left: 50%; top: 0; transform: translate(-50%, -50%); }
.gbd .bs-s { left: 50%; top: 100%; transform: translate(-50%, -50%); }
.gbd .bs-e { left: 100%; top: 50%; transform: translate(-50%, -50%); flex-direction: column; }
.gbd .bs-w { left: 0; top: 50%; transform: translate(-50%, -50%); flex-direction: column; }
.gbd .bt { width: 24px; height: 24px; padding: 0; border: 0; background: transparent; color: var(--boundary-ink); font: 500 15px/1 var(--mono); display: grid; place-items: center; cursor: pointer; }
.gbd .bt:hover, .gbd .bt:focus-visible { background: rgba(208, 74, 55, 0.12); }
.gbd .bs-n .bt + .bt, .gbd .bs-s .bt + .bt { border-left: 1px solid rgba(208, 74, 55, 0.3); }
.gbd .bs-e .bt + .bt, .gbd .bs-w .bt + .bt { border-top: 1px solid rgba(208, 74, 55, 0.3); }
.gbd.is-small .bs { display: none; }
@media (pointer: coarse) { .gbd .bt { width: 32px; height: 32px; font-size: 17px; } }

/* names on the dots (countries, cities), above the map so they can hand over to its own names */
.globe-labels { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; border-radius: inherit; }
.globe-canvas.is-round ~ .globe-labels { border-radius: 50%; clip-path: circle(50%); }

/* the live map (MapLibre) rides between the canvas and the overlays; input stays with the globe */
.live-map { position: absolute; inset: 0; pointer-events: none; opacity: 0; overflow: hidden; border-radius: inherit; }
.live-map-canvas { position: absolute; inset: 0; }
.live-map-canvas canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.live-map .maplibregl-canvas-container, .live-map .maplibregl-control-container { position: absolute; inset: 0; }
.live-map .maplibregl-control-container { display: none; }
.live-attr { position: absolute; right: 8px; bottom: 6px; z-index: 2; pointer-events: auto; font-size: 9.5px; letter-spacing: 0.02em; color: var(--muted); background: rgba(247, 247, 243, 0.75); padding: 2px 6px; border-radius: 4px; }
.live-attr a { color: inherit; text-decoration: none; }
.live-attr a:hover { color: var(--ink); text-decoration: underline; }
.globe-canvas.is-round ~ .live-map { border-radius: 50%; }

/* map layers: one quiet button, a short list of switches */
.ml { position: relative; }
.ml-btn { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 11px 0 9px; border: 0; border-radius: 9px; background: var(--paper-a); box-shadow: var(--shadow); color: var(--ink); font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; }
.ml-btn:hover { color: var(--ink); background: var(--paper); }
.ml-btn.is-filtered::after { content: ""; width: 5px; height: 5px; margin-left: 1px; border-radius: 50%; background: var(--accent); }
.ml-pop { position: absolute; right: 0; top: calc(100% + 6px); min-width: 196px; padding: 6px; border-radius: 12px; background: var(--paper-a); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--shadow-lg); border: 1px solid var(--line); display: grid; gap: 1px; }
.ml-pop[hidden] { display: none; }
.ml-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 34px; padding: 0 8px 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); font-size: 13px; text-align: left; cursor: pointer; }
.ml-row:hover { background: rgba(30, 38, 36, 0.05); color: var(--ink); }
.ml-row:focus-visible, .ml-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ml-sw { position: relative; flex: none; width: 26px; height: 15px; border-radius: 8px; background: var(--line-3, #C9CCC5); transition: background 0.15s; }
.ml-sw::after { content: ""; position: absolute; left: 2px; top: 2px; width: 11px; height: 11px; border-radius: 50%; background: #FFF; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); transition: transform 0.15s var(--ease-out, ease); }
.ml-row[aria-checked="true"] .ml-sw { background: var(--ink); }
.ml-row[aria-checked="true"] .ml-sw::after { transform: translateX(11px); }
.ml-row[aria-checked="false"] .ml-name { color: var(--muted); }