/* Stats&Market · World globe, styles. Colour comes from tokens-v2.css and follows the page theme; only the map's own data colours stay on the dark palette (hue() in globe-core.js).
   The view sits inside the classic shell like the Earth monitor: the sidebar and the top bar stay, and the globe fills the space under the top bar.
   Everything is scoped to .gv because style.css restyles bare svg, button, h2 and aside for the classic pages. */
.gv { position: fixed; top: var(--gv-top, calc(var(--header-height) + 1px)); right: 0; bottom: 0; left: var(--gv-left, var(--sidebar-width)); z-index: 30; overflow: hidden; background: #02040a; color: var(--text); font: 400 13px/1.45 var(--font-sans); letter-spacing: -.003em; --gv-right: 12px; --gv-w: 316px; --gv-card: 380px; }
.gv[hidden] { display: none; }
body.gv-on { overflow: hidden; }
/* the page content under the top bar gives way to the globe; the skip link stays and jumps to the globe's controls */
body.gv-on #main { display: none; }
.gv *, .gv *::before, .gv *::after { box-sizing: border-box; }
:where(.gv) h2, :where(.gv) h3, :where(.gv) p, :where(.gv) ul, :where(.gv) ol, :where(.gv) dl, :where(.gv) dd { margin: 0; padding: 0; }
/* style.css gives every header a fixed height and every footer a layout of its own */
:where(.gv) header, :where(.gv) footer { position: static; height: auto; min-height: 0; margin: 0; padding: 0; border: 0; background: none; z-index: auto; flex-direction: row; font-size: inherit; color: inherit; }
.gv ul, .gv ol { list-style: none; }
.gv button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.gv a { color: inherit; text-decoration: none; }
.gv a:hover { text-decoration: none; }
.gv :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gv ::selection { background: color-mix(in srgb, var(--accent) 36%, transparent); color: var(--text); }
.gv-ic { width: 15px; height: 15px; fill: currentColor; stroke: none; flex: none; }
.gv kbd { font: 500 11px/1 var(--font-mono); color: var(--subtle); border: 1px solid var(--border-strong); border-radius: 5px; padding: 3px 5px; background: var(--canvas); }

/* stage */
.gv-map { position: absolute; inset: 0; background-color: #02040a;
  background-image: radial-gradient(1px 1px at 32.7% 15.8%, rgba(214,226,255,0.53), transparent 100%),
    radial-gradient(1px 1px at 8.1% 53.5%, rgba(214,226,255,0.4), transparent 100%),
    radial-gradient(1px 1px at 6.7% 50.7%, rgba(214,226,255,0.24), transparent 100%),
    radial-gradient(1px 1px at 43.5% 7.8%, rgba(214,226,255,0.26), transparent 100%),
    radial-gradient(1px 1px at 42.6% 82.0%, rgba(214,226,255,0.28), transparent 100%),
    radial-gradient(1px 1px at 22.9% 62.5%, rgba(214,226,255,0.67), transparent 100%),
    radial-gradient(1px 1px at 57.6% 39.9%, rgba(214,226,255,0.69), transparent 100%),
    radial-gradient(1px 1px at 5.6% 85.1%, rgba(214,226,255,0.36), transparent 100%),
    radial-gradient(1px 1px at 15.1% 12.5%, rgba(214,226,255,0.37), transparent 100%),
    radial-gradient(1px 1px at 81.0% 18.7%, rgba(214,226,255,0.5), transparent 100%),
    radial-gradient(1px 1px at 63.6% 37.5%, rgba(214,226,255,0.48), transparent 100%),
    radial-gradient(1px 1px at 7.2% 6.8%, rgba(214,226,255,0.32), transparent 100%),
    radial-gradient(1px 1px at 67.7% 42.9%, rgba(214,226,255,0.37), transparent 100%),
    radial-gradient(1px 1px at 58.4% 45.4%, rgba(214,226,255,0.36), transparent 100%),
    radial-gradient(1px 1px at 78.8% 69.5%, rgba(214,226,255,0.34), transparent 100%),
    radial-gradient(1px 1px at 57.3% 52.5%, rgba(214,226,255,0.64), transparent 100%),
    radial-gradient(1px 1px at 72.5% 29.2%, rgba(214,226,255,0.69), transparent 100%),
    radial-gradient(1px 1px at 12.6% 42.0%, rgba(214,226,255,0.58), transparent 100%),
    radial-gradient(1px 1px at 15.9% 48.9%, rgba(214,226,255,0.24), transparent 100%),
    radial-gradient(1px 1px at 66.5% 75.9%, rgba(214,226,255,0.5), transparent 100%),
    radial-gradient(1px 1px at 86.8% 31.7%, rgba(214,226,255,0.55), transparent 100%),
    radial-gradient(1px 1px at 59.2% 57.8%, rgba(214,226,255,0.44), transparent 100%),
    radial-gradient(1px 1px at 83.3% 93.6%, rgba(214,226,255,0.45), transparent 100%),
    radial-gradient(1px 1px at 66.1% 6.9%, rgba(214,226,255,0.56), transparent 100%),
    radial-gradient(1px 1px at 64.4% 98.3%, rgba(214,226,255,0.61), transparent 100%),
    radial-gradient(1px 1px at 28.9% 38.8%, rgba(214,226,255,0.54), transparent 100%),
    radial-gradient(1px 1px at 3.2% 46.2%, rgba(214,226,255,0.3), transparent 100%),
    radial-gradient(1px 1px at 12.5% 6.8%, rgba(214,226,255,0.59), transparent 100%),
    radial-gradient(1px 1px at 13.7% 25.3%, rgba(214,226,255,0.41), transparent 100%),
    radial-gradient(1px 1px at 86.4% 8.9%, rgba(214,226,255,0.44), transparent 100%),
    radial-gradient(1px 1px at 54.8% 87.6%, rgba(214,226,255,0.61), transparent 100%),
    radial-gradient(1px 1px at 85.7% 28.3%, rgba(214,226,255,0.42), transparent 100%),
    radial-gradient(1px 1px at 36.2% 87.7%, rgba(214,226,255,0.68), transparent 100%),
    radial-gradient(1px 1px at 15.8% 18.3%, rgba(214,226,255,0.33), transparent 100%),
    radial-gradient(1px 1px at 23.9% 48.5%, rgba(214,226,255,0.5), transparent 100%),
    radial-gradient(1px 1px at 26.7% 1.4%, rgba(214,226,255,0.42), transparent 100%),
    radial-gradient(1px 1px at 37.2% 56.5%, rgba(214,226,255,0.68), transparent 100%),
    radial-gradient(1px 1px at 68.7% 51.5%, rgba(214,226,255,0.52), transparent 100%),
    radial-gradient(1px 1px at 67.3% 6.3%, rgba(214,226,255,0.65), transparent 100%),
    radial-gradient(1px 1px at 77.4% 86.7%, rgba(214,226,255,0.6), transparent 100%),
    radial-gradient(1px 1px at 39.5% 40.1%, rgba(214,226,255,0.27), transparent 100%),
    radial-gradient(1px 1px at 63.2% 7.1%, rgba(214,226,255,0.25), transparent 100%),
    radial-gradient(1px 1px at 21.5% 16.9%, rgba(214,226,255,0.38), transparent 100%),
    radial-gradient(1px 1px at 6.2% 1.0%, rgba(214,226,255,0.29), transparent 100%),
    radial-gradient(1px 1px at 10.9% 36.6%, rgba(214,226,255,0.23), transparent 100%),
    radial-gradient(1px 1px at 86.7% 61.2%, rgba(214,226,255,0.29), transparent 100%); }
.gv-map .maplibregl-canvas { outline: 0; }
.gv-map .maplibregl-ctrl-bottom-right { right: calc(var(--gv-right) - 10px); bottom: 2px; transition: right .3s var(--ease); }
.gv .maplibregl-ctrl-group { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: none; overflow: hidden; }
.gv .maplibregl-ctrl-group button { background-color: transparent; border-color: var(--border); }
.gv .maplibregl-ctrl-group button:hover { background-color: var(--hover); }
.gv .maplibregl-ctrl-icon { filter: invert(1) brightness(.9); }
.gv .maplibregl-ctrl-attrib { background: color-mix(in srgb, var(--canvas) 70%, transparent); color: var(--subtle); border-radius: 8px; font-size: 12px; }
.gv .maplibregl-ctrl-attrib a { color: var(--muted); }
.gv .maplibregl-ctrl-attrib-button { filter: invert(1) brightness(.9); }
body.light .gv .maplibregl-ctrl-icon, body.light .gv .maplibregl-ctrl-attrib-button { filter: none; }

/* panels share one surface */
.gv-dash, .gv-card { position: absolute; z-index: 5; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025); overflow: hidden; }
.gv-dash { left: 12px; top: 12px; max-height: calc(100% - 24px); width: var(--gv-w); }
.gv-dash.is-open .gv-panel { animation: gv-fade .22s var(--ease); }
@keyframes gv-fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.gv-card { right: 12px; top: 12px; width: var(--gv-card); max-height: calc(100% - 24px); animation: gv-in .24s var(--ease); }
.gv-card[hidden] { display: none; }
@keyframes gv-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }

