.route-strip {
  background: var(--colour-surface); border: 1px solid var(--colour-border-strong);
  border-radius: var(--radius-panel); bottom: 16px; box-shadow: 0 -4px 24px rgb(41 42 46 / 12%);
  left: calc(var(--dock-width) + 16px); overflow: hidden; position: absolute; right: 16px; z-index: 6;
}
.route-strip[hidden] { display: none; }
.route-strip-header { align-items: center; display: flex; gap: 14px; padding: 12px 16px 8px; }
.route-strip-badge { border-radius: 6px; flex-shrink: 0; font-size: 16px; font-weight: 700; max-width: 24ch; padding: 8px 12px; }
.route-strip-heading { flex: 1; min-width: 0; }
.route-strip-heading h2 { color: var(--colour-ink-strong); font-size: 17px; line-height: 23px; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.route-strip-heading p { color: var(--colour-ink-muted); font-size: 12px; margin: 3px 0 0; }
.route-strip-controls { align-items: center; display: flex; gap: 8px; }
.route-strip-icon, .selection-route-strip { align-items: center; background: transparent; border: 1px solid var(--colour-border); border-radius: 8px; color: var(--colour-ink); cursor: pointer; display: inline-flex; flex-shrink: 0; height: 44px; justify-content: center; padding: 8px; width: 44px; }
.route-strip-icon svg, .selection-route-strip svg { height: 22px; width: 22px; }
.route-strip-icon:hover, .selection-route-strip:hover { background: var(--colour-surface-subtle); }
.selection-route-strip[aria-pressed="true"] { border-color: var(--colour-focus); color: var(--colour-focus); }
.selection-route-header:has(.selection-route-strip) { grid-template-columns: auto minmax(0, 1fr) 36px 44px 32px; }
.route-strip-spacing { align-items: center; color: var(--colour-ink-muted); display: inline-flex; font-size: 11px; gap: 8px; }
.route-strip select { background: var(--colour-surface-raised); border: 1px solid var(--colour-border); border-radius: 6px; color: var(--colour-ink); font: inherit; font-size: 12px; min-height: 44px; padding: 6px 8px; }
.route-strip-pattern-label { align-items: center; border: 1px solid var(--colour-border); border-radius: 8px; color: var(--colour-ink); display: inline-flex; height: 44px; justify-content: center; position: relative; width: 44px; }
.route-strip-pattern-label[hidden], .route-strip-legend[hidden] { display: none; }
.route-strip-pattern-label svg { height: 22px; width: 22px; }
.route-strip-pattern-label select { cursor: pointer; height: 44px; inset: 0; opacity: 0; position: absolute; width: 44px; }
.route-strip-pattern-label:focus-within { outline: 2px solid var(--colour-focus); }
.route-strip-legend { color: var(--colour-ink-muted); display: block; font-size: 11px; padding: 0 16px 8px; }
.route-strip-viewport { height: 222px; overflow-x: auto; overflow-y: hidden; overscroll-behavior: contain; position: relative; }
.route-strip-diagram { display: block; font-family: inherit; overflow: visible; }
.strip-station circle { fill: var(--colour-surface); stroke: var(--colour-ink-strong); stroke-width: 1.5; }
.strip-station text { fill: var(--colour-ink); font-size: 12px; }
.strip-station { cursor: pointer; }
.strip-station .strip-stop-number { font-size: 8.5px; font-weight: 600; }
.strip-station-skipped circle { fill: var(--colour-border); stroke: var(--colour-border-strong); }
.strip-station-skipped text { fill: var(--colour-ink-muted); opacity: .65; }
.strip-station:focus circle { stroke: var(--colour-focus); stroke-width: 3; }
.strip-lane-label { fill: var(--colour-ink-muted); font-size: 12px; }
.strip-opposite-label { opacity: .75; }
.strip-vehicle { cursor: pointer; }
.strip-vehicle circle { stroke: var(--colour-ink-strong); stroke-width: 1; }
.strip-opposite-vehicle { opacity: .6; }
.strip-selected-vehicle circle, .strip-vehicle:focus circle { stroke: var(--colour-focus); stroke-width: 3; }
.route-strip-loading { color: var(--colour-ink-muted); font-size: 13px; padding: 24px; }
.route-unfurl-overlay { height: 100%; inset: 0; overflow: hidden; pointer-events: none; position: absolute; width: 100%; z-index: 7; }
.route-strip[data-transition] .route-strip-diagram { opacity: 0; }
.strip-map-open .selection-panel { max-height: calc(100vh - var(--route-strip-height, 320px) - 56px); }
@media (max-width: 700px), (max-width: 1000px) and (max-height: 500px) {
  .route-strip { bottom: calc(var(--dock-height-mobile) + 8px); left: 8px; right: 8px; }
  .route-strip-header { flex-wrap: wrap; gap: 8px; padding: 8px; }
  .route-strip-badge { font-size: 12px; max-width: 18ch; }
  .route-strip-heading h2 { font-size: 14px; }
  .route-strip-controls { margin-left: auto; }
  .strip-map-open .selection-panel { bottom: auto; max-height: min(35vh, max(100px, calc(100vh - var(--dock-height-mobile) - var(--route-strip-height, 320px) - 100px))); top: 8px; }
}
@media (prefers-reduced-motion: reduce) { .route-strip { scroll-behavior: auto; } }

@media (max-width: 700px), (max-width: 1000px) and (max-height: 500px) {
  .route-strip { max-height: calc(100dvh - var(--dock-height-mobile) - 16px); display: flex; flex-direction: column; }
  .route-strip-header { flex-shrink: 0; }
  .route-strip-viewport { min-height: 80px; flex-shrink: 1; }
}


@media (max-width: 700px), (max-width: 1000px) and (max-height: 500px) {
  .strip-map-open .selection-panel:is([data-kind="route"], [data-kind="ferry"]) { display: none; }
}