/* Big moves: the trip's Route (board Big-Route). Its Map is the trip map (map.css, daymap.js).
   Theme tokens only (theme.css), so charcoal comes free. Owner: ROUTE. Classes rt-. */

/* heading row: "Route" and the quiet Map button */
.rt-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:var(--tap);margin-top:8px;}
.rt-map-btn{font-size:.9375rem;min-width:var(--tap);}
.rt-none{margin-top:4px;}

/* the road: the groove runs from the first stop to the last */
.rt-road{margin-top:0;}
.rt-road::before,.rt-road::after{top:24px;bottom:24px;}

/* every hop rides the road as its own marker; Home is the raised one */
.rt-mark{position:absolute;inset-inline-start:-42px;top:50%;width:24px;height:24px;margin-top:-12px;border-radius:50%;background:var(--ground);color:var(--ink-2);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 3px var(--ground);z-index:1;}
.rt-mark .d-ic{width:18px;height:18px;}
.rt-mark-home{box-shadow:var(--e1),0 0 0 3px var(--ground);color:var(--ink);}

/* Home, start and end */
.rt-end{display:flex;flex-direction:column;justify-content:center;min-height:48px;}
.rt-city{font-weight:500;}

/* travel: "Flight to Madrid" */
.rt-hop{display:flex;align-items:center;width:100%;min-height:var(--tap);padding:0;border:0;background:none;color:var(--ink-2);font:500 .9375rem/1.3 var(--font);text-align:start;cursor:pointer;}
.rt-hop:active,.rt-stay:active,.rt-slot:active{opacity:.7;}
.rt-hop-text,.rt-stay-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* a city: glaze pebble, name, dates, nights, chevron (the whole row is the button) */
.d-row.rt-visit{grid-template-columns:minmax(0,1fr) auto 20px;width:100%;border:0;background:none;text-align:start;font:inherit;}
.rt-name{display:block;overflow-wrap:anywhere;}

/* where the nights are spent, under its city */
.rt-stay{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;min-height:var(--tap);margin-top:-6px;padding:0;border:0;background:none;color:var(--ink);font:500 .9375rem/1.3 var(--font);text-align:start;cursor:pointer;}
.rt-stay .d-ic{color:var(--ink-2);}
/* picked, not booked yet: said quietly at the end of the line (never read as booked) */
.rt-open{flex:none;margin-inline-start:auto;padding-inline-start:12px;white-space:nowrap;}

/* a missing piece: an empty spot pressed into the road, the whole spot is the button */
.rt-slot{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;margin:2px 0;padding:6px 14px;border:0;border-radius:var(--r-md);background:var(--well);box-shadow:var(--in);color:var(--ink);text-align:start;font:400 .9375rem/1.35 var(--font);cursor:pointer;}
.rt-slot .d-ic{color:var(--ink-2);}
.rt-slot span{flex:1;min-width:0;}
.rt-visit+.rt-slot,.rt-stay+.rt-slot{margin-top:-4px;}
.rt-slot-wrap{padding:8px 0;}

/* right to left */
[dir="rtl"] .rt-visit .d-row-caret{transform:scaleX(-1);}

@media (prefers-reduced-motion:reduce){
  .rt-hop,.rt-stay,.rt-slot{transition:none;}
}