.gv-listhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 26px; margin: 0 10px 4px 16px; flex: none; }
.gv-label { font: 600 11px/1 var(--font-sans); letter-spacing: .06em; color: var(--subtle); }
.gv-status { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; font-weight: 500; color: var(--tone, var(--subtle)); border: 1px solid var(--tone-line, var(--border)); background: var(--tone-soft, transparent); }
.gv-status:hover { background: color-mix(in srgb, var(--tone, var(--subtle)) 18%, transparent); }
.gv-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--tone, var(--subtle)); }
.gv-sheet { display: none; }

.gv-search { position: relative; display: flex; align-items: center; gap: 8px; margin: 12px 12px 10px; padding: 0 9px 0 10px; height: 32px; border: 1px solid var(--border); border-radius: 9px; background: var(--canvas); color: var(--subtle); flex: none; }
.gv-search:focus-within { border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); }
.gv-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 12.5px; outline: 0; -webkit-appearance: none; appearance: none; }
.gv-search input::placeholder { color: var(--subtle); }
.gv-search input::-webkit-search-cancel-button { display: none; }
.gv-results { position: absolute; z-index: 8; left: 0; right: 0; top: calc(100% + 6px); max-height: 340px; overflow: auto; padding: 4px; background: var(--raised); border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: var(--shadow-pop); }
.gv-results[hidden] { display: none; }
.gv-results li[aria-selected=true] button { background: var(--selected); }
.gv-results button { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border-radius: 8px; }
.gv-results button:hover { background: var(--hover); }
.gv-none { padding: 14px 10px; color: var(--subtle); text-align: center; }

