/* Layout: the globe is the whole page. Full-bleed, no scrolling, as little on top of the map as possible. Single dark look by design. */
:root {
  --night: #060b14;
  --panel: #0b1522;
  --line: #1f3550;
  --fg: #e6edf6;
  --muted: #8ea3bb;
  --diesel: #e2a53c;
  --lit: #f5f8fd;
  --ice: #8fc3ff;
  --none: #5d6f84;
  --mine: #ff8a65;
  --display: "Saira Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --body: "Public Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  color-scheme: dark;
  --sky: #6394e3;      /* the top of the Toronto shot's sky */
  --bleed: 0px;        /* how far the stage hangs below the visible area (iPhone, see html.bleed) */
  --lift: 0px;         /* how far the browser's own bottom toolbar covers the page */
}
@supports (height: 100lvh) { :root { --lift: calc(100lvh - 100svh); } }
html, body { background: var(--night); color: var(--fg); height: 100%; overflow: hidden; overscroll-behavior: none; }
html.sky, html.sky body, html.sky .stage { background: var(--sky); }
/* iPhone (html.bleed, set in the head): Safari only draws page content behind its clock bar and toolbar when
   the page is taller than the screen and scrolled, so the stage runs 160px past the screen and the page sits
   scrolled down 70px, locked. The controls are lifted by how far the stage hangs below the visible area. */
html.bleed { --bleed: 90px; }
html.bleed, html.bleed body { height: auto; overflow: visible; }
html.bleed body { min-height: calc(100lvh + 160px); }
html.bleed .stage { position: absolute; height: calc(100lvh + 160px); }
html.bleed .card { max-height: calc(100svh - 120px); }
[hidden] { display: none !important; }
body { font-family: var(--body); font-size: 15px; line-height: 1.5; margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--diesel); margin: 0; }
h1 { font-family: var(--display); font-weight: 700; font-size: clamp(38px, 7vw, 68px); line-height: .95; letter-spacing: .01em; text-transform: uppercase; margin: 6px 0 8px; text-wrap: balance; }
.lede { margin: 0; color: var(--muted); max-width: 64ch; }
.lede b, .how b { color: var(--lit); font-weight: 600; }
.lede { color: var(--fg); font-size: 16.5px; }
.how { margin: 6px 0 0; color: var(--muted); max-width: 64ch; font-size: 14px; }
.consent { margin: 8px 0 0; font-size: 13px; color: var(--fg); border-left: 2px solid var(--diesel); padding-left: 10px; }

.stage { position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100lvh; overflow: hidden; background: var(--night); }
#globe { position: absolute; inset: 0; }
.static { position: absolute; inset: 0; z-index: 1; background: var(--night); display: grid; grid-template-rows: 1fr auto; }
.static img { width: 100%; height: 100%; min-height: 0; object-fit: cover; display: block; }
.stage.nogl .play { display: none; }
.static p { margin: 0; padding: 10px 14px calc(10px + env(safe-area-inset-bottom) + var(--lift) + var(--bleed)); font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); }

.hud { position: absolute; top: 14px; left: 14px; z-index: 2; box-sizing: border-box; background: rgba(6,11,20,.78); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: grid; gap: 8px; max-width: calc(100% - 28px); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: opacity .6s ease, transform .6s ease; }
.hud .at { font-family: var(--mono); font-size: 12px; color: var(--muted); letter-spacing: .04em; }
.hud .at b { color: var(--lit); font-weight: 500; }
.stats { display: grid; grid-template-columns: repeat(4, auto); gap: 4px 18px; }
.stat .v { font-family: var(--display); font-weight: 600; font-size: 30px; line-height: 1; color: var(--lit); font-variant-numeric: tabular-nums; }
.stat .k { font-size: 11.5px; color: var(--muted); max-width: 17ch; line-height: 1.3; }
.stat.hi { border-right: 1px solid var(--line); padding-right: 16px; }
.stat.hi .v { color: var(--ice); font-size: 34px; }

.card { position: absolute; left: 14px; bottom: calc(34px + env(safe-area-inset-bottom) + var(--lift) + var(--bleed)); z-index: 3; box-sizing: border-box; width: min(320px, calc(100% - 28px)); max-height: calc(100% - 48px); overflow: auto; background: rgba(11,21,34,.96); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: grid; gap: 6px; }
.card h2 { font-family: var(--display); font-size: 22px; font-weight: 600; margin: 0; line-height: 1.05; padding-right: 24px; }
.card .prov { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.card dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 4px 0 0; font-size: 13px; }
.card dt { color: var(--muted); }
.card dd { margin: 0; text-align: right; font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; }
.card a { color: var(--ice); }
.card .verdict { font-size: 12.5px; margin-top: 4px; }
.card > button { position: absolute; top: 8px; right: 8px; background: transparent; border: 0; color: var(--muted); font-size: 18px; cursor: pointer; line-height: 1; padding: 4px; }

