.tty-route {
  --tty-ink: #28352f;
  --tty-muted: #68736b;
  --tty-line: #d5d9d2;
  --tty-accent: #355b62;
  --tty-route-color: #319bc5;
  --tty-route-fill: rgba(49, 155, 197, .18);
  margin: 2em 0;
  color: var(--tty-ink);
  font-family: inherit;
}
.tty-route * { box-sizing: border-box; }
.tty-route__title {
  margin: 0 0 12px !important;
  color: var(--tty-ink);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: .03em;
}
.tty-route__map {
  width: 100%;
  border: 1px solid var(--tty-line);
  background: #f4f5f1;
}
.tty-route__profile-wrap {
  padding: 14px 16px 10px;
  border: 1px solid var(--tty-line);
  border-top: 0;
  background: #fff;
}
.tty-route__profile-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
  color: var(--tty-ink);
  font-size: .78rem;
}
.tty-route__readout { color: var(--tty-muted); font-variant-numeric: tabular-nums; }
.tty-route__profile { display: block; width: 100%; height: 150px; overflow: visible; }
.tty-route__area { fill: var(--tty-route-fill); }
.tty-route__line { fill: none; stroke: var(--tty-route-color); stroke-width: 2.25; vector-effect: non-scaling-stroke; }
.tty-route__axis { stroke: var(--tty-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.tty-route__axis-label { fill: var(--tty-muted); font: 11px sans-serif; }
.tty-route__crosshair { stroke: var(--tty-route-color); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.tty-route__focus { fill: var(--tty-route-color); stroke: var(--tty-route-color); stroke-width: 2; vector-effect: non-scaling-stroke; }
.tty-route__credit, .tty-route__status { margin: 7px 0 0; color: var(--tty-muted); font-size: .68rem; }
.tty-route__credit { text-align: right; }
.tty-route__credit a { color: inherit; }
.tty-route__status { display: none; }
.tty-route-error { color: #9b2c2c; }
.tty-route .tty-marker { display: grid; place-items: center; width: 26px; height: 26px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 1px 5px #0004; color: #fff; font: 600 10px sans-serif; }
.tty-route .tty-marker--start { background: #267a45 !important; color: #fff !important; }
.tty-route .tty-marker--goal { background: #e53935 !important; color: #fff !important; }
.tty-route .leaflet-container { font: inherit; }
.tty-route .leaflet-control-attribution {
  font-size: 9px !important;
  line-height: 1.2;
  padding: 2px 5px;
  opacity: .75;
}

/* Make hike course figures easier to scan while retaining the existing layout. */
.ty-hike .ty-stat strong {
  color: #17231d;
  font-weight: 600;
}
.ty-hike .ty-stops li time {
  color: #17231d !important;
  font-weight: 500;
}
@media (max-width: 600px) {
  .tty-route__map { height: 300px !important; }
  .tty-route__profile-wrap { padding: 12px 10px 8px; }
  .tty-route__profile { height: 120px; }
  .tty-route__profile-heading { font-size: .72rem; }
}