/* chips and rows */
.gv-chip { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 7px; background: color-mix(in srgb, var(--h, var(--accent)) 16%, transparent); color: var(--h, var(--accent)); }
.gv-chip .gv-ic { width: 15px; height: 15px; }
.gv-chip.gv-flag { background: var(--panel); font-size: 15px; line-height: 1; }

.gv-lenses { display: grid; gap: 1px; padding: 0 8px 8px; flex: none; }
.gv-lens { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 9px; width: 100%; padding: 7px 8px; border-radius: 9px; transition: background .14s; }
.gv-lens:hover { background: var(--hover); }
.gv-lens[aria-pressed=true] { background: var(--selected); }
.gv-lens[aria-pressed=true] .gv-chip { background: var(--h); color: var(--accent-ink); }
.gv-lens-text { display: grid; min-width: 0; }
.gv-lens-text strong { font-size: 12.5px; font-weight: 500; letter-spacing: -.008em; }
.gv-lens-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.gv-lens kbd { opacity: 0; transition: opacity .14s; }
.gv-lens:hover kbd, .gv-lens:focus-visible kbd { opacity: 1; }

.gv-panel { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 14px 14px 16px; border-top: 1px solid var(--border); }
.gv-panel[hidden] { display: none; }
.gv-panel-head h2 { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.gv-panel-head p { margin-top: 2px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.gv-sec { display: flex; align-items: center; min-height: 24px; justify-content: space-between; gap: 8px; margin: 16px 0 6px; font: 600 11px/1 var(--font-sans); letter-spacing: .06em; color: var(--subtle); }
.gv-ctl .gv-sec:first-child { margin-top: 12px; }
.gv-note { margin-top: 14px; color: var(--subtle); font-size: 12px; line-height: 1.5; max-width: 62ch; }
.gv-quiet { color: var(--muted); font-size: 12.5px; padding: 6px 0; }

.gv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gv-chipbtn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--border-strong); color: var(--subtle); font-size: 12px; transition: background .14s, color .14s, border-color .14s; }
.gv-chipbtn i { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.gv-chipbtn b { font: 500 11px var(--font-mono); font-variant-numeric: tabular-nums; }
.gv-chipbtn:hover { border-color: var(--border-strong); color: var(--text); background: var(--hover); }
.gv-chipbtn[aria-pressed=true] { color: var(--text); border-color: color-mix(in srgb, var(--h) 45%, var(--border)); background: color-mix(in srgb, var(--h) 12%, transparent); }
.gv-chipbtn[aria-pressed=true] i { background: var(--h); }
.gv-chipbtn[aria-pressed=true] b { color: var(--h); }
.gv-chipbtn.is-plain[aria-pressed=true] { --h: var(--accent); }

.gv-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--panel); max-width: 100%; }
.gv-seg button { height: 26px; padding: 0 10px; border-radius: 7px; color: var(--muted); font-size: 12px; transition: background .14s, color .14s; white-space: nowrap; }
.gv-seg button:hover { color: var(--text); }
.gv-seg button[aria-pressed=true] { background: var(--selected); color: var(--text); font-weight: 500; }
.gv-sec .gv-seg { margin: -3px 0; }

