/*
 * The look, after Snowboard Trips: monochrome and fine, and dark only. One grotesk throughout,
 * ultra-light for figures and names and in small tracked capitals for labels; hairlines instead
 * of boxes; and one splash of neon, only for what you picked and for now. These are the tokens:
 * map.css builds on them, and js/map.js repeats the colours the map needs as numbers.
 */

:root {
  color-scheme: dark;
  --bg: #080808;
  --bg-raised: #0e0e0e;
  --ink: #f3f1ec;
  --ink-2: rgb(243 241 236 / 0.68);
  --ink-3: rgb(243 241 236 / 0.42);
  --ink-4: rgb(243 241 236 / 0.16);
  --ink-5: rgb(243 241 236 / 0.07);
  --neon: #fff01f;
  --neon-glow: rgb(255 240 31 / 0.24);
  --font: 'Hanken Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --display-weight: 200;
  --display-tracking: -0.035em;
  --caps-size: 10px;
  --caps-tracking: 0.18em;
  --lift-text: 0 0 18px rgb(0 0 0 / 0.75), 0 1px 2px rgb(0 0 0 / 0.6);
  --gutter: 40px;
  --fade: 0.6s ease;
}

@media (max-width: 860px) {
  :root {
    --gutter: 20px;
  }
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 300 13px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
}

button,
input {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 3px;
}

/* Elements styled with display: flex would otherwise ignore the hidden attribute */
[hidden] {
  display: none !important;
}

.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;
}

/* Icons are drawn in hairlines; charts set their own strokes and fills */
svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

svg text {
  stroke: none;
}

/* Small tracked capitals: labels and controls */
.caps {
  font-size: var(--caps-size);
  font-weight: 400;
  letter-spacing: var(--caps-tracking);
  text-transform: uppercase;
}

.wordmark {
  color: var(--ink);
  font-size: var(--caps-size);
  font-weight: 500;
  letter-spacing: 0.32em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.neon-dot {
  display: inline-block;
  flex: none;
  width: 7px;
  height: 7px;
  border: 1px solid #000;
  border-radius: 50%;
  background: var(--neon);
  box-shadow:
    0 0 0 3px var(--neon-glow),
    0 0 10px var(--neon-glow);
}

/* A station picker's suggestions (station-picker.js), under its field */
.station-options {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  z-index: 10;
  max-height: 22rem;
  margin: 0;
  padding: 6px 0;
  overflow-y: auto;
  list-style: none;
  border: 1px solid var(--ink-4);
  background: var(--bg-raised);
}

.station-option {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 8px 14px;
  color: var(--ink-2);
  font-size: 14px;
  cursor: pointer;
}

.station-option[aria-selected='true'],
.station-option:hover {
  background: var(--ink-5);
  color: var(--ink);
}

.station-code {
  color: var(--ink-3);
  font-size: var(--caps-size);
  font-weight: 400;
  letter-spacing: var(--caps-tracking);
}