/* ---- tokens -------------------------------------------------------- */
:root {
  --concrete:   #E6E9EA;   /* sidewalk */
  --surface:    #F3F5F6;   /* raised paper */
  --ink:        #101F27;   /* slate text */
  --ink-soft:   #52646E;
  --dock:       #14507F;   /* an occupied slot */
  --dock-deep:  #0E3A5C;
  --lane:       #2F7A4F;   /* bike-lane green: what's open */
  --lane-lift:  #E2EFE7;
  --caution:    #9A6B12;
  --caution-bg: #F7EBCF;
  --rule:       #C3CACD;

  --slot-h: 30px;
  --step-0: 1.0625rem;   /* 17px */
  --step--1: 0.8125rem;
  --step-1: 1.4rem;
  --step-2: 1.875rem;
  --step-3: 2.6rem;
  --count: clamp(2.4rem, 8vw, 3.4rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --concrete:  #121A1F;
    --surface:   #1A252B;
    --ink:       #E7EDF0;
    --ink-soft:  #9BADB6;
    --dock:      #3C7FB8;
    --dock-deep: #5A9BD1;
    --lane:      #6FCB96;
    --lane-lift: #1C3529;
    --caution:   #E8C26A;
    --caution-bg:#3A2F14;
    --rule:      #3A4A53;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--concrete);
  color: var(--ink);
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--step-0);
  line-height: 1.5;
  font-synthesis-weight: none;
}

.wrap { width: min(100% - 2.5rem, 62rem); margin-inline: auto; }