.gv-toggles { display: grid; gap: 2px; }
.gv-toggle { display: flex; align-items: center; gap: 10px; width: 100%; height: 32px; padding: 0 2px; color: var(--secondary); font-size: 12.5px; }
.gv-toggle:hover { color: var(--text); }
.gv-sw { position: relative; width: 28px; height: 16px; border-radius: 999px; background: var(--border-strong); transition: background .16s; flex: none; }
.gv-sw::after { content: ''; position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--text); transition: transform .16s var(--ease); }
.gv-toggle[aria-pressed=true] .gv-sw { background: var(--accent); }
.gv-toggle[aria-pressed=true] .gv-sw::after { transform: translateX(12px); background: var(--accent-ink); }

.gv-field { display: grid; gap: 5px; margin-top: 12px; }
.gv-field span { font: 600 11px/1 var(--font-sans); letter-spacing: .06em; color: var(--subtle); }
.gv-field select { width: 100%; height: 34px; padding: 0 30px 0 10px; border: 1px solid var(--border); border-radius: 9px; background-color: var(--canvas); color: var(--text); font: inherit; font-size: 13px; }
.gv-field select:hover { border-color: var(--border-strong); }
.gv-legend { display: flex; align-items: center; gap: 9px; margin-top: 12px; color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.gv-legend > span:not(.gv-ramp):not(.gv-bubbles):not(:last-child) { flex: none; }
.gv-legend > span:last-child:not(.gv-ramp) { min-width: 0; }
.gv-ramp { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; flex: 1; height: 8px; border-radius: 4px; overflow: hidden; }
.gv-ramp i { display: block; }
.gv-diverge { flex: 1; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--sem-red), rgba(150, 162, 184, .35) 50%, var(--sem-green)); }
.gv-bubbles { display: inline-flex; align-items: flex-end; gap: 3px; flex: none; }
.gv-bubbles i { display: block; border-radius: 50%; border: 1.3px solid var(--sem-blue); background: color-mix(in srgb, var(--sem-blue) 40%, transparent); }
.gv-bubbles i:nth-child(1) { width: 6px; height: 6px; } .gv-bubbles i:nth-child(2) { width: 10px; height: 10px; } .gv-bubbles i:nth-child(3) { width: 15px; height: 15px; }

