/* Route shuffler: the user's tracks and loop settings on the left, the map on the right (app.css for the rest). */
.view { min-height: 0; min-width: 0; }
ul.list { list-style: none; margin: var(--space-sm) 0 0; padding: 0; max-height: 200px; overflow-y: auto; font-size: var(--text-md); }
ul.list li { display: flex; gap: var(--space-xs); align-items: center; min-height: 40px; padding: 2px 0; border-top: 1px solid var(--color-rule); }
ul.list li .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
ul.list li .km { color: var(--color-slate); font-variant-numeric: tabular-nums; white-space: nowrap; }
ul.list li button { height: 32px; width: 32px; padding: 0; font-size: var(--text-lg); color: var(--color-slate); border-color: transparent; }
ul.history li { cursor: pointer; padding: 0 var(--space-2xs); }
ul.history li:hover { background: var(--color-chalk); }
ul.history li.current { font-weight: 700; }
table.breakdown td:nth-child(2), table.breakdown td:nth-child(3) { white-space: nowrap; }
.legend { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); margin: var(--space-sm) 0 0; font-size: var(--text-xs); color: var(--color-slate); }
.legend span { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.legend i { display: inline-block; width: 26px; border-top: 4px solid var(--color-ink); }
.legend i.dash { border-top-style: dashed; }
.legend i.trk { border-top: 2px solid var(--color-track); }
@media (max-width: 800px) {
  .view { height: 60vh; }
}