/* ==========================================================================
   Where Would I Be…?  —  styles

   ONE layout rule, and everything here follows from it:

       top bar   |  fixed, thin, never grows
       the globe |  the whole middle of the screen. NOTHING floats over it.
       the dock  |  fixed, bottom centre. Holds the picker, then the clock.

   The globe is the answer to the question — you are meant to watch a dot slide
   across the Earth — so covering it with a panel defeats the entire app. The
   answer is therefore one sentence inside the dock, and everything deeper
   lives in a sheet that only exists while you are deliberately holding it open.

   Two colours carry meaning and are never used for decoration:
       --now   cyan   where the ground is today
       --then  coral  where it ends up
   ========================================================================== */

:root {
  --void:   #05050c;
  /* 0.92, not 0.86. The dock floats over the globe, and over bright land the
     thinner glass dragged small text down to 2.88:1 — below AA. */
  --panel:  rgba(13, 14, 26, 0.92);
  --raise:  rgba(255, 255, 255, 0.05);
  --line:   rgba(255, 255, 255, 0.10);
  --line-2: rgba(255, 255, 255, 0.06);

  /* Every one of these clears WCAG AA (4.5:1) against the dock at its worst
     case — 92% glass sitting over the brightest land on the globe. --faint is
     the tight one at 4.7:1; it is not allowed to get any darker. */
  --text:  #EFEDF8;   /* 12.5:1 */
  --dim:   #A29FBA;   /*  6.5:1 */
  --faint: #8B88A3;   /*  4.7:1 */

  --now:   #3DDBFF;   /* today */
  --then:  #FF7D8E;   /* where it ends up */
  --other: #FFC247;   /* the second place, in compare */
  --near:  #5EEAD4;   /* "closer than today", in the neighbours list */

  /* Boundary colours. Only ever on screen next to their key. */
  --rift:  #FF7A3D;
  --crush: #6FA4FF;
  --slide: #FFD24A;

  --shadow: 0 16px 44px rgba(0, 0, 0, 0.55);
  --r:  16px;
  --r2: 11px;

  --topbar-h: 56px;
  --dock-w: min(460px, calc(100vw - 24px));
  --dock-h: 200px;          /* measured at runtime */
  --gap: 12px;

  --ui:   'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --disp: 'Bricolage Grotesque', var(--ui);
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --glass: blur(20px) saturate(150%);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--void);
  color: var(--text);
  font-family: var(--ui);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
/* A ring that survives both the dark chrome and the bright globe: the cyan
   carries the meaning, the dark halo keeps it visible over pale continents. */
:focus-visible {
  outline: 2px solid var(--now);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(5, 5, 12, 0.85);
  border-radius: 6px;
}
#globe:focus-visible { outline-offset: -3px; box-shadow: none; }

.skip {
  position: fixed;
  top: 8px; left: 50%;
  z-index: 200;
  transform: translate(-50%, -160%);
  padding: 10px 18px;
  border-radius: 10px;
  background: var(--text);
  color: var(--void);
  font-weight: 600;
  text-decoration: none;
  transition: transform .15s var(--ease);
}
.skip:focus { transform: translate(-50%, 0); }

/* The reader asked for calm. Honour a system preference for less of it. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

#globe { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#labels { position: fixed; inset: 0; pointer-events: none; z-index: 2; }

/* ============================== top bar ================================== */

#topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: calc(var(--topbar-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 12px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 40;
  pointer-events: none;
  /* A wash rather than a bar, so the globe still reads underneath it. */
  background: linear-gradient(to bottom, rgba(5, 5, 12, 0.75), transparent);
}
#topbar > * { pointer-events: auto; }

.brand { display: flex; align-items: center; gap: 9px; flex: none; }
.brand-mark { width: 26px; height: 26px; flex: none; }
.brand h1 {
  margin: 0;
  font: 600 15px/1 var(--disp);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.brand h1 em { font-style: normal; color: var(--now); }

/* The mark stays put at every size and in every stage — it is the only thing
   on screen that says what this is. The wordmark is the part that gives way,
   and only where the place chip genuinely needs the room. */
@media (max-width: 620px) {
  body.stage-explore .brand h1 { display: none; }
}

.here-chip {
  display: none;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 0 1 auto;
  padding: 7px 8px 7px 12px;
  border-radius: 999px;
  background: var(--panel);
  backdrop-filter: var(--glass);
  border: 1px solid var(--line);
  text-align: left;
}
body.stage-explore .here-chip { display: flex; }
.here-chip:hover { border-color: rgba(255, 255, 255, 0.22); }
.here-dot {
  width: 8px; height: 8px; flex: none;
  border-radius: 50%;
  background: var(--now);
  box-shadow: 0 0 0 3px rgba(61, 219, 255, 0.18);
}
.here-name {
  font-weight: 600; font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.here-change {
  flex: none;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--dim);
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--raise);
}