.gv-list { display: grid; gap: 1px; }
.gv-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; margin: 0 -8px; width: calc(100% + 16px); border-radius: 9px; color: var(--text); transition: background .12s; }
.gv-row:not(:has(.gv-chip, .gv-rank)) { grid-template-columns: minmax(0, 1fr) auto; }
.gv-row:hover { background: var(--hover); }
.gv-row-main { display: grid; min-width: 0; gap: 1px; }
.gv-row-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 500; letter-spacing: -.008em; }
.gv-row-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--subtle); font-size: 11.5px; }
.gv-row-right { font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--secondary); white-space: nowrap; }
.gv-row-right b { font-weight: 600; }
.gv-rank { display: grid; place-items: center; min-width: 52px; }
.gv-rank b { font-size: 12px; }
.gv-num { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--panel); color: var(--muted); font: 500 12px var(--font-mono); font-variant-numeric: tabular-nums; }
.gv-up { color: var(--sem-green); } .gv-down { color: var(--sem-red); }
.gv-lvl { padding: 1px 6px; border-radius: 5px; font: 600 11px/1.5 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
.gv-lvl.red { color: var(--sem-red); background: color-mix(in srgb, var(--sem-red) 14%, transparent); }
.gv-lvl.orange { color: var(--sem-orange); background: color-mix(in srgb, var(--sem-orange) 14%, transparent); }
.gv-lvl.yellow { color: var(--sem-yellow); background: color-mix(in srgb, var(--sem-yellow) 14%, transparent); }
.gv-badge { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 500; color: var(--tone, var(--muted)); background: var(--tone-soft, var(--panel)); border: 1px solid var(--tone-line, var(--border)); }
.gv-badge i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.gv-badge[data-tone=none] { --tone: var(--muted); }

.gv-menu { position: absolute; z-index: 9; left: 20px; width: calc(var(--gv-w) - 16px); overflow: auto; padding: 10px; background: var(--raised); border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: var(--shadow-pop); }
.gv-menu[hidden] { display: none; }
.gv-menu-title { margin: 0 4px 6px; font-size: 12px; font-weight: 600; color: var(--secondary); }
.gv-feeds { display: grid; gap: 7px; padding: 4px; }
.gv-feeds li { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 9px; color: var(--secondary); font-size: 12.5px; }
.gv-feeds li i { width: 7px; height: 7px; border-radius: 50%; background: var(--tone, var(--subtle)); }
.gv-feeds li em { font-style: normal; color: var(--tone, var(--subtle)); font-variant-numeric: tabular-nums; }
.gv-feeds + .gv-btn { margin-top: 8px; }

/* the card */
.gv-card { border-color: color-mix(in srgb, var(--accent) 22%, var(--border)); }
.gv-card-head { height: auto; display: grid; grid-template-columns: 24px minmax(0, 1fr) 24px; gap: 10px; align-items: start; padding: 14px 12px 12px 14px; flex: none; }
.gv-card-title h2 { font-size: 17px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; outline: 0; overflow-wrap: anywhere; }
.gv-card-sub { margin-top: 3px; color: var(--muted); font-size: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.gv-x { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; color: var(--subtle); }
.gv-x:hover { background: var(--hover); color: var(--text); }
.gv-tabs { display: flex; gap: 4px; padding: 0 12px 10px; border-bottom: 1px solid var(--border); overflow-x: auto; flex: none; scrollbar-width: none; }
.gv-tabs[hidden] { display: none; }
.gv-tabs button { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 7px; color: var(--muted); font-size: 12.5px; white-space: nowrap; transition: background .14s, color .14s; }
.gv-tabs button:hover { color: var(--text); background: var(--hover); }
.gv-tabs button[aria-selected=true] { color: var(--text); font-weight: 500; background: var(--selected); }
.gv-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sem-green); }
.gv-tabs b { font: 500 11px var(--font-mono); color: var(--subtle); padding: 1px 5px; border-radius: 999px; background: var(--panel); }
.gv-card-body { flex: 1; min-height: 140px; overflow: auto; padding: 14px 14px 16px; }
.gv-card-foot { display: flex; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--border); flex: none; }
.gv-btn { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 11px; border: 1px solid var(--border); border-radius: 9px; color: var(--secondary); font-size: 12.5px; white-space: nowrap; transition: background .14s, border-color .14s, color .14s; }
.gv-btn:hover { background: var(--hover); border-color: var(--border-strong); color: var(--text); }
.gv-card-foot .gv-btn:last-child { margin-left: auto; }

