:root {
  color-scheme: light;
  --ink: #1c1915;
  --muted: #5c564c;
  --line: #e4ddd2;
  --paper: #f7f3ec;
  --card: #fffdf9;
  --go: #1f6b45;
  --lead: #8a5a12;
  --stop: #8d2f2f;
  --unknown: #6e675e;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.45 Georgia, "Iowan Old Style", Palatino, serif;
}

.top, main { width: min(960px, calc(100% - 32px)); margin: 0 auto; }

.top { padding: 28px 0 8px; }

.nav { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 22px; }

.nav a {
  color: var(--muted);
  font: 14px/1 ui-sans-serif, system-ui, sans-serif;
  text-decoration: none;
}

.nav a[aria-current="page"] { color: var(--ink); }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 18px;
  color: var(--muted);
  font: 14px/1.3 ui-sans-serif, system-ui, sans-serif;
}

.crumbs a { color: inherit; }

h2.section {
  margin: 28px 0 8px;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--muted);
  font: 12px/1.2 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1 { margin: 0; font-size: 40px; font-weight: 600; letter-spacing: -0.03em; }

.lede, .when { color: var(--muted); max-width: 42rem; }

.when { font: 15px/1.45 ui-sans-serif, system-ui, sans-serif; }

.when-box {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: end;
  margin: 20px 0 8px;
}

.presets { display: flex; flex-wrap: wrap; gap: 8px; }

.when-box label {
  display: grid;
  gap: 6px;
  font: 12px/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

input, button, .text-button {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font: 15px/1.2 ui-sans-serif, system-ui, sans-serif;
  padding: 8px 12px;
  border-radius: 999px;
}

input { border-radius: 8px; }

button, .text-button { cursor: pointer; text-decoration: none; }

button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.map { height: 440px; margin: 18px 0 12px; background: #e7e1d6; border: 1px solid var(--line); overflow: hidden; }
.map.leaflet-container { font: 13px/1.3 ui-sans-serif, system-ui, sans-serif; }
.map .leaflet-control-attribution { max-width: calc(100% - 40px); white-space: normal; }

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0 0 8px;
  color: var(--muted);
  font: 13px/1.3 ui-sans-serif, system-ui, sans-serif;
}

.legend i {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 6px;
  border-radius: 50%;
  background: currentColor;
}

.legend .go { color: var(--go); }
.legend .lead { color: var(--lead); }
.legend .stop { color: var(--stop); }
.legend .unknown { color: var(--unknown); }

.summary, .nearest-title { margin: 16px 0 0; font: 16px/1.4 ui-sans-serif, system-ui, sans-serif; }

.nearest {
  margin: 14px 0;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--line);
}

.answer { margin: 16px 0 0; font: 22px/1.35 ui-sans-serif, system-ui, sans-serif; }
.answer.go { color: var(--go); }
.answer.lead { color: var(--lead); }
.answer.stop { color: var(--stop); }
.answer.unknown { color: var(--unknown); }

.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; }

.controls { padding: 12px 0 4px; }

.filters { display: flex; flex-wrap: wrap; gap: 8px; }

.town { margin: 28px 0 8px; font: 13px/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; }

.town a { color: var(--muted); text-decoration: none; }

.card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 16px;
  align-items: center;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}

.card h3 { margin: 0; font-size: 22px; font-weight: 600; }
.card-tools { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.share-menu { display: flex; flex-wrap: wrap; gap: 8px; flex-basis: 100%; }

.card h3 a { color: inherit; text-decoration: none; }

.status { margin: 4px 0 0; font: 15px/1.35 ui-sans-serif, system-ui, sans-serif; }

.status.go { color: var(--go); }
.status.lead { color: var(--lead); }
.status.stop { color: var(--stop); }
.status.unknown { color: var(--unknown); }

.letters { display: flex; flex-wrap: wrap; gap: 8px 12px; margin: 8px 0 4px; font: 14px/1 ui-sans-serif, system-ui, sans-serif; }
.letters a { color: inherit; }
.index { margin: 8px 0 0; padding-left: 18px; columns: 2; }
.index li { break-inside: avoid; margin: 0 0 4px; }
.index a { color: inherit; }
@media (max-width: 720px) { .index { columns: 1; } }

.detail, .note, .scope, .empty, .fallback { margin: 4px 0 0; color: var(--muted); font-size: 15px; }

.fallback { margin: 18px 0 32px; padding-left: 18px; }

.fallback a { color: var(--ink); }

.note { margin-top: 28px; }

.scope { margin: 8px 0 48px; }

.others { margin: 8px 0 0; padding-left: 18px; }

.others a { color: var(--ink); }

@media (max-width: 720px) {
  .top, main { width: min(960px, calc(100% - 28px)); }
  .top { padding-top: 16px; }
  h1 { font-size: 32px; }
  h2.section { font-size: 24px; }
  .when-box { display: grid; grid-template-columns: 1fr 1fr; align-items: end; }
  .when-box input { width: 100%; min-width: 0; min-height: 44px; }
  .presets { grid-column: 1 / -1; }
  .map { height: 280px; }
  button, .text-button { min-height: 44px; }
  .card { display: block; }
  .card-tools { justify-content: flex-start; margin-top: 12px; }
  .actions { align-items: stretch; }
  .actions button, .actions .text-button { text-align: center; }
}

@media (max-width: 380px) {
  h1 { font-size: 28px; }
  .when-box { grid-template-columns: 1fr; }
}