.top-actions { margin-left: auto; display: flex; gap: 6px; flex: none; }
.icon-btn {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: var(--panel);
  backdrop-filter: var(--glass);
  border: 1px solid var(--line);
  color: var(--dim);
  transition: color .15s, border-color .15s;
}
.icon-btn:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.2); }
.icon-btn.is-on { color: var(--void); background: var(--text); border-color: transparent; }
.icon-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ============================== the key ================================== */
/*
  Only exists while the lines do. Anchored to the BOTTOM, never the top: the
  top-right corner already holds the layer menu and the about panel, and a key
  that hides behind the menu that switched it on is worse than no key at all.
*/

.legend {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(var(--dock-h) + 14px + env(safe-area-inset-bottom));
  z-index: 35;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px 7px 12px;
  border-radius: 12px;
  background: var(--panel);
  backdrop-filter: var(--glass);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.legend-list {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  font-size: 12px; color: var(--dim);
}
.legend-list li { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.legend-list i { width: 15px; height: 3px; border-radius: 2px; background: var(--c); flex: none; }
.legend-off {
  margin-left: auto; flex: none;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 7px;
  font-size: 17px; line-height: 1;
  color: var(--faint);
  background: var(--raise);
}
.legend-off:hover { color: var(--text); }

@media (min-width: 720px) {
  /* Wide enough for the dock to leave the bottom-left corner free. */
  .legend {
    right: auto;
    bottom: calc(14px + env(safe-area-inset-bottom));
    max-width: 240px;
    align-items: flex-start;
  }
  .legend-list { flex-direction: column; gap: 7px; }
}

/* =============================== the dock ================================ */

.dock {
  position: fixed;
  left: 50%;
  bottom: calc(12px + env(safe-area-inset-bottom));
  width: var(--dock-w);
  z-index: 45;
  padding: 14px;
  border-radius: var(--r);
  background: var(--panel);
  backdrop-filter: var(--glass);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  transform: translateX(-50%);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}

/* Exactly one dock is ever real. The other is not merely invisible — it is
   out of the accessibility tree and out of the hit-testing, so a stray tap
   can never land on the thing you cannot see. */
body.stage-pick    #timebar,
body.stage-explore #start {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(10px);
}

/* ------------------------------ the picker ------------------------------- */

.start-title {
  margin: 0 0 4px;
  font: 700 23px/1.15 var(--disp);
  letter-spacing: -0.02em;
}
.start-title em { font-style: normal; color: var(--now); }
.start-lede {
  margin: 0 0 13px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--dim);
}

.big-btn {
  width: 100%;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border-radius: var(--r2);
  background: linear-gradient(180deg, rgba(61, 219, 255, 0.14), rgba(61, 219, 255, 0.07));
  border: 1px solid rgba(61, 219, 255, 0.3);
  text-align: left;
  transition: border-color .15s, background .15s;
}
.big-btn:hover:not(:disabled) { border-color: rgba(61, 219, 255, 0.55); }
.big-btn:disabled { opacity: 0.6; cursor: progress; }
.big-btn svg { width: 21px; height: 21px; flex: none; fill: none; stroke: var(--now); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.big-btn span { font-weight: 600; font-size: 14.5px; }
.big-btn small { display: block; font-weight: 400; font-size: 11.5px; color: var(--faint); margin-top: 1px; }

.search {
  position: relative;
  margin-top: 9px;
  display: flex; align-items: center;
}
.search svg {
  position: absolute; left: 12px;
  width: 16px; height: 16px;
  fill: none; stroke: var(--faint); stroke-width: 1.8; stroke-linecap: round;
  pointer-events: none;
}
.search input {
  width: 100%;
  padding: 11px 12px 11px 36px;
  border-radius: var(--r2);
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--line);
  font-size: 14.5px;
  transition: border-color .15s;
}
.search input::placeholder { color: var(--faint); }
.search input:focus { outline: none; border-color: rgba(61, 219, 255, 0.5); }
.search input::-webkit-search-cancel-button { filter: invert(0.6); }