.gv-lede { font-size: 13.5px; line-height: 1.5; color: var(--text); letter-spacing: -.008em; max-width: 62ch; }
.gv-body { color: var(--secondary); line-height: 1.55; max-width: 62ch; }
.gv-lede + .gv-kv, .gv-lede + .gv-facts, .gv-lede + .gv-list { margin-top: 12px; }
.gv-kv { display: grid; }
.gv-kv > div { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--divider); }
.gv-kv dt { color: var(--muted); flex: none; }
.gv-kv dd { text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.gv-kv-tight { margin-top: 10px; }
.gv-inline { color: var(--accent); text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 3px; }
.gv-inline:hover { text-decoration-color: var(--accent); }
.gv-chips { margin-top: 4px; }
.gv-facts { display: grid; }
.gv-fact { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 14px; padding: 9px 0; border-bottom: 1px solid var(--divider); }
.gv-fact dt { color: var(--muted); }
.gv-fact dd { text-align: right; font-size: 14px; font-weight: 600; letter-spacing: -.012em; font-variant-numeric: tabular-nums; }
.gv-fact small { color: var(--subtle); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.gv-track { position: relative; justify-self: end; width: 84px; height: 4px; border-radius: 2px; background: var(--border-strong); }
.gv-track i { position: absolute; top: -3px; width: 2px; height: 10px; border-radius: 1px; background: var(--text); transform: translateX(-1px); }
.gv-more { margin-top: 12px; font-size: 12.5px; }
.gv-more a, .gv-link-out { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; color: var(--accent); }
.gv-more a:hover, .gv-link-out:hover { text-decoration: underline; text-underline-offset: 3px; }
.gv-news { display: grid; gap: 2px; padding: 8px 8px; margin: 0 -8px; border-radius: 9px; }
.gv-news:hover { background: var(--hover); }
.gv-news strong { font-size: 13px; font-weight: 500; line-height: 1.4; letter-spacing: -.008em; }
.gv-news small { color: var(--subtle); font-size: 11.5px; }
.gv-table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.gv-table th, .gv-table td { padding: 6px 4px; text-align: left; border-bottom: 1px solid var(--divider); font-weight: 400; }
.gv-table thead th { color: var(--subtle); font-size: 11px; }
.gv-table tbody th { color: var(--muted); }
.gv-empty { padding: 18px 4px; }
.gv-empty strong { display: block; font-size: 13.5px; font-weight: 600; }
.gv-empty p { margin-top: 4px; color: var(--muted); max-width: 52ch; line-height: 1.5; }
.gv-empty .gv-btn { margin-top: 10px; }
.gv-empty[data-tone=warning] strong { color: var(--sem-orange); }
.gv-skel i { display: block; height: 14px; margin: 12px 0; border-radius: 6px; background: linear-gradient(90deg, var(--panel) 20%, var(--hover) 50%, var(--panel) 80%); background-size: 220% 100%; animation: gv-shimmer 1.5s linear infinite; }
.gv-skel i:nth-child(odd) { width: 86%; } .gv-skel i:nth-child(3n) { width: 64%; }
@keyframes gv-shimmer { to { background-position: -220% 0; } }

/* over the globe */
.gv-tools { position: absolute; z-index: 4; right: var(--gv-right); bottom: 104px; display: grid; gap: 6px; transition: right .3s var(--ease); }
.gv-tools button { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--muted); transition: background .14s, color .14s, border-color .14s; }
.gv-tools button:hover { background: var(--hover); color: var(--text); }
.gv-tools button[aria-pressed=true] { color: var(--accent); border-color: var(--accent-line); background: color-mix(in srgb, var(--accent) 13%, var(--surface)); }
.gv-hint { position: absolute; z-index: 3; left: 50%; bottom: 22px; transform: translateX(-50%); padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 88%, transparent); color: var(--muted); font-size: 12px; line-height: 1.4; white-space: nowrap; transition: opacity .6s; pointer-events: none; }
.gv-hint.is-gone { opacity: 0; }
.gv-hint[hidden] { display: none; }
.gv-tip { position: absolute; z-index: 7; max-width: 260px; padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: 9px; background: var(--raised); box-shadow: var(--shadow-pop); pointer-events: none; display: grid; gap: 2px; }
.gv-tip[hidden] { display: none; }
.gv-tip strong { font-size: 12.5px; font-weight: 600; }
.gv-tip span { color: var(--muted); font-size: 11.5px; }
.gv-state { position: absolute; z-index: 3; left: 50%; bottom: 62px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; max-width: min(86%, 520px); padding: 7px 12px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--tone, var(--sem-blue)) 36%, var(--border)); background: color-mix(in srgb, var(--tone, var(--sem-blue)) 10%, var(--surface)); color: var(--tone, var(--sem-blue)); font-size: 12.5px; }
.gv-state[hidden] { display: none; }
.gv-state[data-tone=error] { --tone: var(--sem-red); }
.gv-state[data-tone=info] { --tone: var(--sem-blue); }
.gv-spin { width: 12px; height: 12px; border: 2px solid color-mix(in srgb, var(--tone) 30%, transparent); border-top-color: var(--tone); border-radius: 50%; animation: gv-spin .8s linear infinite; }
@keyframes gv-spin { to { transform: rotate(360deg); } }
.gv.no-map .gv-map { background-image: none; }
body.gv-on #toast { z-index: 80; }

