.route-card__tools { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 0 16px; }
.route-details { grid-column: 1 / -1; grid-row: 1; min-width: 0; }
.route-details > summary { display: inline-flex; align-items: center; gap: 16px; min-height: 44px; padding: 4px 0; color: #173c60; cursor: pointer; list-style: none; font: 700 16px/1.5 "Segoe UI", sans-serif; }
.route-details > summary::-webkit-details-marker { display: none; }
.route-details > summary::after { content: ''; width: 8px; height: 8px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); }
.route-details[open] > summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.route-card__tools > .route-save { position: relative; z-index: 1; grid-column: 2; grid-row: 1; justify-self: end; min-height: 44px; }
.route-details__panel { margin: 10px 0 16px; padding: 26px; border: 1px solid #dce5e5; border-radius: 12px; background: #f6f8f5; }
.route-details__heading { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px 30px; }
.route-details__eyebrow { color: #5e7184; text-transform: uppercase; letter-spacing: .07em; font: 650 13px/1.5 "Segoe UI", sans-serif; }
.route-details__heading h3 { margin: 8px 0 0; color: #142f4b; font: 800 clamp(20px, 2.3vw, 28px)/1.35 Montserrat, sans-serif; overflow-wrap: anywhere; }
.route-details__heading h3 span { color: #a07a18; }
.route-details__heading p { margin: 0; color: #526b7b; font: 500 14px/1.6 "Segoe UI", sans-serif; }
.route-mini-ride { --route-coach-size: 88px; position: relative; height: 52px; margin: 24px 0 12px; overflow: hidden; }
.route-mini-ride__lane { position: absolute; bottom: 3px; left: 0; right: 0; border-top: 1px dashed #a3b8b8; }
.route-mini-ride__lane::before, .route-mini-ride__lane::after { content: ''; position: absolute; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: #f8ce46; border: 2px solid #173c60; }
.route-mini-ride__lane::before { left: 0; } .route-mini-ride__lane::after { right: 0; }
.route-mini-ride__bus { position: absolute; inset: 0; }
.route-mini-ride__bus svg { position: absolute; bottom: 3px; left: 0; width: var(--route-coach-size); }
.route-details[open] .route-mini-ride__bus { animation: route-detail-drive 8s ease-in-out infinite; }
.route-details[open] .brand-coach__wheel { transform-box: fill-box; transform-origin: center; animation: brand-wheel-loop 8s ease-in-out infinite; }
.route-mini-ride[data-offscreen="true"] *, .route-mini-ride[data-motion-hidden="true"] * { animation-play-state: paused !important; }
.route-timeline { list-style: none; padding: 12px 0 0; margin: 0; }
.route-stop { position: relative; display: grid; grid-template-columns: 142px 34px minmax(0, 1fr); gap: 18px; padding-bottom: 28px; }
.route-stop:last-child { padding-bottom: 0; }
.route-stop:not(:last-child)::before { content: ''; position: absolute; top: 34px; bottom: 0; left: 176px; border-left: 1px dashed #b4c5c4; }
.route-stop__clock { padding-top: 2px; }
.route-stop__clock time { display: block; color: #173c60; font: 800 25px/1.2 Montserrat, sans-serif; font-variant-numeric: tabular-nums; }
.route-stop__day { display: block; margin-top: 6px; color: #5d7180; font: 500 13px/1.5 "Segoe UI", sans-serif; }
.route-stop__unknown { display: block; color: #7b6540; font: 650 15px/1.8 "Segoe UI", sans-serif; }
.route-stop__marker { position: relative; display: grid; place-items: center; align-self: start; width: 34px; height: 34px; color: #375c70; background: #fff; border: 1px solid #bdcecd; border-radius: 50%; font: 700 12px/1 Montserrat, sans-serif; }
.route-stop:first-child .route-stop__marker, .route-stop:last-child .route-stop__marker { color: #142f4b; background: #f8ce46; border-color: #d5b043; }
.route-stop__kind { display: block; margin-bottom: 3px; color: #627887; font: 500 13px/1.5 "Segoe UI", sans-serif; }
.route-stop__place strong { display: block; color: #173c60; font: 750 20px/1.4 Montserrat, sans-serif; overflow-wrap: anywhere; }
.route-stop__place p { margin: 6px 0 0; color: #355265; font: 500 16px/1.6 "Segoe UI", sans-serif; overflow-wrap: anywhere; }
.route-details__note { margin: 24px 0 0; padding-top: 16px; border-top: 1px solid #dae3e0; color: #5d7180; font: 500 14px/1.65 "Segoe UI", sans-serif; }
@keyframes route-detail-drive { 0%, 8% { transform: translateX(0); opacity: 1; } 68%, 82% { transform: translateX(calc(100% - var(--route-coach-size))); opacity: 1; } 90% { transform: translateX(calc(100% - var(--route-coach-size))); opacity: 0; } 90.01% { transform: translateX(0); opacity: 0; } 98%, 100% { transform: translateX(0); opacity: 1; } }
@media (max-width: 600px) {
  .route-details__panel { padding: 18px 12px; margin-inline: -4px; }
  .route-stop { grid-template-columns: 94px 26px minmax(0, 1fr); gap: 10px; }
  .route-stop:not(:last-child)::before { left: 116px; top: 26px; }
  .route-stop__marker { width: 26px; height: 26px; font-size: 10px; }
  .route-stop__clock time { font-size: 21px; }
  .route-stop__unknown { font-size: 12px; }
  .route-stop__day, .route-stop__kind { font-size: 12px; }
  .route-stop__place strong { font-size: 17px; }
  .route-stop__place p { font-size: 15px; }
  .route-details__heading h3 { font-size: 20px; }
  .route-mini-ride { --route-coach-size: 72px; }
}
@media (prefers-reduced-motion: reduce) { html .route-details[open] :is(.route-mini-ride__bus, .brand-coach__wheel) { animation-duration: 8s !important; } }
@media print { .route-mini-ride { display: none; } }