.results:not(:empty) {
  margin-top: 8px;
  max-height: 210px;
  overflow-y: auto;
  border-radius: var(--r2);
  border: 1px solid var(--line-2);
  background: rgba(0, 0, 0, 0.24);
}
.results button {
  width: 100%;
  display: block;
  padding: 9px 12px;
  text-align: left;
  border-bottom: 1px solid var(--line-2);
}
.results button:last-child { border-bottom: 0; }
.results button:hover, .results button.is-active { background: var(--raise); }
.r-name { display: block; font-weight: 600; font-size: 14px; }
.r-meta { display: block; font-size: 11.5px; color: var(--faint); margin-top: 1px; }

.start-foot {
  margin-top: 11px;
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
}
.mini-btn {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--raise);
  border: 1px solid var(--line);
  font-size: 12.5px; font-weight: 600;
  color: var(--dim);
  transition: color .15s, border-color .15s;
}
.mini-btn:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.22); }
.tip { font-size: 12px; color: var(--faint); }

/* ------------------------ the answer and the clock ----------------------- */

.answer-bar { margin-bottom: 13px; }

.a-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 3px;
}
.a-kicker {
  font: 600 11px/1 var(--ui);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--then);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.a-more {
  margin-left: auto; flex: none;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--raise);
  border: 1px solid var(--line);
  font-size: 12px; font-weight: 600;
  color: var(--dim);
  transition: color .15s, border-color .15s;
}
.a-more:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.22); }

.a-line {
  margin: 0;
  font: 500 17px/1.32 var(--disp);
  letter-spacing: -0.01em;
  /* Exactly two lines, always — clamped if the sentence is long, padded out if
     it is short. The dock therefore has ONE height for its whole life, which is
     what stops the slider walking up and down the screen as you scrub, and what
     lets the globe trust its own framing. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.64em;
}
.a-line .cy { color: var(--now); }
.a-line strong { font-weight: 700; color: var(--then); }

.a-meta {
  /* 11.5px: small, but --faint clears AA and the same words are in the sheet
     at full size. */
  /* Three facts, one line, deliberately quiet: it is there for the glance you
     take after reading the sentence, not instead of it. */
  margin: 5px 0 0;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.a-meta:empty { display: none; }

/* ------------------------------- the clock ------------------------------- */

.time-row { display: flex; align-items: center; gap: 10px; }

#timeSlider {
  flex: 1 1 auto;
  min-width: 0;
  -webkit-appearance: none; appearance: none;
  height: 26px;
  background: none;
}
#timeSlider::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.14) 50%, rgba(255, 125, 142, 0.38));
}
#timeSlider::-moz-range-track {
  height: 8px;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.14) 50%, rgba(255, 125, 142, 0.38));
}
#timeSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px; height: 24px;   /* WCAG 2.5.8 */
  margin-top: -8px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--then);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  cursor: grab;
}
#timeSlider::-moz-range-thumb {
  width: 24px; height: 24px;   /* WCAG 2.5.8 */
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--then);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  cursor: grab;
}
#timeSlider:active::-webkit-slider-thumb { cursor: grabbing; }

.ghost {
  flex: none;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--raise);
  border: 1px solid var(--line);
  font-size: 12.5px; font-weight: 600;
  color: var(--dim);
  transition: color .15s, border-color .15s;
}
.ghost:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.22); }

.play {
  flex: none;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--text);
  color: var(--void);
  transition: transform .12s var(--ease);
}
.play:hover { transform: scale(1.06); }
.play.is-playing { background: var(--then); color: #1a0409; }
.play svg { width: 19px; height: 19px; fill: currentColor; }

.presets {
  margin-top: 11px;
  display: flex;
  gap: 5px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.presets::-webkit-scrollbar { display: none; }
.presets button {
  flex: 1 0 auto;
  padding: 6px 9px;
  border-radius: 8px;
  background: var(--raise);
  border: 1px solid transparent;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--dim);
  white-space: nowrap;
  transition: color .15s, border-color .15s, background .15s;
}
.presets button:hover { color: var(--text); }
.presets button.is-on {
  color: var(--then);
  border-color: rgba(255, 125, 142, 0.45);
  background: rgba(255, 125, 142, 0.1);
}

/* =============================== the sheet =============================== */
/* Opened on purpose, closed by default, and it is allowed to cover the globe
   because while it is open the globe is not what you are looking at. */

.scrim {
  position: fixed; inset: 0;
  z-index: 55;
  background: rgba(3, 3, 8, 0.5);
  backdrop-filter: blur(2px);
  animation: fade .18s var(--ease);
}
@keyframes fade { from { opacity: 0 } }

.sheet {
  position: fixed;
  z-index: 60;
  left: 50%;
  bottom: 0;
  width: min(520px, 100vw);
  max-height: 82vh;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  border-radius: var(--r) var(--r) 0 0;
  background: #0c0d18;
  border: 1px solid var(--line);
  border-bottom: 0;
  box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.6);
  animation: rise .22s var(--ease);
}
@keyframes rise { from { transform: translate(-50%, 16px); opacity: 0 } }