/* narrower stages: the card takes the dashboard's place, with the globe kept wide. The sidebar stays beside the stage on every
   viewport above 760px, so globe-ui.js sets data-mode from the stage's own width and not from the window's */
.gv:is([data-mode=tablet], [data-mode=phone]) { --gv-w: 292px; }
.gv:is([data-mode=tablet], [data-mode=phone]) .gv-card { left: 12px; right: auto; top: 12px; bottom: auto; width: min(344px, calc(100% - 24px)); max-height: calc(100% - 24px); }
.gv:is([data-mode=tablet], [data-mode=phone]).has-card .gv-dash { visibility: hidden; }
.gv:is([data-mode=tablet], [data-mode=phone]) .gv-tools { right: 12px; }
.gv:is([data-mode=tablet], [data-mode=phone]) .gv-tabs { gap: 2px; padding: 0 8px 10px; }
.gv:is([data-mode=tablet], [data-mode=phone]) .gv-tabs button { padding: 0 8px; }
.gv:is([data-mode=tablet], [data-mode=phone]) .gv-map .maplibregl-ctrl-bottom-right { right: 2px; }

/* phone: both panels become bottom sheets */
.gv[data-mode=phone] .gv-dash, .gv[data-mode=phone] .gv-card { left: 0; right: 0; top: auto; bottom: 0; width: auto; border-radius: 16px 16px 0 0; border-width: 1px 0 0; }
.gv[data-mode=phone] .gv-dash { max-height: 66%; bottom: 0; }
.gv[data-mode=phone] .gv-card { max-height: 68%; animation-name: gv-up; }
.gv[data-mode=phone] .gv-sheet { display: grid; place-items: center; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 64px; height: 24px; }
.gv[data-mode=phone] .gv-sheet i { width: 34px; height: 4px; border-radius: 2px; background: var(--border-strong); }
.gv[data-mode=phone] .gv-dash { padding-top: 20px; }
.gv[data-mode=phone] .gv-search { margin-top: 0; height: 40px; }
/* touch: every control at least 32px, the ones used most 36 to 44 */
.gv[data-mode=phone] .gv-status { height: 32px; padding: 0 12px; }
.gv[data-mode=phone] .gv-tabs button { height: 36px; }
.gv[data-mode=phone] .gv-seg button { height: 32px; }
.gv[data-mode=phone] .gv-chipbtn { height: 36px; }
.gv[data-mode=phone] .gv-toggle { height: 44px; }
.gv[data-mode=phone] .gv-row { padding-top: 9px; padding-bottom: 9px; }
.gv[data-mode=phone] .gv-link-out { min-height: 40px; }
.gv[data-mode=phone] .gv-lenses { display: flex; gap: 6px; overflow-x: auto; padding: 0 12px 10px; scrollbar-width: none; }
.gv[data-mode=phone] .gv-lens { width: auto; flex: none; grid-template-columns: 24px auto; gap: 8px; padding: 8px 14px 8px 8px; border: 1px solid var(--border); border-radius: 999px; }
.gv[data-mode=phone] .gv-lens .gv-chip { border-radius: 50%; }
.gv[data-mode=phone] .gv-lens-text small, .gv[data-mode=phone] .gv-lens kbd { display: none; }
.gv.is-min .gv-search, .gv.is-min .gv-panel { display: none; }
.gv[data-mode=phone] .gv-panel { max-height: 36vh; }
.gv[data-mode=phone] .gv-tools { top: 12px; bottom: auto; right: 12px; }
.gv[data-mode=phone] .gv-tools button { width: 40px; height: 40px; }
.gv[data-mode=phone] .gv-x { width: 36px; height: 36px; }
.gv[data-mode=phone] .gv-btn { height: 38px; }
.gv[data-mode=phone] .gv-hint { bottom: auto; top: 14px; width: max-content; max-width: calc(100% - 120px); white-space: normal; text-wrap: balance; text-align: center; font-size: 12px; padding: 8px 14px; }
.gv[data-mode=phone] .gv-state { bottom: auto; top: 58px; }
.gv[data-mode=phone] .gv-map .maplibregl-ctrl-bottom-right { display: none; }
.gv[data-mode=phone] .gv-card-body { min-height: 120px; }
.gv[data-mode=phone] .gv-menu { left: 8px; right: 8px; width: auto; }
@keyframes gv-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .gv *, .gv *::before, .gv *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* the living planet: space behind the map, an atmosphere in front of it, and the way in */
.gv { --rim-day: rgba(132, 208, 255, .88); --rim-warm: rgba(255, 176, 118, .62); --rim-night: rgba(44, 92, 224, .34); --rim-uniform: rgba(78, 150, 255, .5); }
.gv-space { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; transition: opacity 1.6s var(--ease); }
.gv-map { z-index: 1; transition: opacity 1.2s var(--ease); }
.gv.fx-on .gv-map { background: transparent; }
.gv-halo { position: absolute; z-index: 2; pointer-events: none; mix-blend-mode: screen; opacity: 0; transition: opacity 1.8s var(--ease); }
.gv-halo::before, .gv-halo::after { content: ''; position: absolute; inset: 0; -webkit-mask-image: radial-gradient(circle closest-side, transparent 71%, #000 73.5%, rgba(0, 0, 0, .62) 75.6%, rgba(0, 0, 0, .2) 83%, transparent 100%); mask-image: radial-gradient(circle closest-side, transparent 71%, #000 73.5%, rgba(0, 0, 0, .62) 75.6%, rgba(0, 0, 0, .2) 83%, transparent 100%); }
.gv-halo::before { opacity: var(--dir, 1); background: conic-gradient(from calc(var(--sun, 0deg) - 180deg), var(--rim-night) 0deg, var(--rim-warm) 78deg, var(--rim-day) 180deg, var(--rim-warm) 282deg, var(--rim-night) 360deg); }
.gv-halo::after { opacity: var(--uni, .3); background: var(--rim-uniform); }

.gv.is-intro .gv-map, .gv.is-intro .gv-space { opacity: 0; }
.gv.is-intro .gv-halo { opacity: 0 !important; }
.gv.is-intro .gv-dash, .gv.is-intro .gv-tools, .gv.is-intro .gv-hint { opacity: 0; }
.gv.is-intro .gv-dash { transform: translateX(-18px); }
.gv-dash { transition: opacity .9s var(--ease) .7s, transform 1s var(--ease) .7s; }
.gv.is-intro .gv-lens { opacity: 0; transform: translateY(8px); }
.gv-lens { transition: background .14s, opacity .7s var(--ease) calc(1s + var(--i, 0) * 70ms), transform .7s var(--ease) calc(1s + var(--i, 0) * 70ms); }
.gv-tools { transition: right .3s var(--ease), opacity .8s var(--ease) 1.4s; }