:root {
  --color-text-primary:   #1a1a1a;
  --color-text-secondary: #6b6b6b;
  --color-text-tertiary:  #9a9a9a;
  --font-hand: 'Caveat', cursive;
  --font-mono: ui-monospace, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --color-text-primary:   #e8e8e8;
    --color-text-secondary: #a0a0a0;
    --color-text-tertiary:  #666666;
  }
}
body { background: #111; }

/* The rendered width here is the km-per-pixel contract: render.js measures this
   element and builds a viewBox to match, so one user unit is one CSS pixel.
   Uncapped, so the diagram uses whatever width the window offers. */
#diagram {
  display: block;
  width: 100%;
  overflow: visible; /* at low km/px the earth's arc reaches far past the viewBox */
}

/* === scale slider === */
#scale-slider-wrap {
  position: fixed;
  z-index: 101;
  left: 3em;
  top: 3em;
  /* Keep clear of the diagram's axis. render.js publishes its position as
     --axis-x, so retuning AXIS_RATIO moves this too; the 41vw fallback only
     covers the first paint before the script runs. */
  width: clamp(150px, calc(var(--axis-x, 41vw) - 90px), 260px);
  font-family: var(--font-hand);
  --ss-thumb: 18px;
}
.ss-readout {
  font-size: 24px;
  color: var(--color-text-secondary);
  margin-bottom: 0.25rem;
}
.ss-track { position: relative; }

#scale-slider {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
#scale-slider:focus { outline: none; }
#scale-slider::-webkit-slider-runnable-track {
  height: var(--ss-thumb);
  background: linear-gradient(var(--color-text-tertiary), var(--color-text-tertiary))
              center / 100% 1px no-repeat;
}
#scale-slider::-moz-range-track {
  height: var(--ss-thumb);
  background: linear-gradient(var(--color-text-tertiary), var(--color-text-tertiary))
              center / 100% 1px no-repeat;
}
#scale-slider::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: var(--ss-thumb);
  height: var(--ss-thumb);
  border-radius: 50%;
  background: var(--color-text-primary);
  border: none;
}
#scale-slider::-moz-range-thumb {
  width: var(--ss-thumb);
  height: var(--ss-thumb);
  border-radius: 50%;
  background: var(--color-text-primary);
  border: none;
}

/* markers sit under the track, inset by half a thumb so they line up */
.ss-marks {
  position: relative;
  height: 2.25em;
  margin-top: 2px;
  pointer-events: none;
}
.ss-mark {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  text-align: center;
  color: var(--color-text-tertiary);
  font-size: 16px;
  line-height: 1;
  /* tappable: reset the button, then pad out to a finger-sized target */
  pointer-events: auto;
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  font-family: inherit;
  padding: 0 4px 10px;
  min-width: 26px;
  cursor: pointer;
}
.ss-mark:focus { outline: none; }
.ss-mark:hover { color: var(--color-text-secondary); }
.ss-mark::before {
  content: '';
  display: block;
  width: 1px;
  height: 5px;
  margin: 0 auto 3px;
  background: currentColor;
}
.ss-mark.is-current,
.ss-mark.is-current:hover { color: var(--color-text-primary); }

/* === off-screen hints === */
#offscreen-hints {
  position: fixed;
  right: 6em;
  bottom: 3em;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}
.oh {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  padding: 4px;
  font-family: var(--font-hand);
  font-size: 24px;
  line-height: 1;
  color: var(--color-text-secondary);
  cursor: pointer;
}
.oh:hover { color: var(--color-text-primary); }
.oh-arrow { overflow: visible; }

/* === statement === */
#statement {
  position: fixed;
  z-index: 99;
  left: 3rem;   /* rem, not em — matches the slider's 3em at 16px root */
  bottom: 3rem;
  margin: 0;
  max-width: 20em;
  font-family: var(--font-hand);
  font-size: 22px;
  line-height: 1.4;
  color: var(--color-text-secondary);
  opacity: 0.75;
  text-wrap: pretty;
  pointer-events: none; /* never in the way of the diagram */
}

/* === leaving the gutter ===
   The slider and statement both hide in the empty column left of the axis. That
   gutter is 41% of the window, so each one collides with the diagram once the
   window shrinks past what it needs — and they need very different amounts, so
   they leave at different widths rather than sharing one breakpoint. */

/* The statement is the greedier of the two: 20em of text plus its 3rem inset
   wants ~490px of gutter, which the axis only clears above ~1250px. Below that
   it drops into the flow and becomes the coda at the end of the scroll. */
@media (max-width: 1250px) {
  #statement {
    position: static;
    max-width: 26em;
    margin: 2rem 1.25rem 1rem;
    pointer-events: auto;
  }
}

/* The slider needs only ~200px of gutter, so it holds on until ~700px. */
@media (max-width: 700px) {
  :root { --ss-bar-h: 7rem; } /* approximate; keeps the diagram's end clear of the bar */

  body { padding-bottom: var(--ss-bar-h); }

  /* Pinned to the bottom, not scrolled away at the top: at 25 km/px the page is
     two dozen screens tall, and the scale picker is the point of the app. */
  #scale-slider-wrap {
    inset: auto 0 0 0;
    width: auto;
    padding: 0.75rem 1.25rem 0.5rem;
    background: #111;
    border-top: 1px solid var(--color-text-tertiary);
  }

  /* body's padding-bottom keeps the coda clear of the slider bar */
  #statement { margin-bottom: 1.5rem; }
  #statement br { display: none; }

  #offscreen-hints {
    right: 1.5em;
    bottom: calc(var(--ss-bar-h) + 1rem);
  }
}