.zoom { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); z-index: 2; display: grid; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: rgba(6,11,20,.78); }
.zoom button { width: 36px; height: 36px; font-family: var(--mono); font-size: 18px; line-height: 1; color: var(--fg); background: transparent; border: 0; cursor: pointer; }
.zoom button + button { border-top: 1px solid var(--line); }
.zoom button:hover { background: rgba(143,195,255,.12); }

button:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; }

/* Controls under the globe */
.controls { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px; display: grid; gap: 12px; }
.controls .row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.controls label, .ctl-k { font-family: var(--display); font-size: 20px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.controls output { font-family: var(--mono); font-size: 22px; color: var(--lit); font-variant-numeric: tabular-nums; }
.controls output small { font-size: 13px; color: var(--muted); }
input[type="range"] { width: 100%; accent-color: var(--ice); height: 28px; margin: 0; }
.ticks { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: -6px; }
.ctls { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px 28px; border-top: 1px solid var(--line); padding-top: 12px; }
.ctl { display: grid; gap: 6px; align-content: start; }
.ctl-k { font-size: 16px; }
.ctl-n { font-size: 12px; color: var(--muted); }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button { font-family: var(--mono); font-size: 12px; letter-spacing: .03em; color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 8px; padding: 7px 11px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.seg button:hover { border-color: #2e4c6f; color: var(--fg); }
.seg button[aria-pressed="true"] { color: var(--night); background: var(--ice); border-color: var(--ice); }
.seg .cnt { opacity: .7; }
.mk { display: inline-block; width: 11px; height: 11px; }
.mk.dia { background: var(--ice); transform: rotate(45deg) scale(.82); border-radius: 1px; }
.mk.tri { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 11px solid var(--mine); }
.seg button[aria-pressed="true"] .mk.dia { background: var(--night); }
.seg button[aria-pressed="true"] .mk.tri { border-bottom-color: var(--night); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12.5px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.legend i.glow { background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.28); width: 7px; height: 7px; margin: 0 2px; }
.gen-note { margin: 0; font-size: 12px; color: var(--muted); }
.gen-note:empty { display: none; }

/* Tables */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px; display: grid; gap: 10px; }
.sec { font-family: var(--display); font-size: 24px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; margin: 0; line-height: 1.05; }
.summary { margin: 0; max-width: 80ch; color: var(--fg); }
.summary:empty { display: none; }
.foot { margin: 0; font-size: 12.5px; color: var(--muted); max-width: 90ch; }
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; -webkit-overflow-scrolling: touch; }
.tbl { width: 100%; min-width: 920px; border-collapse: collapse; font-size: 13px; }
.tbl.small { min-width: 620px; }
.tbl th { text-align: left; font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; background: rgba(6,11,20,.5); }
.tbl td { padding: 8px 10px; border-bottom: 1px solid rgba(31,53,80,.6); vertical-align: top; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr[data-site], .tbl tbody tr[data-mine] { cursor: pointer; }
.tbl tbody tr[data-site]:hover, .tbl tbody tr[data-mine]:hover { background: rgba(143,195,255,.07); }
.tbl .num { text-align: right; font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl td:nth-child(2), .tbl td:first-child { white-space: nowrap; }
.tbl tr.near td { color: var(--muted); }
.tbl tr.near b { color: var(--fg); font-weight: 500; }
.tbl tr.group td { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--diesel); background: rgba(226,165,60,.06); }
.tbl tr.empty td { color: var(--muted); }
.muted { color: var(--muted); }
.lit { color: var(--lit); font-weight: 600; }
.tag { display: inline-block; font-family: var(--mono); font-size: 10px; letter-spacing: .04em; color: var(--night); background: var(--ice); border-radius: 4px; padding: 0 5px; margin-left: 4px; vertical-align: 1px; }

.notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 18px; }
.notes section { min-width: 0; }
.notes h3 { font-family: var(--display); font-size: 18px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 6px; }
.notes p, .notes li { font-size: 13.5px; color: var(--muted); max-width: 65ch; }
.notes p { margin: 0 0 8px; }
.notes ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.notes a { color: var(--ice); text-underline-offset: 2px; word-break: break-word; }
.notes strong { color: var(--fg); font-weight: 600; }
.credit { font-size: 12px; color: var(--none); margin: 0; }

/* Cesium chrome */
#globe .cesium-viewer, #globe .cesium-widget { width: 100%; height: 100%; }
#globe .cesium-widget-credits { font-size: 10px; opacity: .75; }
#globe .cesium-viewer-bottom { left: 8px !important; right: 0; bottom: calc(4px + env(safe-area-inset-bottom) + var(--lift) + var(--bleed)) !important; }   /* Cesium sets these inline */
.loading { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; font-family: var(--mono); font-size: 12px; color: var(--muted); letter-spacing: .06em; pointer-events: none; }

/* Intro: the Toronto shot with one play button on it. */
.play { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .7s ease, transform .7s ease, visibility .7s; }

.play { position: absolute; left: 50%; bottom: calc(26px + env(safe-area-inset-bottom) + var(--lift) + var(--bleed)); z-index: 3; display: flex; align-items: center; gap: 12px; padding: 7px 20px 7px 7px; border-radius: 999px; border: 1px solid rgba(255,255,255,.24); background: rgba(6,11,20,.55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 14px 40px rgba(0,0,0,.4); color: var(--fg); cursor: pointer; text-align: left; white-space: nowrap; transform: translate(-50%, 12px); }
.stage.intro .play.ready { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); }
.stage.intro .play.ready:hover { background: rgba(6,11,20,.75); transform: translate(-50%, -2px); }
.play:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; }
.play-ring { position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--lit); display: grid; place-items: center; }
.play-ring svg { width: 20px; height: 20px; fill: var(--night); margin-left: 3px; }
.play-ring::before, .play-ring::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--lit); animation: playPulse 2.6s ease-out infinite; }
.play-ring::after { animation-delay: 1.3s; }
@keyframes playPulse { from { transform: scale(1); opacity: .7; } to { transform: scale(1.9); opacity: 0; } }
.play-text b { display: block; font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1; letter-spacing: .1em; text-transform: uppercase; }
.play-text small { display: block; margin-top: 4px; font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: .03em; }
@media (prefers-reduced-motion: reduce) { .play-ring::before, .play-ring::after { animation: none; } }

