/* Direction controls sit above the route numbers in the same picker. */
.map-first .route-picker{max-width:480px}
.map-first>.app-header>.brand,.map-first .brand>div:last-child{min-width:0}
.map-first .brand-icon{flex-shrink:0}
.map-first .brand h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
[data-outbound-only]{display:none}
.map-first[data-trip-direction="outbound"] [data-inbound-only]{display:none}
.map-first[data-trip-direction="outbound"] [data-outbound-only]{display:block}
.map-first .trip-direction-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;padding:4px;border:1px solid var(--line);border-radius:13px;background:var(--soft);width:100%}
.map-first .trip-direction-tabs button{min-width:0;min-height:35px;padding:7px 10px;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--muted);font:650 13px/1.25 "Segoe UI",system-ui,sans-serif;cursor:pointer;white-space:nowrap}
.map-first .trip-direction-tabs button[aria-selected="true"]{border-color:var(--brand);background:var(--paper);color:var(--ink);box-shadow:0 1px 5px #17251c0a}
.map-first .trip-direction-tabs button:disabled{cursor:default;opacity:.5}
.map-first[data-trip-direction="outbound"] .search-palette #openFeeder[hidden]{display:none!important}
.map-first[data-trip-direction="outbound"] .app-header>.shifts button{padding-left:10px;padding-right:10px}
.map-first[data-trip-direction="outbound"] .app-header>.shifts button span{font-size:11px}
@media(max-width:1000px) and (min-width:751px){.map-first[data-trip-direction="outbound"] .app-header>.shifts button .icon{display:none}.map-first[data-trip-direction="outbound"] .app-header>.shifts button{padding-left:7px;padding-right:7px}}
@media(max-width:750px){
 .map-first .route-picker{max-width:none}
 .map-first .trip-direction-tabs{padding:3px;gap:3px;border-radius:11px}
 .map-first .trip-direction-tabs button{min-height:36px;padding:7px 5px;font-size:12px;border-radius:8px}
 .map-first[data-trip-direction="outbound"] .app-header>.shifts button{padding-left:7px;padding-right:7px;gap:4px}
 .map-first[data-trip-direction="outbound"] .app-header>.shifts button .icon{display:none}
 .map-first[data-trip-direction="outbound"] .app-header>.shifts button span{font-size:10px}
}
@media(max-width:370px){.map-first .trip-direction-tabs button{font-size:11px;padding-left:3px;padding-right:3px}}

/* A landscape phone needs the map and the schedule to retain usable height. */
@media(max-width:750px) and (max-height:500px){
 .map-first .search-palette{top:8px;left:12px}
 .map-first .map-tools{top:8px;right:12px}
 .map-first .journey-bar{bottom:12px;left:12px;right:12px;padding:9px 12px;display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;border-radius:13px}
 .map-first .journey-main{grid-column:auto;min-width:0}
 .map-first .journey-kicker{font-size:9px}
 .map-first .journey-main h2{font-size:16px;line-height:1.2;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .map-first .journey-hint{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .map-first .journey-times{gap:10px}
 .map-first .journey-times strong,.map-first .journey-times .journey-arrival strong{font-size:20px}
 .map-first #journeyStops{min-height:36px;padding:8px 10px;font-size:11px}
 .map-first #journeyStops .icon{display:none}
 .map-first .schedule-panel{top:8px;bottom:12px;left:12px;right:12px}
 .map-first[data-view="list"] .search-palette,.map-first[data-view="list"] .map-tools{display:none}
 .map-first .drawer-header{padding:9px 12px 6px}
 .map-first .drawer-header h2{font-size:16px}
 .map-first .schedule-panel .route-card,.map-first[data-view="map"] .schedule-panel .route-card{padding:0 12px 6px}
 .map-first #routeSummary{margin:3px 0 0}
 .map-first .stop-filters{margin-top:5px}
 .map-first .city-stops-note,.map-first .route-corridor{display:none}
}
@media(min-width:500px) and (max-width:750px) and (max-height:500px){
 .map-first>.app-header{grid-template-columns:minmax(0,1fr) auto;padding:7px 12px;gap:5px 12px}
 .map-first>.app-header>.brand{display:none}
 .map-first .route-picker{grid-column:1;grid-row:1;gap:3px}
 .map-first .route-caption{display:none}
 .map-first .trip-direction-tabs{padding:2px}
 .map-first .trip-direction-tabs button{min-height:30px;font-size:11px;padding:5px}
 .map-first .route-choices{padding:2px}
 .map-first .route-choices button{min-height:34px}
 .map-first .app-header>.shifts{grid-column:2;grid-row:1;flex-direction:column;align-self:center}
 .map-first .app-header>.shifts button{min-height:30px;padding-top:5px;padding-bottom:5px}
}
.map-first[data-trip-direction="outbound"] .shifts small{display:block;font-size:10px;font-weight:500;margin-top:2px}