a { color: inherit; text-decoration-color: var(--rule); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

:focus-visible { outline: 2px solid var(--lane); outline-offset: 2px; border-radius: 1px; }

/* ---- masthead ------------------------------------------------------ */
.masthead {
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(1.75rem, 5vw, 3rem) clamp(1.5rem, 4vw, 2.25rem);
}

.masthead__title {
  margin: 0;
  font-size: var(--step-3);
  font-weight: 700;
  font-stretch: 78%;
  letter-spacing: 0.005em;
  line-height: 1;
}

.masthead__lede {
  margin: 0.5rem 0 0;
  max-width: 34ch;
  color: var(--ink-soft);
}

/* ---- finder -------------------------------------------------------- */
.finder { margin-top: clamp(1.5rem, 4vw, 2.25rem); }

.finder__label {
  display: block;
  font-size: var(--step-1);
  font-weight: 600;
  font-stretch: 88%;
  margin-bottom: 0.5rem;
}

.finder__field {
  position: relative;
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}

.finder__input {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: var(--step-1);
  font-stretch: 92%;
  color: var(--ink);
  background: var(--concrete);
  border: 1px solid var(--rule);
  border-bottom-width: 2px;
  border-radius: 2px;
  padding: 0.6rem 0.75rem;
}
.finder__input::placeholder { color: var(--ink-soft); opacity: 0.65; }
.finder__input:focus { border-bottom-color: var(--lane); }

.finder__go {
  flex: 0 0 auto;
  font: inherit;
  font-weight: 600;
  font-stretch: 92%;
  color: var(--surface);
  background: var(--dock);
  border: 1px solid var(--dock);
  border-radius: 2px;
  padding-inline: 1.1rem;
  cursor: pointer;
}
.finder__go:hover { background: var(--dock-deep); border-color: var(--dock-deep); }
@media (prefers-color-scheme: dark) { .finder__go { color: #0C161B; } }

.finder__hint {
  margin: 0.5rem 0 0;
  font-size: var(--step--1);
  color: var(--ink-soft);
}

/* ---- suggestions --------------------------------------------------- */
.suggest {
  position: absolute;
  z-index: 20;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 2px;
  box-shadow: 0 10px 28px -18px var(--ink);
  max-height: 17rem;
  overflow-y: auto;
}
.suggest[hidden] { display: none; }

.suggest__item {
  padding: 0.55rem 0.75rem;
  cursor: pointer;
  font-stretch: 92%;
  border-bottom: 1px solid var(--rule);
}
.suggest__item:last-child { border-bottom: 0; }
.suggest__item[aria-selected="true"],
.suggest__item:hover { background: var(--lane-lift); }

.suggest__place { display: block; }
.suggest__where { display: block; font-size: var(--step--1); color: var(--ink-soft); }

/* ---- recents ------------------------------------------------------- */
.recents {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  margin-top: 1rem;
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.recents[hidden] { display: none; }

.recents__lead { margin-right: 0.15rem; }

.recents__chip {
  font: inherit;
  font-size: var(--step--1);
  font-stretch: 92%;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  cursor: pointer;
}
.recents__chip:hover { border-color: var(--lane); color: var(--lane); }

/* ---- board (summary / state line) ---------------------------------- */
.board {
  margin: clamp(1.5rem, 4vw, 2.25rem) 0 0;
  max-width: 54ch;
  color: var(--ink-soft);
  font-stretch: 96%;
}
.board strong {
  color: var(--ink);
  font-weight: 600;
}
.board--warn { color: var(--caution); }

.board__age {
  margin: 0.35rem 0 0;
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.board__age:empty { display: none; }

/* ---- results: list beside a map ------------------------------------ */
.results {
  display: grid;
  gap: 1.25rem;
  margin-bottom: 3rem;
}

@media (min-width: 60rem) {
  .results {
    grid-template-columns: 1fr minmax(19rem, 24rem);
    align-items: start;
    gap: 2rem;
  }
  .results__map { grid-column: 2; grid-row: 1; position: sticky; top: 1.5rem; }
  .stations     { grid-column: 1; grid-row: 1; }
}

.results__map[hidden] { display: none; }

.map {
  height: 21rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--surface);
}
@media (min-width: 60rem) {
  .map { height: min(72vh, 36rem); }
}

/* Leaflet's own chrome, brought into the page's palette */
.leaflet-container {
  font-family: inherit;
  background: var(--surface);
}
.leaflet-bar a,
.leaflet-control-attribution {
  background: var(--surface);
  color: var(--ink-soft);
}
.leaflet-bar a { color: var(--ink); border-bottom-color: var(--rule); }
.leaflet-bar a:hover { background: var(--lane-lift); color: var(--ink); }
.leaflet-control-attribution a { color: var(--ink-soft); }

/* a station marker carries its own open-dock count */
.pin {
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-weight: 600;
  font-stretch: 96%;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  cursor: pointer;
  background: var(--lane);
  color: var(--surface);
  border: 2px solid var(--surface);
  box-shadow: 0 1px 5px -1px rgba(0, 0, 0, 0.5);
}
@media (prefers-color-scheme: dark) { .pin { color: #0C161B; } }

.pin--shut {
  background: var(--surface);
  color: var(--ink-soft);
  border-color: var(--rule);
}

.pin--picked {
  outline: 3px solid var(--dock);
  outline-offset: 2px;
  z-index: 1000;
}

/* where you asked about */
.here {
  border-radius: 50%;
  background: var(--dock);
  border: 3px solid var(--surface);
  box-shadow: 0 0 0 2px var(--dock);
}

.station--picked { background: var(--lane-lift); }

/* ---- station list -------------------------------------------------- */
.stations {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.station {
  cursor: pointer;
  scroll-margin-top: 1.5rem;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "name  count"
    "walk  count"
    "strip strip";
  column-gap: 1.25rem;
  align-items: baseline;
  padding: 1.15rem 0.5rem 1.25rem;
  border-bottom: 1px solid var(--rule);
}
.station:hover { background: var(--lane-lift); }

.station__name {
  grid-area: name;
  margin: 0;
  font-size: var(--step-1);
  font-weight: 600;
  font-stretch: 84%;
  line-height: 1.15;
}

.station__walk {
  grid-area: walk;
  margin: 0.2rem 0 0;
  font-size: var(--step--1);
  color: var(--ink-soft);
}

.station__count {
  grid-area: count;
  align-self: start;
  text-align: right;
  line-height: 0.9;
}

.station__num {
  display: block;
  font-size: var(--count);
  font-weight: 600;
  font-stretch: 122%;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
  color: var(--lane);
}

.station__unit {
  display: block;
  margin-top: 0.3rem;
  font-size: var(--step--1);
  font-stretch: 92%;
  color: var(--ink-soft);
}

.station--full .station__num,
.station--closed .station__num { color: var(--ink-soft); }

.station__flag {
  grid-area: walk;
  justify-self: start;
  margin: 0.35rem 0 0;
  font-size: var(--step--1);
  font-stretch: 92%;
  color: var(--caution);
  background: var(--caution-bg);
  padding: 0.1rem 0.45rem;
  border-radius: 2px;
}

/* the dock strip: one bar per real slot */
.strip {
  grid-area: strip;
  display: flex;
  gap: 2px;
  margin-top: 0.9rem;
  height: var(--slot-h);
}

.slot { flex: 1 1 0; min-width: 2px; border-radius: 1px; }
.slot--taken  { background: var(--dock); }
.slot--open   { border: 1px solid var(--lane); background: transparent; }
.slot--broken {
  background: repeating-linear-gradient(135deg, var(--rule) 0 2px, transparent 2px 5px);
  border: 1px solid var(--rule);
}

.station__num--moved { animation: lit 1.4s ease-out; }
@keyframes lit {
  0%   { color: var(--ink); background: var(--lane-lift); }
  100% { color: var(--lane); background: transparent; }
}

/* ---- footer -------------------------------------------------------- */
.colophon {
  padding-block: 1.5rem 3rem;
  border-top: 1px solid var(--rule);
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.colophon p { margin: 0; max-width: 62ch; }

/* ---- narrow -------------------------------------------------------- */
@media (max-width: 30rem) {
  .finder__field { flex-wrap: wrap; }
  .finder__go { flex: 1 0 100%; padding-block: 0.6rem; }
  .station { column-gap: 0.75rem; }
  :root { --slot-h: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}