/* The v2 routes list (resources/views/Routes/list.htm). Colours only from the tokens. */

.routesx { padding-bottom: 24px; }
.routesx-titlerow { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.routesx-titlerow .lead { max-width: 720px; margin-top: 10px; }
.routesx-banner { margin-bottom: 24px; text-align: center; }
.routesx-banner img { margin-inline: auto; border-radius: var(--r-m); }
.routesx-grid { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 28px; align-items: start; }
.routesx-filters { position: sticky; top: calc(var(--header-h) + 16px); max-height: calc(100dvh - var(--header-h) - 32px); overflow-y: auto; }
.routesx-filters > summary { display: none; }
.routesx-filters fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.routesx-filters legend { margin-bottom: 10px; padding: 0; }
.routesx-filters .eyebrow { color: var(--c-text-2); font-size: 12px; }
.routesx-filters .search-field { height: 44px; }
.chip-check { cursor: pointer; }
.chip-check input { position: absolute; opacity: 0; pointer-events: none; }
.chip-check:has(input:checked) { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-on-primary); }
.chip-check:has(input:focus-visible) { box-shadow: var(--focus); }
.routesx-km { flex-wrap: nowrap; }
.routesx-km .input { width: 100%; height: 42px; }
.routesx-apply { display: none; }

.routesx-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.routesx-active { align-items: center; }
.routesx-active b { margin-right: 6px; }
.routesx-active .chip { gap: 4px; }
.routesx-view { flex-wrap: nowrap; }
.routesx-sort { height: 40px; width: auto; }
.grid.routesx-cards { --cols: 3; }
@media (max-width: 1280px) { .grid.routesx-cards { --cols: 2; } }
.routesx-count { position: absolute; right: 12px; bottom: 12px; background: rgb(0 0 0 / .6); color: #fff; font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 999px; }
.routesx-mounts { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.routesx-map { overflow: hidden; margin-bottom: 20px; }
.routesx-canvas { height: min(62vh, 560px); }
.routesx-pages { margin-top: 28px; justify-content: center; }

@media (max-width: 860px) {
  .routesx-grid { grid-template-columns: 1fr; gap: 16px; }
  .routesx-filters { position: static; max-height: none; overflow: visible; background: none; border: 0; }
  .routesx-filters > summary { display: inline-flex; list-style: none; }
  .routesx-filters > summary::-webkit-details-marker { display: none; }
  .routesx-filters[open] > form { margin-top: 12px; background: var(--c-surface); border: 1px solid var(--c-outline); border-radius: var(--r-l); }
  .routesx-apply { display: inline-flex; }
  .grid.routesx-cards { --cols: 1; }
  .routesx-view { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .routesx-view label { display: none; }
  .routesx-sort { width: 100%; }
  .routesx-view .segmented > * { padding: 0 12px; }
}

/* "help me choose" (Routes/filters.htm) */
.routesx-choose { display: flex; flex-direction: column; gap: 18px; }
.routesx-choose .eyebrow { color: var(--c-text-2); }

.routesx-adrow { grid-column: 1 / -1; padding-block: 8px; }