/* Opening video (pre-rendered in Google Earth Studio). It covers the globe until the flight hands over. */
.intro-vid { position: absolute; inset: 0; z-index: 1; overflow: hidden; background: var(--night); will-change: opacity, filter; }
.iv-in { position: absolute; inset: 0; }
/* No autoplay (an iPhone in Low Power Mode): the still pans slowly side to side inside its crop, no zoom. */
.intro-vid.sway #vPoster { animation: ivPan 24s ease-in-out infinite; }
@keyframes ivPan {
  0%, 100% { object-position: 50% 50%; }
  25% { object-position: 47.5% 50%; }
  75% { object-position: 52.5% 50%; }
}
.intro-vid img, .intro-vid video, .intro-vid canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
.intro-vid video.launch { z-index: 1; opacity: 0; }
/* iPhones won't play a video they consider hidden (opacity 0), so nothing is hidden that way: the still sits
   on top of the loop and fades out once the loop plays, and the chosen launch waits, visible, under the loop. */
#vHold, .intro-vid canvas.hold-canvas { z-index: 2; }
#vPoster { z-index: 3; transition: opacity .2s linear; }
.intro-vid.live #vPoster { opacity: 0; }
.vid-credit { position: absolute; z-index: 4; left: 12px; bottom: calc(8px + env(safe-area-inset-bottom) + var(--lift) + var(--bleed)); max-width: calc(50% - 190px); text-align: left; font-size: 10px; line-height: 1.3; color: rgba(255,255,255,.8); text-shadow: 0 1px 2px rgba(0,0,0,.7); pointer-events: none; }
.stage.vid .loading, .stage:has(#introVid) .loading { display: none; }
.stage.vid .zoom { opacity: 0; pointer-events: none; }
.stage.nogl #globe { display: none; }
/* No backdrop blur over the playing video: re-blurring every video frame costs smoothness. */
.stage.vid .play { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(6,11,20,.66); }
.stage.vid .hud { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(6,11,20,.86); }
@media (max-width: 640px) { .vid-credit { max-width: calc(100% - 24px); font-size: 9px; } }

@media (max-width: 760px) {
  .stats { grid-template-columns: repeat(2, auto); }
  .stat.hi { border-right: 0; padding-right: 0; }
}
@media (max-width: 640px) {
  .stats { gap: 6px 18px; }
  .card { left: 10px; width: calc(100% - 20px); }
  .play { bottom: calc(52px + env(safe-area-inset-bottom) + var(--lift) + var(--bleed)); padding-right: 16px; }
  .play-text small { display: none; }
}