/* /route/<code> — one route (pnj plan 118 lane W, 2026-09-26). Built on the ride
   page's look (/ride/ride.css: cream on black, the chrome headline, the site's
   buttons); this file adds only the map, the facts row and the type chips.
   The one colour that is not the site's cream is THE ROUTE ROSE (#F07384, the
   app's `c.rose` — the route line is the only rose on the app's maps, and the
   site already uses it on /account/). No new font. */

.rt-map-wrap { position: relative; margin: 0 0 6px; }
.rt-map {
  width: 100%; aspect-ratio: 4 / 3; max-height: 62vh;
  background: #14110f; border: 1px solid rgba(242,237,230,.08);
}
@media (min-width: 640px) { .rt-map { aspect-ratio: 16 / 10; } }
.rt-map-note {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  margin: 0; padding: 16px; text-align: center; font-size: .72rem; letter-spacing: .08em;
  color: rgba(242,237,230,.55);
}
.rt-map-note[hidden] { display: none; }
.rt-credit { margin: 0 0 20px; font-size: .55rem; letter-spacing: .04em; color: rgba(242,237,230,.4); text-align: right; }

/* the stars (out of 10) + the verified mark, on the ride page's stats rule */
.rt-stars { display: flex; align-items: baseline; gap: 8px; }
.rt-stars-n { font-size: 2rem; font-weight: 800; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.rt-stars-of { font-size: .9rem; color: rgba(242,237,230,.55); }
.rt-stars-w { font-size: .64rem; letter-spacing: .3em; text-transform: uppercase; color: rgba(242,237,230,.55); }
.rt-new { font-size: .7rem; letter-spacing: .3em; text-transform: uppercase; color: rgba(242,237,230,.7); }

/* length · time · shape · skill */
.rt-facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px;
  margin: 18px 0 0;
}
@media (min-width: 560px) { .rt-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rt-facts dt { margin: 0 0 4px; font-size: .58rem; letter-spacing: .28em; text-transform: uppercase; color: rgba(242,237,230,.45); }
.rt-facts dd { margin: 0; font-size: .92rem; letter-spacing: .03em; color: #f2ede6; overflow-wrap: anywhere; }

/* the types as chips */
.rt-types-wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 18px; }
.rt-types { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.rt-types:empty { display: none; }
.rt-type {
  font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: #f2ede6;
  border: 1px solid rgba(242,237,230,.3); padding: 6px 9px;
}
.rt-say { margin: 0; font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(242,237,230,.45); }
.rt-surface { margin: 10px 0 0; font-size: .78rem; letter-spacing: .05em; color: rgba(242,237,230,.65); }
.ride-main .rt-say[hidden], .ride-main .rt-surface[hidden] { display: none; }

.rt-gallery { margin: 24px 0 0; }

/* the start / finish dots are map layers; MapLibre's zoom buttons get the dark look */
.rt-map .maplibregl-ctrl-group { background: rgba(10,8,6,.85); border: 1px solid rgba(242,237,230,.15); box-shadow: none; }
.rt-map .maplibregl-ctrl-group button + button { border-top-color: rgba(242,237,230,.15); }
.rt-map .maplibregl-ctrl-icon { filter: invert(1); }