.sheet-head {
  position: relative;
  flex: none;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--line-2);
  display: flex; align-items: center; gap: 10px;
}
.grab {
  position: absolute;
  top: 6px; left: 50%;
  transform: translateX(-50%);
  width: 34px; height: 4px;
  border-radius: 2px;
  background: var(--line);
}
.sheet-head h2 {
  margin: 0;
  font: 700 16px/1.2 var(--disp);
  letter-spacing: -0.01em;
}
.sheet-close {
  margin-left: auto;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 9px;
  font-size: 21px; line-height: 1;
  color: var(--dim);
  background: var(--raise);
}
.sheet-close:hover { color: var(--text); }

.sheet-body {
  padding: 14px 16px calc(18px + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
}

@media (min-width: 900px) {
  /* On a wide screen the sheet is a column beside the globe, so the planet
     stays on screen while you read about it. */
  .sheet {
    left: auto; right: 14px;
    top: calc(var(--topbar-h) + 10px);
    bottom: 14px;
    width: 380px;
    max-height: none;
    transform: none;
    border-radius: var(--r);
    border-bottom: 1px solid var(--line);
    animation: slide .22s var(--ease);
  }
  @keyframes slide { from { transform: translateX(14px); opacity: 0 } }
  .scrim { display: none !important; }
  .grab { display: none; }
}

/* ------------------------- contents of the sheet ------------------------- */

.coords {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 4px 12px;
  padding: 10px 12px;
  border-radius: var(--r2);
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--line-2);
  font-family: var(--mono);
}
.coords b { font-size: 14.5px; font-weight: 500; white-space: nowrap; }
.coords small { font-size: 11.5px; color: var(--faint); margin-left: auto; }

.tiles {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}
.tile {
  padding: 9px 10px;
  border-radius: var(--r2);
  background: var(--raise);
  border: 1px solid var(--line-2);
  min-width: 0;
}
.t-k { font-size: 10px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--faint); }
.t-v {
  margin-top: 3px;
  display: flex; align-items: center; gap: 5px;
  font-size: 14px; font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.t-v .arrow { width: 14px; height: 14px; flex: none; color: var(--then); }
.t-s { margin-top: 2px; font-size: 11px; color: var(--faint); line-height: 1.3; }

.note { margin: 10px 0 0; font-size: 12.5px; color: var(--faint); }
.note:empty { display: none; }

.next-step {
  width: 100%;
  margin-top: 12px;
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px;
  border-radius: var(--r2);
  background: rgba(255, 194, 71, 0.08);
  border: 1px solid rgba(255, 194, 71, 0.28);
  text-align: left;
  color: var(--other);
  transition: border-color .15s;
}
.next-step:hover { border-color: rgba(255, 194, 71, 0.55); }
.next-step span { font-weight: 600; font-size: 14px; }
.next-step small { display: block; font-weight: 400; font-size: 11.5px; color: var(--faint); margin-top: 1px; }
.next-step > span:last-child { margin-left: auto; }

.fold {
  border-top: 1px solid var(--line-2);
  margin-top: 4px;
}
.fold > summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 0;
  display: flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 14px;
}
.fold > summary::-webkit-details-marker { display: none; }
.fold .chev {
  margin-left: auto; flex: none;
  width: 17px; height: 17px;
  fill: none; stroke: var(--faint); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .18s var(--ease);
}
.fold[open] .chev { transform: rotate(180deg); }
.fold-body { padding-bottom: 14px; font-size: 13px; color: var(--dim); }

.rows { display: grid; gap: 7px; }
.row { display: flex; align-items: baseline; gap: 10px; font-size: 13px; }

