/* Stage 2 — presentation and navigation only. No map, timetable, or fleet logic. */
:root { --stage2-accent: #146c57; --stage2-quiet: #f5f8f7; }

/* A more recognizable, keyboard-accessible search. */
.stage2-search-shell { position: relative; }
.search-wrap { display: block; margin-bottom: 5px; }
.search-wrap input { height: 52px; padding: 0 43px 0 43px; background: #fff; border: 1px solid #cbded5; box-shadow: 0 3px 12px #244b3810; border-radius: 15px; font-size: 13px; font-weight: 590; transition: border-color .2s, box-shadow .2s; }
.search-wrap input:hover { border-color: #9bbfac; }
.search-wrap input:focus { border-color: #397e65; box-shadow: 0 0 0 4px #146c571b, 0 8px 22px #244b3810; }
.search-wrap .search-icon { top: 15px; left: 15px; font-size: 20px; }
.search-wrap .kbd { display: none; }
.stage2-search-clear { position: absolute; right: 9px; top: 9px; height: 34px; width: 34px; display: grid; place-items: center; border: 0; background: #f1f5f3; color: #64766e; border-radius: 9px; font-size: 19px; }
.stage2-search-clear[hidden] { display: none !important; }
.stage2-search-clear:hover { background: #e4efe9; color: #146c57; }
.stage2-search-feedback { min-height: 19px; padding: 3px 3px 0; margin-bottom: 7px; color: #70827b; font-size: 10px; font-weight: 600; line-height: 1.5; }
.stage2-search-feedback strong { color: #24674e; }
.stage2-match { background: #fff0ad; color: inherit; border-radius: 3px; padding: 0 1px; }

/* Filter rail: full-width scrolling chips with explicit previous/next affordances. */
.stage2-filter-rail { display: flex; align-items: center; gap: 5px; min-width: 0; margin-bottom: 13px; }
.stage2-filter-rail .mode-filters { min-width: 0; flex: 1 1 auto; width: auto; margin: 0; padding: 2px 0 4px; scrollbar-width: none; }
.stage2-filter-rail .mode-filters::-webkit-scrollbar { display: none; }
.stage2-filter-arrow { flex: 0 0 28px; width: 28px; height: 33px; display: grid; place-items: center; padding: 0; border-radius: 10px; border: 1px solid #e0e9e4; background: #fff; color: #365c4d; font-size: 19px; box-shadow: 0 2px 8px #1e3e2e0b; }
.stage2-filter-arrow:hover:not(:disabled) { background: #e9f3ed; border-color: #b4d3c3; }
.stage2-filter-arrow:disabled { opacity: .25; cursor: default; }
.filter-chip { border-color: #e1e8e5; color: #62746b; font-size: 10.5px; padding: 8px 11px; transition: background .18s, border-color .18s, transform .18s; }
.filter-chip:hover { transform: translateY(-1px); border-color: var(--mode-accent, #8da89a); }
.filter-chip.active { border-color: var(--mode-accent, #146c57); color: #243c32; background: color-mix(in srgb, var(--mode-accent, #146c57) 12%, white); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mode-accent, #146c57) 18%, transparent); }
.filter-chip:focus-visible,.stage2-filter-arrow:focus-visible,.stage2-search-clear:focus-visible { outline: 3px solid #7fbea0; outline-offset: 2px; }

/* Calm, scan-friendly route cards; individual route colors remain authoritative. */
.routes { gap: 9px; }
.route-card { --route-accent: #146c57; border-left: 4px solid var(--route-accent); border-radius: 15px; padding: 12px 10px; gap: 10px; min-height: 78px; box-shadow: 0 2px 8px #1e3e2e06; }
.route-card:hover { border-color: color-mix(in srgb, var(--route-accent) 52%, white); border-left-color: var(--route-accent); box-shadow: 0 8px 20px #163a2b12; }
.route-card.selected { background: color-mix(in srgb, var(--route-accent) 5%, white); border-color: color-mix(in srgb, var(--route-accent) 50%, white); border-left-color: var(--route-accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--route-accent) 16%, transparent); }
.route-card .mode-badge { width: 38px; min-height: 38px; padding: 4px; overflow-wrap: anywhere; font-size: 10px; border-radius: 11px; box-shadow: inset 0 -2px 0 #00000012; }
.route-title { display: block; white-space: normal; overflow: visible; text-overflow: clip; font-size: 13px; font-weight: 800; line-height: 1.35; letter-spacing: -.15px; }
.route-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; white-space: normal; line-height: 1.45; font-size: 10.5px; margin-top: 4px; color: #697b73; }
.route-meta { flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.meta-pill { display: inline-flex; align-items: center; max-width: 100%; padding: 4px 7px; border-radius: 7px; background: #f1f5f3; color: #667870; font-size: 9px; line-height: 1.35; white-space: normal; }
.meta-pill.est { background: #fff1d8; color: #855a15; }
.route-arrow { flex: none; color: var(--route-accent); font-size: 20px; }
.stage2-route-cue { display: block; margin-top: 7px; color: #7b8983; font-size: 9px; line-height: 1.4; }
.route-card.selected .stage2-route-cue { color: #315946; font-weight: 700; }
.count-row { margin-top: 4px; margin-bottom: 11px; }

/* Same accent from route line, card badge, and selected-route overview. */
.selected-route-panel { border-color: #d9e5de; }
.selected-route-panel .route-focus-title { font-size: 18px; line-height: 1.27; }
.selected-route-panel .route-focus-data { grid-template-columns: 1fr 1fr; gap: 8px; }
.selected-route-panel .route-focus-data > div { background: #f4f8f6; }
.selected-route-panel .route-focus-data strong { overflow-wrap: anywhere; }
.stage2-detail-divider { height: 1px; margin: 12px 0; background: #e8efeb; }
.stage2-detail-subtitle { display: block; margin: 0 0 8px; color: #7a8c83; text-transform: uppercase; letter-spacing: .09em; font-size: 9px; font-weight: 850; }
.stage2-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stage2-detail-cell { min-width: 0; padding: 9px 10px; border: 1px solid #e6eee9; border-radius: 11px; background: #fff; }
.stage2-detail-cell small { display: block; margin-bottom: 5px; color: #84948c; font-size: 9px; font-weight: 750; }
.stage2-detail-cell strong { display: block; overflow-wrap: anywhere; color: #345348; line-height: 1.4; font-size: 10.5px; }
.stage2-color-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; background: var(--route-accent, #146c57); }
.stage2-operational-details { margin-top: 12px; border: 1px solid #e4ece8; background: #f8faf9; border-radius: 10px; padding: 9px; }
.stage2-operational-details summary { cursor: pointer; color: #3d6453; font-size: 10px; font-weight: 800; }
.stage2-operational-details p { margin: 9px 0 0; color: #687b71; font-size: 10px; line-height: 1.65; overflow-wrap: anywhere; }
.stage2-operational-details:focus-within { border-color: #98c5ac; }
.stage2-detail-status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border: 1px solid #f1dba9; border-radius: 999px; background: #fff6e4; color: #885b11; font-size: 9px; font-weight: 800; }
.stage2-detail-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #dda227; }

/* Communicate the epistemic status of moving markers, even on mobile. */
.live-pill.stage2-simulation-pill { background: #fff3dc; border: 1px solid #f3dfb8; color: #805b16; gap: 5px; font-size: 9px; padding: 6px 9px; white-space: nowrap; }
.live-pill.stage2-simulation-pill .stage2-no-gps { border-left: 1px solid #dbbe81; padding-left: 6px; color: #94703b; font-weight: 750; }
.estimate-note { border: 1px solid #f2dcaf; line-height: 1.5; }

@media (max-width:820px) {
  .search-wrap input { height: 47px; font-size: 12px; }
  .search-wrap .search-icon { top: 12px; }
  .stage2-search-clear { top: 7px; height: 33px; }
  .stage2-filter-arrow { flex-basis: 27px; width: 27px; height: 30px; }
  .route-card { padding: 10px 9px; }
  .route-title { font-size: 12px; }
  .selected-route-panel .route-focus-title { font-size: 15px; }
  .selected-route-panel .stage2-detail-grid { gap: 5px; }
  .selected-route-panel .stage2-detail-cell { padding: 7px; }
  .stage2-simulation-pill { max-width: 60%; }
}

@media (prefers-reduced-motion:reduce) {
  .search-wrap input,.filter-chip { transition: none; }
  .filter-chip:hover { transform: none; }
}