/* ------------------------ sheet internals, cont. ------------------------- */

.row .k { color: var(--faint); font-size: 12.5px; }
.row .v { margin-left: auto; text-align: right; font-weight: 600; font-size: 13px; }
.row .v small { display: block; font-weight: 400; font-size: 11px; color: var(--faint); }
.row .v.mono, .mono { font-family: var(--mono); font-weight: 500; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 11px 3px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 42%, transparent);
  font-size: 12.5px; font-weight: 600;
  color: var(--text);
}
.chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; }

.tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
}
.tag.rift  { background: rgba(255, 122, 61, 0.15);  color: var(--rift); }
.tag.crush { background: rgba(111, 164, 255, 0.15); color: var(--crush); }
.tag.slide { background: rgba(255, 210, 74, 0.15);  color: var(--slide); }

/* --- the neighbours list --- */
.nbr { display: grid; gap: 13px; }
.nbr-top { display: flex; align-items: baseline; gap: 10px; }
.nbr-name { font-weight: 600; font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nbr-km { margin-left: auto; flex: none; font-family: var(--mono); font-size: 12px; color: var(--dim); }
.nbr-was { margin-top: 3px; font-size: 11px; color: var(--faint); }
.bar {
  margin-top: 5px;
  height: 4px;
  border-radius: 2px;
  background: var(--raise);
  overflow: hidden;
}
.bar i { display: block; height: 100%; border-radius: 2px; background: var(--c); }

/* --- the two-place picker inside compare --- */
.pair { display: grid; gap: 7px; margin-bottom: 12px; }
.pair-row {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px;
  border-radius: var(--r2);
  background: var(--raise);
  border: 1px solid var(--line-2);
}
.pair-row i { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--c); }
.pair-row b {
  font-weight: 600; font-size: 13.5px;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pair-row button {
  margin-left: auto; flex: none;
  min-height: 24px;          /* WCAG 2.5.8 */
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--dim);
}
.pair-row button:hover { color: var(--text); }

/* --- the distance-over-time curve --- */
.chart { width: 100%; height: 112px; display: block; overflow: visible; }
.chart .grid  { stroke: var(--line); stroke-width: 1; }
.chart .area  { fill: url(#chartFade); stroke: none; }
.chart .curve { fill: none; stroke: var(--now); stroke-width: 2; stroke-linejoin: round; }
.chart .mark  { stroke: var(--then); stroke-width: 1; stroke-dasharray: 3 3; }
.chart .dot   { fill: var(--then); stroke: #0c0d18; stroke-width: 2; }
.chart .axis  { fill: var(--faint); font-family: var(--mono); font-size: 9px; }

/* ============================== popovers ================================= */

.popover {
  position: fixed;
  top: calc(var(--topbar-h) + env(safe-area-inset-top) + 4px);
  right: 12px;
  z-index: 70;
  width: min(280px, calc(100vw - 24px));
  padding: 12px;
  border-radius: var(--r);
  background: #0c0d18;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  animation: pop .15s var(--ease);
}
@keyframes pop { from { opacity: 0; transform: translateY(-6px) } }
.popover h3 {
  margin: 0 0 9px;
  font: 600 11px/1 var(--ui);
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--faint);
}
.popover label {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 7px 8px;
  border-radius: 9px;
  cursor: pointer;
  font-size: 13.5px;
}
.popover label:hover { background: var(--raise); }
.popover label.lead {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-2);
  margin-bottom: 6px;
}
.popover label small { display: block; font-size: 11px; color: var(--faint); }
.popover input[type=checkbox] {
  margin: 2px 0 0;
  width: 15px; height: 15px;
  flex: none;
  accent-color: var(--now);
}
.popover-note { margin: 9px 2px 0; font-size: 11.5px; color: var(--faint); line-height: 1.4; }

/* =============================== modal =================================== */

.modal {
  position: fixed; inset: 0;
  z-index: 80;
  display: grid; place-items: center;
  padding: 16px;
  background: rgba(3, 3, 8, 0.66);
  backdrop-filter: blur(4px);
  animation: fade .18s var(--ease);
}
.modal-card {
  position: relative;
  width: min(560px, 100%);
  max-height: 86vh;
  overflow-y: auto;
  padding: 24px;
  border-radius: var(--r);
  background: #0c0d18;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.modal-close {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 9px;
  font-size: 22px; line-height: 1;
  color: var(--dim);
  background: var(--raise);
}
.modal-card h2 { margin: 0 0 8px; font: 700 22px/1.2 var(--disp); letter-spacing: -0.02em; }
.modal-card h2 em { font-style: normal; color: var(--now); }
.modal-card h3 { margin: 20px 0 6px; font: 600 12px/1 var(--ui); letter-spacing: 0.09em; text-transform: uppercase; color: var(--faint); }
.modal-card p { margin: 0 0 9px; font-size: 13.5px; color: var(--dim); line-height: 1.55; }
.modal-card .lede { font-size: 15px; color: var(--text); }
.modal-card strong { color: var(--text); }
.modal-card em { color: var(--now); font-style: normal; }
.sources { margin: 0; padding-left: 16px; font-size: 12px; color: var(--faint); line-height: 1.65; }
.fineprint { margin-top: 18px; font-size: 11.5px; color: var(--faint); }

/* ================================ toast ================================== */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--dock-h) + 24px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 90;
  max-width: calc(100vw - 32px);
  padding: 9px 15px;
  border-radius: 999px;
  background: #16172a;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  font-size: 13px;
  animation: pop .18s var(--ease);
}
.toast.warn { border-color: rgba(255, 125, 142, 0.45); color: var(--then); }

/* =============================== booting ================================= */

#boot {
  position: fixed; inset: 0;
  z-index: 100;
  display: grid; place-items: center;
  background: var(--void);
  transition: opacity .5s var(--ease);
}
#boot.done { opacity: 0; pointer-events: none; }
.boot-inner { text-align: center; padding: 20px; }
.boot-globe { position: relative; width: 58px; height: 58px; margin: 0 auto 20px; }
.boot-globe span {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--now);
  animation: spin 1.5s linear infinite;
}
.boot-globe span:nth-child(2) { inset: 7px; border-top-color: var(--then); animation-duration: 2.1s; animation-direction: reverse; }
.boot-globe span:nth-child(3) { inset: 14px; border-top-color: var(--other); animation-duration: 2.7s; }
@keyframes spin { to { transform: rotate(360deg) } }
.boot-title { margin: 0 0 8px; font: 700 26px/1.15 var(--disp); letter-spacing: -0.02em; }
.boot-title em { font-style: normal; color: var(--now); }
.boot-status { margin: 0 0 16px; font-size: 13px; color: var(--faint); min-height: 19px; }
.boot-bar { width: 190px; height: 3px; margin: 0 auto; border-radius: 2px; background: var(--raise); overflow: hidden; }
.boot-bar i { display: block; height: 100%; width: 0; border-radius: 2px; background: var(--now); transition: width .3s var(--ease); }

.boot-error {
  max-width: 340px;
  margin: 14px auto 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--then);
}
.boot-error code {
  font-family: var(--mono);
  font-size: 11.5px;
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--raise);
}

.noscript {
  position: fixed; inset: 0;
  z-index: 200;
  display: grid; place-items: center;
  padding: 30px; text-align: center;
  background: var(--void);
}

/* ============================= globe labels ============================== */

.glabel {
  position: absolute;
  top: 0; left: 0;
  padding-bottom: 9px;
  font-size: 12px; font-weight: 600;
  line-height: 1.15;
  white-space: nowrap;
  color: var(--c);
  pointer-events: none;
  transition: opacity .18s var(--ease);
}
/* A shadow is not a contrast guarantee — these sit over whatever the globe
   happens to be showing, which includes near-white ice. So the text gets an
   actual backdrop, drawn behind only the words. */
.glabel > span {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 7px;
  background: rgba(5, 5, 12, 0.82);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}
.glabel small {
  display: block;
  font-size: 10.5px; font-weight: 500;
  color: rgba(255, 255, 255, 0.78);
}
.glabel.hide { opacity: 0; }
.glabel.below { padding: 9px 0 0; }

/* ============================== narrow ================================== */

@media (max-width: 460px) {
  .start-title { font-size: 21px; }
  .a-line { font-size: 16px; }
  .dock { padding: 12px; }
  .results:not(:empty) { max-height: 168px; }
}

/* A short landscape phone has no room for prose. Trim the picker's ledes
   rather than letting the dock eat the entire globe. */
@media (max-height: 560px) {
  .start-lede { display: none; }
  .presets { margin-top: 8px; }
  .answer-bar { margin-bottom: 10px; }
  .results:not(:empty) { max-height: 120px; }
}