.action-button{pointer-events:auto;display:flex;align-items:center;gap:5px;height:40px;padding:0 10px;border:1px solid var(--line);border-radius:13px;background:rgba(20,17,29,.94);color:var(--text);font-size:.69rem;font-weight:800;box-shadow:0 7px 20px rgba(0,0,0,.25)}
.action-button>span{font-size:.9rem;color:var(--gold)}
.labeled-map-button{width:78px;height:47px;border-radius:14px;display:flex;align-items:center;justify-content:center;gap:5px;padding:0 7px}
.labeled-map-button>span{font-size:1.15rem}
.labeled-map-button small{font-size:.58rem;line-height:1.05;font-weight:750}
.map-buttons{right:12px}
.route-list{scrollbar-width:none;-ms-overflow-style:none}
.route-list::-webkit-scrollbar{display:none;width:0;height:0}
.route-picker-label{display:block;margin-top:10px;color:var(--muted);font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;font-weight:800}
.route-picker{display:block;width:100%;height:38px;margin-top:4px;padding:0 34px 0 11px;border:1px solid rgba(255,255,255,.18);border-radius:11px;background:rgba(255,255,255,.07);color:var(--text);font-size:.78rem;font-weight:750}
.route-picker:focus{outline:2px solid var(--gold);outline-offset:1px}
.route-line{vector-effect:non-scaling-stroke;transition:stroke-opacity .18s ease,stroke-width .18s ease}
.bus-pin{position:relative}
.bus-label{position:absolute;left:50%;top:-18px;transform:translateX(-50%) rotate(45deg);padding:2px 4px;border-radius:5px;background:rgba(20,17,29,.94);border:1px solid rgba(255,255,255,.35);color:#fff;font-size:9px;font-weight:900;line-height:1;white-space:nowrap;text-shadow:0 1px 1px #000}
.bus-marker.predicted .bus-label{border-style:dashed;color:#fff;background:rgba(20,17,29,.8)}
body.all-routes .bus-marker.predicted{opacity:.38}
body.all-routes .bus-label{display:none}
body.all-routes .bus-marker.pair-active .bus-label{display:block}
.bus-marker.pair-dim{opacity:.18!important;filter:saturate(.45)}
.bus-marker.pair-active{opacity:1!important;filter:none;z-index:10000!important}
.pair-connector{stroke-dasharray:7 7;pointer-events:none}
body.all-routes .pair-connector{opacity:0}
body.all-routes .pair-connector.pair-active{opacity:.9}
.pair-connector.pair-dim{opacity:.06!important}
.pair-connector.pair-active{opacity:.9!important;stroke-width:4}
.pair-card{position:fixed;z-index:920;left:50%;bottom:146px;transform:translateX(-50%);width:min(330px,calc(100% - 28px));padding:11px 38px 11px 13px;border:1px solid rgba(255,201,4,.42);border-radius:14px;background:rgba(20,17,29,.96);box-shadow:0 10px 28px rgba(0,0,0,.3);backdrop-filter:blur(14px)}
.pair-card strong,.pair-card span{display:block}.pair-card strong{font-size:.84rem}.pair-card span{margin-top:2px;color:var(--muted);font-size:.69rem}.pair-card button{position:absolute;right:7px;top:5px;border:0;background:none;color:var(--muted);font-size:1.3rem}
.quick-eta{position:fixed;z-index:930;left:12px;right:12px;bottom:144px;min-height:96px;display:grid;grid-template-columns:minmax(0,1fr) auto 12px;align-items:center;gap:12px;padding:13px 14px;border:1px solid rgba(113,226,163,.5);border-radius:18px;background:linear-gradient(145deg,rgba(20,17,29,.97),rgba(37,30,50,.97));color:var(--text);text-align:left;box-shadow:0 10px 30px rgba(0,0,0,.32);backdrop-filter:blur(16px)}
.route-sheet{height:175px}
.quick-eta{bottom:187px}
.quick-eta-copy,.quick-eta-time{display:grid;min-width:0}.quick-eta small{color:var(--muted);font-size:.62rem;text-transform:uppercase;letter-spacing:.07em;font-style:normal}.quick-eta-copy strong{margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.94rem}.quick-eta-copy>span{margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:.67rem}.quick-eta-time{text-align:right}.quick-eta-time>span{display:flex;align-items:baseline;justify-content:flex-end;gap:4px}.quick-eta-time strong{font-size:2rem;line-height:1;letter-spacing:-.06em}.quick-eta-time em{color:var(--muted);font-size:.68rem;font-weight:800;font-style:normal}.quick-eta-time b{margin-top:5px;color:var(--green);font-size:.61rem}.quick-eta-chevron{color:var(--gold);font-size:1.5rem}.quick-eta.loading{opacity:.78}.quick-eta.no-service{border-color:rgba(255,201,4,.42)}.quick-eta.no-service .quick-eta-time b{color:#ffe581}
.map-buttons{bottom:300px}.map-legend{bottom:294px}
@media(min-width:760px){.route-sheet{height:185px}.pair-card{left:auto;right:430px;bottom:24px;transform:none}.map-buttons{right:425px}.quick-eta{left:18px;right:auto;bottom:18px;width:360px}.map-legend{left:395px;bottom:25px}}
@media(max-width:430px){.action-button{padding:0 8px;font-size:.62rem}.brand small{max-width:120px}.pair-card{bottom:143px}.quick-eta{gap:8px}.quick-eta-copy strong{font-size:.86rem}}

/* The rider view shows one simple ETA column; model/source details stay internal. */
.eta-columns{grid-template-columns:70px}
.arrival{grid-template-columns:minmax(0,1fr) 70px}

/* Mobile map-first layout. The map remains the primary surface; supporting
   controls stay reachable without covering the live bus view. */
@media(max-width:759px){
  .floating-header{left:9px;right:9px}
  .brand{padding:6px 9px 6px 6px;border-radius:14px}
  .brand .mark{width:31px;height:31px;border-radius:10px}
  .brand strong{font-size:.82rem}
  .brand small{font-size:.6rem;max-width:145px}
  .header-actions{gap:4px}
  #installButton{display:none}
  #tokenButton{width:38px;height:38px;padding:0;font-size:0;border-radius:12px}
  #tokenButton>span{font-size:1rem}
  .map-legend{display:none}
  .bus-pin{width:27px;height:27px;border-width:2px}
  .bus-pin .bus-arrow{font-size:14px}
  .bus-label{top:-15px;font-size:8px;padding:1px 3px}
  .map-buttons{right:9px;bottom:112px;gap:7px}
  .labeled-map-button{width:42px;height:42px;padding:0;border-radius:13px}
  .labeled-map-button small{display:none}
  .labeled-map-button>span{font-size:1.1rem}
  .quick-eta{left:9px;right:9px;bottom:108px;min-height:68px;gap:8px;padding:9px 11px;border-radius:15px}
  .quick-eta-copy strong{font-size:.82rem}
  .quick-eta-copy>span{font-size:.61rem;margin-top:2px}
  .quick-eta-time strong{font-size:1.65rem}
  .quick-eta-time b{font-size:.56rem;margin-top:3px}
  .quick-eta-chevron{font-size:1.25rem}
  body:not(.has-stop) .quick-eta{display:none}
  body.route-sheet-expanded .quick-eta{display:none}
  .route-sheet{height:104px;padding-left:11px;padding-right:11px}
  .route-sheet.expanded{height:min(42vh,320px)}
  .route-sheet .sheet-heading h1{font-size:.86rem}
  .route-sheet .sheet-heading p{display:none}
  .route-sheet .text-button{font-size:0;padding:4px}
  .route-sheet .text-button::after{content:'Stops';font-size:.68rem}
  .route-picker-label{display:none}
  .route-picker{height:34px;margin-top:5px;padding-top:0;padding-bottom:0;font-size:.72rem}
  .route-list{display:none}
  .details-sheet{height:calc(100% - max(8px,env(safe-area-inset-top)))}
}

@media(max-width:430px){
  .brand small{max-width:118px}
  .quick-eta{bottom:106px}
  .map-buttons{bottom:110px}
}

/* MapLibre controls sit above the map canvas and below the app's own overlays. */
.maplibregl-map{background:#d8d8d8;font-family:inherit}
.maplibregl-canvas{outline:none}
.maplibregl-ctrl-top-right{top:max(64px,calc(env(safe-area-inset-top) + 52px));right:8px}
/* Credit is rendered as quiet readable text in .map-attribution below, not
   as MapLibre's intrusive compact info icon. */
.maplibregl-ctrl-attrib{display:none!important}
.maplibregl-ctrl-bottom-left{left:8px;bottom:calc(108px + env(safe-area-inset-bottom))}
.maplibregl-ctrl-group{border:1px solid rgba(255,255,255,.12)!important;border-radius:13px!important;overflow:hidden;background:rgba(20,17,29,.94)!important;box-shadow:0 7px 20px rgba(0,0,0,.25)!important}
.maplibregl-ctrl-group button{background-color:transparent!important}
.maplibregl-popup-content{margin:0;padding:12px 14px;border:1px solid rgba(255,255,255,.12);border-radius:13px;background:#191522;color:var(--text);box-shadow:0 8px 24px rgba(0,0,0,.35);font-family:inherit}
.maplibregl-popup-close-button{padding:3px 7px;color:var(--muted);font-size:1.05rem}
.maplibregl-popup-close-button:hover{background:transparent;color:var(--text)}
.maplibregl-popup-anchor-top .maplibregl-popup-tip{border-bottom-color:#191522}
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip{border-top-color:#191522}
.maplibregl-popup-anchor-left .maplibregl-popup-tip{border-right-color:#191522}
.maplibregl-popup-anchor-right .maplibregl-popup-tip{border-left-color:#191522}
@media(min-width:760px){.maplibregl-ctrl-bottom-left{left:12px;bottom:132px}}

/* Rider-facing additions: light mode is the default, while the existing dark
   palette remains available through body.dark-mode. */
:root{color-scheme:light;--bg:#f4f7fb;--panel:#ffffff;--panel2:#eef2f7;--gold:#ad6800;--text:#152033;--muted:#5b687b;--green:#087443;--red:#bd3851;--line:rgba(21,32,51,.15)}
body.dark-mode{color-scheme:dark;--bg:#100d18;--panel:#1b1626;--panel2:#251e32;--gold:#ffc904;--text:#faf8ff;--muted:#b9b1c9;--green:#71e2a3;--red:#ff7485;--line:rgba(255,255,255,.12)}
.sheet-actions,.details-actions{display:flex;align-items:center;gap:7px}
[hidden]{display:none!important}
.favorite-button{display:grid;place-items:center;width:31px;height:31px;padding:0;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--muted);font-size:1.25rem;line-height:1}
.favorite-button:hover,.favorite-button:focus-visible,.favorite-button.is-favorite{color:var(--gold);border-color:currentColor}
.favorite-button:focus-visible,.nearby-chip:focus-visible,.nearby-location-button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.theme-button{min-width:92px;justify-content:center}
.nearby-panel{margin-top:9px;padding:8px 0 2px;border-top:1px solid var(--line)}
.nearby-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}
.nearby-heading h2{margin:0;font-size:.78rem}
.nearby-heading p{margin:2px 0 0;color:var(--muted);font-size:.62rem}
.nearby-location-button{border:0;background:none;color:var(--gold);font-size:.63rem;font-weight:800;white-space:nowrap}
.nearby-row,.favorites-row{display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:7px;margin-top:7px;min-width:0}
.nearby-label{color:var(--muted);font-size:.61rem;font-weight:850;text-transform:uppercase;letter-spacing:.06em}
.nearby-chips{display:flex;gap:6px;min-width:0;overflow-x:auto;padding:2px 2px 4px;scrollbar-width:none;-ms-overflow-style:none}
.nearby-chips::-webkit-scrollbar{display:none;width:0;height:0}
.nearby-chip{flex:0 0 auto;min-width:115px;max-width:170px;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:6px;align-items:center;padding:6px 8px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);color:var(--text);text-align:left}
.nearby-chip strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.65rem;line-height:1.1}
.nearby-chip small{grid-column:2;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:.56rem;line-height:1.1;margin-top:2px}
.nearby-chip>i{grid-row:1 / span 2;width:9px;height:22px;border-radius:5px;background:var(--route-color,#ffc904);border:1px solid rgba(0,0,0,.2)}
.nearby-chip.favorite-chip{border-color:rgba(173,104,0,.4)}
.nearby-loading{color:var(--muted);font-size:.63rem;white-space:nowrap}
.route-sheet{height:220px}
.route-sheet.expanded{height:min(72vh,680px)}
.timeline-section{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.timeline-section .section-title>div{min-width:0}
.timeline-section .section-title h3{font-size:.92rem}
.timeline-section .section-title span{display:block;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:.65rem}
.timeline-section .section-title .timeline-clock{margin:0;color:var(--muted);font-size:.56rem;letter-spacing:.08em;white-space:nowrap}
.stop-timeline{display:grid;gap:0;margin-top:10px}
.timeline-item{display:grid;grid-template-columns:22px minmax(0,1fr);min-height:56px}
.timeline-track{position:relative;display:flex;justify-content:center}
.timeline-track span{position:relative;z-index:1;width:11px;height:11px;margin-top:4px;border:2px solid var(--muted);border-radius:50%;background:var(--panel)}
.timeline-track i{position:absolute;top:15px;bottom:-2px;width:2px;background:var(--line)}
.timeline-item.is-next .timeline-track span{border-color:var(--green);background:var(--green);box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 18%,transparent)}
.timeline-content{padding:0 0 10px 5px;min-width:0}
.timeline-content>div{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.timeline-content strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.78rem}
.timeline-content b{flex:none;color:var(--text);font-size:.78rem}
.timeline-item.is-next .timeline-content b{color:var(--green)}
.timeline-content small{display:block;margin-top:2px;color:var(--muted);font-size:.62rem;line-height:1.25}
.details-actions .close-button{line-height:1}

/* Explicit light-surface overrides for the legacy dark base styles. */
body:not(.dark-mode) .brand,body:not(.dark-mode) .action-button,body:not(.dark-mode) .map-button,body:not(.dark-mode) .map-legend,body:not(.dark-mode) .bottom-sheet{background:rgba(255,255,255,.95);border-color:rgba(21,32,51,.15);box-shadow:0 8px 24px rgba(36,54,78,.18)}
body:not(.dark-mode) .bottom-sheet{background:rgba(255,255,255,.97);box-shadow:0 -12px 40px rgba(36,54,78,.16)}
body:not(.dark-mode) .route-picker,body:not(.dark-mode) select,body:not(.dark-mode) input{background:#fff;color:var(--text);border-color:rgba(21,32,51,.2)}
body:not(.dark-mode) .route-row.selected{background:rgba(21,32,51,.06)}
body:not(.dark-mode) .quick-eta{background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(241,245,250,.98));box-shadow:0 10px 30px rgba(36,54,78,.2)}
body:not(.dark-mode) .quick-eta.no-service .quick-eta-time b{color:#956100}
body:not(.dark-mode) .eta-summary{background:linear-gradient(145deg,rgba(255,201,4,.18),rgba(246,248,251,.98))}
body:not(.dark-mode) .eta-summary p{color:#956100}
body:not(.dark-mode) .planner-card,body:not(.dark-mode) .model-card{background:#f8fafc}
body:not(.dark-mode) .details-footer a{color:#956100}
body:not(.dark-mode) .maplibregl-ctrl-group{background:rgba(255,255,255,.95)!important;border-color:rgba(21,32,51,.15)!important;box-shadow:0 7px 20px rgba(36,54,78,.18)!important}
body:not(.dark-mode) .maplibregl-popup-content{background:#fff;color:var(--text);border-color:rgba(21,32,51,.15);box-shadow:0 8px 24px rgba(36,54,78,.22)}
body:not(.dark-mode) .maplibregl-popup-anchor-top .maplibregl-popup-tip{border-bottom-color:#fff}
body:not(.dark-mode) .maplibregl-popup-anchor-bottom .maplibregl-popup-tip{border-top-color:#fff}
body:not(.dark-mode) .maplibregl-popup-anchor-left .maplibregl-popup-tip{border-right-color:#fff}
body:not(.dark-mode) .maplibregl-popup-anchor-right .maplibregl-popup-tip{border-left-color:#fff}
body:not(.dark-mode) dialog{background:#fff;color:var(--text);box-shadow:0 15px 45px rgba(36,54,78,.3)}

@media(min-width:760px){.route-sheet{height:245px}.nearby-chip{min-width:125px}}
@media(max-width:759px){
  #themeButton{width:38px;height:38px;min-width:38px;padding:0;font-size:0;border-radius:12px}
  #themeButton>span:first-child{font-size:1rem}
  #themeButton .theme-label{display:none}
  .route-sheet{height:248px}
  .route-sheet.expanded{height:min(58vh,440px)}
  .nearby-panel{padding-top:6px}
  .nearby-chip{min-width:108px;max-width:145px;padding:5px 7px}
  .nearby-chip strong{font-size:.61rem}
  .nearby-chip small{font-size:.54rem}
  .timeline-section{margin-top:14px;padding-top:12px}
}

/* Keep the location controls above the collapsed route sheet on phones.  The
   sheet stays on top when expanded, while the map control remains reachable
   in its normal map area instead of being covered by the sheet. */
@media(max-width:759px){
  .map-buttons{z-index:990;bottom:calc(176px + 28px)}
  body.route-sheet-expanded .map-buttons{display:none}
}
.map-button:disabled,.nearby-location-button:disabled{opacity:.58;cursor:wait}

/* Selected-stop view: a restrained, spacing-led hierarchy.  The map remains
   visible behind the sheet; only the information needed to make a boarding
   decision gets strong visual emphasis. */
:root{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Inter,ui-sans-serif,system-ui,"Segoe UI",sans-serif}
body,button,select,input{font-family:inherit}
.details-sheet{background:color-mix(in srgb,var(--panel) 97%,transparent);border:0;border-top:1px solid var(--line);border-radius:20px 20px 0 0;box-shadow:0 -16px 44px rgba(20,32,52,.16);backdrop-filter:blur(22px)}
.details-scroll{padding:0 max(20px,env(safe-area-inset-right)) max(30px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}
.details-title-row{align-items:flex-start;padding-top:4px}
.stop-heading-copy{min-width:0}
.details-title-row h2{margin:3px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:clamp(1.38rem,4vw,1.8rem);font-weight:650;letter-spacing:-.045em;line-height:1.12}
.eyebrow{font-size:.6rem;letter-spacing:.13em;font-weight:650}
.stop-route{margin:6px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:.72rem;font-weight:500}
.details-actions{gap:3px;padding-top:0}
.details-actions .favorite-button,.details-actions .close-button{width:32px;height:32px;border:0;border-radius:50%;background:transparent}
.details-actions .favorite-button{font-size:1.2rem}
.details-actions .close-button{display:grid;place-items:center;padding:0;font-size:1.5rem;font-weight:400}
.stop-picker{margin-top:21px}
.stop-picker label{font-size:.59rem;letter-spacing:.12em;font-weight:650}
.stop-picker select{height:42px;margin-top:7px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:transparent;font-size:.82rem;font-weight:550}
.eta-summary{margin:28px 0 0;padding:0 0 21px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent}
.eta-summary>span:first-child{color:var(--muted);font-size:.62rem;text-transform:uppercase;letter-spacing:.12em;font-weight:650}
.eta-value{display:flex;align-items:baseline;gap:9px;margin-top:2px}
.eta-summary strong{font-size:clamp(4rem,16vw,5.4rem);font-weight:700;letter-spacing:-.1em;line-height:.95}
.eta-summary>div span{color:var(--muted);font-size:1rem;font-weight:550}
.eta-summary p{max-width:32rem;margin:11px 0 0;color:var(--muted);font-size:.7rem;line-height:1.35;font-weight:500}
.timeline-section{margin-top:23px;padding-top:0;border-top:0}
.timeline-section .section-title{align-items:baseline;margin-bottom:7px}
.timeline-section .section-title h3{font-size:1rem;font-weight:620;letter-spacing:-.02em}
.timeline-section .section-title span{font-size:.66rem;font-weight:500}
.timeline-section .section-title .timeline-clock{color:var(--muted);font-size:.54rem;letter-spacing:.12em;font-weight:600}
.stop-timeline{margin-top:0}
.timeline-item{grid-template-columns:8px minmax(0,1fr);min-height:68px;padding:13px 0 12px;border-bottom:1px solid var(--line)}
.timeline-track{width:8px}
.timeline-track span{width:5px;height:5px;margin-top:6px;border:0;background:var(--muted);box-shadow:none}
.timeline-track i{top:15px;bottom:-13px;width:1px;background:var(--line)}
.timeline-item.is-next .timeline-track span{background:var(--green);box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 16%,transparent)}
.timeline-content{padding:0 0 0 12px}
.timeline-row-main{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.timeline-bus{display:grid;min-width:0}
.timeline-bus strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.9rem;font-weight:620;letter-spacing:-.01em}
.timeline-bus span{margin-top:4px;color:var(--muted);font-size:.67rem;font-weight:500}
.timeline-arrival{display:grid;justify-items:end;flex:none;text-align:right}
.timeline-arrival b{font-size:.94rem;font-weight:650;line-height:1.05}
.timeline-item.is-next .timeline-arrival b{color:var(--green)}
.timeline-arrival time{margin-top:4px;color:var(--muted);font-size:.65rem;font-weight:500}
.timeline-meta{display:block;margin-top:8px;color:var(--muted);font-size:.59rem;line-height:1.2;font-weight:450;opacity:.8}
.empty{padding:15px 0;border:0;border-radius:0;text-align:left;color:var(--muted);font-size:.73rem}
.planner-card{margin-top:25px;padding:17px 0 0;border:0;border-top:1px solid var(--line);border-radius:0;background:transparent}
.planner-card .section-title h3{font-size:.93rem;font-weight:620}
.planner-card .section-title span{font-size:.64rem}
.planner-card label{margin-top:15px;font-size:.59rem;letter-spacing:.12em}
.planner-card select,.planner-card input{border-radius:10px;background:transparent}
.planner-controls button{border-radius:10px;padding:10px 15px;font-size:.76rem}
.planner-result{margin-top:17px;padding-top:15px;border-top:1px solid var(--line)}
.planner-result strong{font-size:1.8rem;font-weight:650;letter-spacing:-.05em}
.details-footer{margin-top:25px;padding-top:14px;border-top:1px solid var(--line);font-size:.63rem}
.details-footer a{font-weight:600}
.details-sheet #arrivals{display:none!important}
.sheet-heading h1,.route-sheet .text-button,.nearby-heading h2,.action-button,.route-picker{font-weight:600;letter-spacing:-.015em}
.nearby-chip strong{font-weight:600}

body.dark-mode .details-sheet{box-shadow:0 -16px 44px rgba(0,0,0,.35)}
body:not(.dark-mode) .details-sheet{background:rgba(255,255,255,.97)}
body:not(.dark-mode) .details-sheet .eta-summary{background:transparent;border-color:var(--line)}
body:not(.dark-mode) .details-sheet .eta-summary p{color:var(--muted)}
body:not(.dark-mode) .details-sheet .planner-card{background:transparent}
body:not(.dark-mode) .stop-picker select,body:not(.dark-mode) .planner-card select,body:not(.dark-mode) .planner-card input{background:transparent}

@media(max-width:759px){
  /* Keep a meaningful slice of the map visible while stop details scroll
     independently. The sheet can still reveal every section without taking
     over the entire phone viewport. */
  .details-sheet{height:min(76vh,680px);max-height:calc(100% - max(16px,env(safe-area-inset-top) + 16px))}
  .details-scroll{padding-left:18px;padding-right:18px}
  .details-title-row h2{font-size:1.45rem}
  .stop-picker{margin-top:18px}
  .eta-summary{margin-top:24px;padding-bottom:18px}
  .eta-summary strong{font-size:clamp(3.8rem,17vw,5rem)}
  .timeline-section{margin-top:20px;padding-top:0}
  .timeline-item{min-height:64px;padding-top:11px;padding-bottom:10px}
  .timeline-content{padding-left:10px}
  .timeline-meta{margin-top:6px}
}

/* Native-feeling sheet gesture: the sheet surface is draggable while its
   detail body remains a normal inertial scroll container. */
.route-sheet,.details-sheet{will-change:transform;transition:height .28s ease,transform .28s ease}
.sheet-handle{touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab}
.sheet-handle:active,.sheet-pressing .sheet-handle{cursor:grabbing}
.sheet-dragging{transition:none!important}
.sheet-dragging .sheet-handle span{background:var(--gold)}

/* The compact sheet uses the dropdown and nearby chips.  A swipe upward
   reveals the actual visible-route choices instead of leaving an empty panel.
   Keep this list bounded so it never pushes the map completely off-screen. */
.route-list{display:none}
.route-sheet.expanded{display:flex;flex-direction:column;overflow:hidden}
.route-sheet.expanded .route-list{
  display:grid;
  flex:1;
  min-height:0;
  height:auto;
  max-height:none;
  margin-top:12px;
  padding-bottom:8px;
  overflow:auto;
  border-top:1px solid var(--line);
}
.route-sheet.expanded .route-row{min-height:48px;padding:9px 6px}
.route-sheet.expanded .route-row-copy{min-width:0}
.route-sheet.expanded .route-name,.route-sheet.expanded .route-meta{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Three native-feeling sheet detents.  The selected-stop sheet starts
   expanded, but can be pulled to a medium or map-first peek position without
   changing the selected route. */
.route-sheet[data-detent="collapsed"]{height:248px}
.route-sheet[data-detent="medium"]{height:min(46vh,380px)}
.route-sheet[data-detent="expanded"]{height:min(58vh,440px)}
.details-sheet[data-detent="collapsed"]{height:clamp(190px,30vh,280px)}
.details-sheet[data-detent="medium"]{height:clamp(330px,54vh,500px)}
.details-sheet[data-detent="expanded"]{height:min(76vh,680px)}
@media(min-width:760px){
  .route-sheet[data-detent="collapsed"]{height:245px}
  .route-sheet[data-detent="medium"]{height:min(54vh,480px)}
  .route-sheet[data-detent="expanded"]{height:min(72vh,680px)}
  .details-sheet[data-detent="collapsed"]{height:min(36vh,360px)}
  .details-sheet[data-detent="medium"]{height:min(62vh,620px)}
  .details-sheet[data-detent="expanded"]{height:min(86vh,850px)}
}

/* Selected-stop refinement: the stop name is the control, so the sheet does
   not repeat it in a second, heavy boarding-stop field.  The native select is
   transparent over the heading to keep the picker keyboard and touch
   accessible while the heading and chevron provide the visual affordance. */
.stop-name-control{position:relative;display:flex;align-items:baseline;gap:7px;min-width:0;width:max-content;max-width:100%;border-radius:6px}
.stop-name-control h2{min-width:0;margin:3px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stop-name-chevron{flex:none;color:var(--muted);font-size:1rem;line-height:1;transform:translateY(-1px);pointer-events:none}
.stop-select-overlay{position:absolute;z-index:2;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:6px;background:transparent;color:var(--text);opacity:0;cursor:pointer;appearance:none;-webkit-appearance:none}
.stop-name-control:focus-within{outline:2px solid color-mix(in srgb,var(--gold) 55%,transparent);outline-offset:5px}

/* The arrival summary is intentionally spare: time and freshness carry the
   decision, while source/provenance stays in Data & sources below. */
.eta-summary>span:first-child{display:block;text-transform:uppercase;letter-spacing:.13em;font-variant-numeric:tabular-nums}
.eta-summary p{font-variant-numeric:tabular-nums}

/* Each vehicle is an independent row; there is no timeline connector between
   buses.  Keep a small status dot for scanability without turning it into a
   decorative card. */
.timeline-track i{display:none!important}
.timeline-item{grid-template-columns:8px minmax(0,1fr)}
.timeline-bus span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.25;font-variant-numeric:tabular-nums}
.timeline-arrival b,.timeline-arrival time{font-variant-numeric:tabular-nums}

/* Arrive-by is a disclosure row by default.  The body stays in the document
   so it can animate open inside the sheet instead of causing a jump. */
.planner-card{margin-top:24px;padding:10px 0 0;border-top:1px solid var(--line)}
.planner-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:48px;padding:6px 0;border:0;border-radius:7px;background:transparent;color:var(--text);text-align:left}
.planner-toggle:hover{background:color-mix(in srgb,var(--text) 4%,transparent)}
.planner-toggle:focus-visible{outline:2px solid color-mix(in srgb,var(--gold) 55%,transparent);outline-offset:4px}
.planner-toggle-copy{display:grid;min-width:0}
.planner-toggle-copy strong{font-size:.93rem;font-weight:620;letter-spacing:-.015em}
.planner-toggle-copy small{margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:.63rem;font-weight:500}
.planner-toggle-copy small:empty{display:none}
.planner-toggle-chevron{flex:none;color:var(--muted);font-size:1.45rem;font-weight:350;line-height:1;transition:transform .25s ease,color .2s ease}
.planner-toggle[aria-expanded="true"] .planner-toggle-chevron{color:var(--gold);transform:rotate(90deg)}
.planner-body{max-height:0;overflow:hidden;opacity:0;visibility:hidden;pointer-events:none;transition:max-height .3s ease,opacity .2s ease,padding-top .3s ease,visibility 0s linear .3s}
.planner-body.is-open{max-height:520px;padding-top:15px;opacity:1;visibility:visible;pointer-events:auto;transition:max-height .32s ease,opacity .2s ease,padding-top .3s ease,visibility 0s linear 0s}
.planner-body label{margin-top:13px}
.planner-body label:first-child{margin-top:0}
.planner-error{margin:10px 0 0;color:var(--red);font-size:.72rem;line-height:1.35}
.planner-result{margin-top:17px}
.planner-result[hidden],.planner-error[hidden]{display:none!important}

/* Keep the fallback source available without putting it beside the primary
   ETA.  Opening this disclosure is the rider-facing provenance/debug view. */
.details-footer{display:block;margin-top:24px;padding-top:0;border-top:0}
.data-sources{margin:0;padding-top:14px;border-top:1px solid var(--line)}
.data-sources summary{display:flex;align-items:center;justify-content:space-between;min-height:32px;color:var(--muted);font-size:.66rem;font-weight:600;letter-spacing:.02em}
.data-sources summary::after{content:'›';margin-left:auto;color:var(--muted);font-size:1.1rem;font-weight:350;transition:transform .2s ease}
.data-sources[open] summary::after{transform:rotate(90deg);color:var(--gold)}
.data-sources-content{display:grid;gap:6px;padding:11px 0 2px;color:var(--muted);font-size:.63rem;line-height:1.35}
.data-sources-content a{color:var(--muted);font-size:.66rem;font-weight:600}
.data-sources-content a:hover{color:var(--text)}
.data-sources-content small{color:var(--muted);font-size:.59rem;line-height:1.35}

body:not(.dark-mode) .stop-name-control:focus-within{outline-color:rgba(149,97,0,.55)}
body:not(.dark-mode) .planner-toggle:hover{background:rgba(21,32,51,.035)}
body:not(.dark-mode) .data-sources-content a{color:#596579}

@media(max-width:759px){
  .stop-name-control{gap:6px}
  .details-title-row h2,.stop-name-control h2{font-size:1.45rem}
  .planner-card{margin-top:21px}
  .planner-toggle{min-height:46px}
  .planner-body.is-open{max-height:560px}
}

/* Align times and minute values like a transit instrument panel.  Applying
   tabular numerals at the document level keeps changing ETAs from making
   surrounding labels jump as the feed refreshes. */
:root{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
body,button,select,input{font-variant-numeric:inherit;font-feature-settings:inherit}

/* Minimal transit surfaces -------------------------------------------------
   This is the app's custom layer on top of the existing MapLibre view.  The
   spacing values follow an 8px rhythm; Material's interaction guidance is
   used for touch targets and focus states without adopting Material's visual
   treatment. */
:root{
  --space-1:4px;
  --space-2:8px;
  --space-3:16px;
  --space-4:24px;
  --space-5:32px;
  --space-6:40px;
  --surface-elevated:color-mix(in srgb,var(--panel) 97%,transparent);
  --surface-muted:color-mix(in srgb,var(--panel) 88%,var(--panel2));
  --focus-ring:2px solid color-mix(in srgb,var(--gold) 70%,transparent);
}

/* Persistent route drawer: one quiet surface, then spacing and dividers do
   the grouping. Nearby chips remain useful, but no longer read as a second
   dashboard full of pills. */
.route-sheet{
  padding:0 max(var(--space-3),env(safe-area-inset-right)) max(var(--space-2),env(safe-area-inset-bottom)) max(var(--space-3),env(safe-area-inset-left));
  background:var(--surface-elevated);
  border:0;
  border-top:1px solid var(--line);
  border-radius:24px 24px 0 0;
  box-shadow:0 -12px 32px rgba(36,54,78,.13);
  backdrop-filter:blur(22px);
}
.sheet-handle{height:40px;padding:0;touch-action:none}
.sheet-handle span{width:48px;height:4px;border-radius:2px;background:var(--muted);opacity:.8}
.sheet-handle:focus-visible{outline:var(--focus-ring);outline-offset:-4px;border-radius:8px}
.sheet-heading{min-height:40px;gap:var(--space-3)}
.sheet-heading>div:first-child{min-width:0}
.sheet-heading h1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1.05rem;font-weight:620;letter-spacing:-.02em;line-height:1.2}
.sheet-heading p{margin-top:var(--space-1);font-size:.68rem;font-weight:500}
.sheet-actions{gap:var(--space-1)}
.text-button{min-height:48px;padding:0 var(--space-1);border-radius:8px;font-size:.72rem}
.text-button:focus-visible{outline:var(--focus-ring);outline-offset:2px}
.route-picker{height:48px;margin-top:var(--space-2);padding:0 var(--space-4) 0 var(--space-3);border:1px solid var(--line);border-radius:12px;background:var(--surface-muted);font-size:.78rem;font-weight:600}
.route-picker:focus-visible{outline:var(--focus-ring);outline-offset:2px}

/* Keep the map-first state genuinely compact.  Medium exposes nearby
   choices; expanded exposes the full route list instead of stacking both. */
.route-sheet[data-detent="collapsed"]{height:176px}
.route-sheet[data-detent="collapsed"] .nearby-panel,
.route-sheet[data-detent="collapsed"] .route-list{display:none}
.route-sheet[data-detent="medium"]{height:min(44vh,360px)}
.route-sheet[data-detent="medium"] .route-list{display:none}
.route-sheet[data-detent="expanded"]{height:min(68vh,560px)}
.route-sheet[data-detent="expanded"] .nearby-panel{display:none}
.route-sheet.expanded .route-list{margin-top:var(--space-3);padding:0 0 var(--space-2);border-top:1px solid var(--line)}
.route-sheet.expanded .route-row{min-height:56px;padding:var(--space-2) var(--space-1);border-top:1px solid var(--line)}
.route-sheet.expanded .route-row:first-child{border-top:0}
.route-swatch{width:32px;height:24px;border-radius:8px}
.route-row:focus-visible{outline:var(--focus-ring);outline-offset:-2px;border-radius:8px}

.nearby-panel{margin-top:var(--space-3);padding:var(--space-2) 0 0;border-top:1px solid var(--line)}
.nearby-heading{min-height:48px;gap:var(--space-2)}
.nearby-heading h2{font-size:.9rem;font-weight:620;letter-spacing:-.015em}
.nearby-heading p{margin-top:var(--space-1);font-size:.62rem}
.nearby-location-button{min-height:48px;padding:0 var(--space-1);border-radius:8px;font-size:.66rem}
.nearby-location-button:focus-visible{outline:var(--focus-ring);outline-offset:2px}
.nearby-row,.favorites-row{grid-template-columns:64px minmax(0,1fr);gap:var(--space-2);margin-top:var(--space-2)}
.nearby-label{font-size:.59rem;letter-spacing:.1em}
.nearby-chips{gap:var(--space-2);padding:var(--space-1) 2px var(--space-2)}
.nearby-chip{min-height:40px;max-width:192px;padding:var(--space-1) var(--space-2);border:1px solid var(--line);border-radius:8px;background:var(--surface-muted)}
.nearby-chip strong{font-size:.66rem;font-weight:600}
.nearby-chip small{font-size:.57rem}
.nearby-chip:focus-visible{outline:var(--focus-ring);outline-offset:2px}

/* Rider controls use the recommended 44–48px touch area, while their visual
   treatment stays quiet and compact. */
.action-button{min-height:48px;border-radius:12px;box-shadow:0 4px 14px rgba(36,54,78,.13)}
.map-button{min-width:48px;min-height:48px}
.favorite-button{width:44px;height:44px;min-width:44px;border-radius:50%}
.details-actions .favorite-button,.details-actions .close-button{width:44px;height:44px}
.close-button:focus-visible,.favorite-button:focus-visible{outline:var(--focus-ring);outline-offset:2px}

/* Dialogs follow the same spacing and state language as the sheets. */
dialog{padding:var(--space-4);border-radius:16px;box-shadow:0 16px 40px rgba(36,54,78,.24)}
dialog input{min-height:48px;margin-top:var(--space-2)}
.dialog-actions{gap:var(--space-2);margin-top:var(--space-3)}
.dialog-actions button{min-height:48px;padding:0 var(--space-3);border-radius:10px}
.dialog-actions button:focus-visible{outline:var(--focus-ring);outline-offset:2px}

@media(min-width:760px){
  .route-sheet{padding-left:var(--space-4);padding-right:var(--space-4)}
  .route-sheet[data-detent="collapsed"]{height:176px}
  .route-sheet[data-detent="medium"]{height:min(46vh,400px)}
  .route-sheet[data-detent="expanded"]{height:min(72vh,620px)}
}

@media(max-width:759px){
  .route-sheet{padding-left:var(--space-3);padding-right:var(--space-3)}
  .route-sheet[data-detent="collapsed"]{height:176px}
  .route-sheet[data-detent="medium"]{height:min(48vh,360px)}
  .route-sheet[data-detent="expanded"]{height:min(68vh,540px)}
  .header-actions .action-button{min-width:44px;min-height:44px}
  #tokenButton,#themeButton{width:44px;height:44px}
  .nearby-row,.favorites-row{grid-template-columns:56px minmax(0,1fr)}
  .nearby-chip{min-width:112px;max-width:164px}
}

/* A reduced-motion preference should still preserve the sheet's state
   changes, but without animated height/opacity transitions. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

@media(max-width:759px){
  /* Keep the primary ETA just above the map-first route peek.  Once the
     drawer is medium/expanded, the sheet owns the lower part of the screen
     and the duplicate floating card is intentionally removed. */
  .quick-eta{bottom:184px}
  body.route-sheet-medium .quick-eta,
  body.route-sheet-expanded .quick-eta{display:none}
  body.route-sheet-medium .map-buttons,
  body.route-sheet-expanded .map-buttons{display:none}
}

/* Legal map credit stays visible without becoming another map control. It
   moves just above the current route drawer so it never gets covered by the
   sheet and remains a quiet text link instead of a floating information icon. */
.map-attribution{
  position:fixed;
  z-index:880;
  left:max(8px,env(safe-area-inset-left));
  bottom:12px;
  display:flex;
  flex-wrap:wrap;
  gap:0 4px;
  max-width:calc(100% - 16px);
  margin:0;
  color:rgba(21,32,51,.58);
  font-size:9px;
  font-weight:500;
  line-height:1.25;
  text-shadow:0 1px 1px rgba(255,255,255,.85);
}
.map-attribution a{color:inherit;text-decoration:none}
.map-attribution a:hover,.map-attribution a:focus-visible{text-decoration:underline;outline:none}
body.dark-mode .map-attribution{color:rgba(250,248,255,.66);text-shadow:0 1px 1px rgba(0,0,0,.45)}
@media(max-width:759px){
  .map-attribution{bottom:calc(176px + max(18px,env(safe-area-inset-bottom)))}
  body.route-sheet-medium .map-attribution{bottom:calc(min(48vh,360px) + max(18px,env(safe-area-inset-bottom)))}
  body.route-sheet-expanded .map-attribution{bottom:calc(min(68vh,540px) + max(18px,env(safe-area-inset-bottom)))}
  body.bus-panel-open .map-attribution{bottom:calc(252px + max(18px,env(safe-area-inset-bottom)))}
}

/* Detent geometry: collapsed and medium feel like a floating card with the
   campus still visible on every side; expanded becomes the full-width reading
   surface. The geometry is animated with the height snap so a swipe never
   leaves a visually stranded half-sheet. */
.route-sheet,.details-sheet{
  transition:height .28s ease,transform .28s ease,left .28s ease,right .28s ease,bottom .28s ease,border-radius .28s ease,box-shadow .28s ease;
  cursor:grab;
}
.route-sheet.sheet-dragging,.details-sheet.sheet-dragging{cursor:grabbing}
.route-sheet button,.route-sheet select,.details-sheet button,.details-sheet select,.details-sheet input{cursor:pointer}
@media(max-width:759px){
  .route-sheet,.details-sheet{
    left:12px;
    right:12px;
    bottom:max(12px,env(safe-area-inset-bottom));
    border:1px solid var(--line);
    border-radius:24px;
    box-shadow:0 8px 28px rgba(36,54,78,.16);
    touch-action:none;
  }
  .route-sheet[data-detent="expanded"],.details-sheet[data-detent="expanded"]{
    left:0;
    right:0;
    bottom:0;
    border-right:0;
    border-bottom:0;
    border-left:0;
    border-radius:24px 24px 0 0;
    box-shadow:0 -10px 30px rgba(36,54,78,.16);
  }
  .details-scroll,.route-list{touch-action:pan-y}
}
@media(min-width:760px){
  .route-sheet[data-detent="expanded"],.details-sheet[data-detent="expanded"]{
    border-radius:24px 24px 0 0;
  }
}

/* A short stop result should not reserve a viewport-sized blank footer.  The
   expanded details sheet grows to its content and only starts scrolling when
   that content approaches the top safe area. */
.details-sheet[data-detent="expanded"]{
  height:auto;
  max-height:min(86vh,760px);
}
.details-sheet[data-detent="expanded"] .details-scroll{
  height:auto;
  max-height:calc(min(86vh,760px) - 40px);
}
.stop-name-control{gap:10px}
.stop-name-chevron{font-size:1.25rem;font-weight:500;letter-spacing:0;transform:translateY(-2px)}

/* Green is reserved for the immediately actionable state.  A normal ETA is
   intentionally neutral so color carries meaning instead of decoration. */
.timeline-item.is-next .timeline-content b{color:var(--text)}
.timeline-item.is-now .timeline-content b{color:var(--green)}
.timeline-item.is-next .timeline-track span{border-color:var(--muted);background:var(--panel);box-shadow:none}
.timeline-item.is-now .timeline-track span{border-color:var(--green);background:var(--green);box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 18%,transparent)}

/* Bus detail panel -------------------------------------------------------
   The bus remains anchored to the map while the panel progressively reveals
   detail.  Geometry is driven by --bus-sheet-* variables from app.js during
   a drag/spring so the rounded clipping shape never jumps between detents. */
.bus-details-sheet{
  --bus-sheet-inset-x:12px;
  --bus-sheet-inset-bottom:12px;
  --bus-sheet-radius:20px;
  --bus-sheet-shadow:0 -8px 22px rgba(36,54,78,.16);
  left:var(--bus-sheet-inset-x);
  right:var(--bus-sheet-inset-x);
  bottom:var(--bus-sheet-inset-bottom);
  height:252px;
  max-height:min(86vh,760px);
  padding:0 max(18px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--line) 80%,transparent);
  border-radius:var(--bus-sheet-radius);
  box-shadow:var(--bus-sheet-shadow);
  background:color-mix(in srgb,var(--panel) 97%,transparent);
  backdrop-filter:blur(22px);
  touch-action:none;
  cursor:grab;
  transition:none!important;
  will-change:height,transform,left,right,bottom,border-radius,box-shadow;
  z-index:1010;
}
.bus-details-sheet.sheet-dragging{cursor:grabbing}
.bus-details-sheet[data-detent="peek"]{height:252px}
.bus-details-sheet[data-detent="medium"]{height:min(50vh,390px)}
.bus-details-sheet[data-detent="expanded"]{height:min(78vh,700px)}
.bus-details-sheet .sheet-handle{flex:none;height:38px;padding:0;touch-action:none}
.bus-details-sheet .sheet-handle span{width:48px;height:4px;border-radius:2px;background:var(--muted);opacity:.82}
.bus-details-sheet .sheet-handle:focus-visible{outline:2px solid var(--gold);outline-offset:-4px;border-radius:8px}
.bus-details-scroll{min-height:0;flex:1;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;scrollbar-width:none}
.bus-details-scroll::-webkit-scrollbar{display:none;width:0;height:0}
.bus-panel-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:0 0 11px;border-bottom:1px solid var(--line)}
.bus-panel-heading{min-width:0}
.bus-panel-kicker,.bus-panel-label{display:block;color:var(--muted);font-size:.59rem;letter-spacing:.14em;font-weight:650;text-transform:uppercase}
.bus-panel-heading h2{margin:4px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:clamp(1.45rem,5vw,2rem);font-weight:650;letter-spacing:-.05em;line-height:1.05}
.bus-panel-heading p{margin:5px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:.72rem;font-weight:500}
.bus-panel-close{display:grid;place-items:center;flex:none;width:44px;height:44px;margin-top:-7px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--muted);font-size:1.55rem;font-weight:400}
.bus-panel-close:hover{background:color-mix(in srgb,var(--line) 45%,transparent);color:var(--text)}
.bus-panel-peek-summary{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:16px;padding:14px 0 12px}
.bus-panel-destination{min-width:0}
.bus-panel-destination strong{display:block;margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.98rem;font-weight:600;letter-spacing:-.02em}
.bus-panel-eta-wrap{text-align:right}
.bus-panel-eta{display:flex;align-items:baseline;justify-content:flex-end;gap:5px;margin-top:1px;font-size:clamp(2.5rem,11vw,4rem);font-weight:700;letter-spacing:-.09em;line-height:.9;font-variant-numeric:tabular-nums lining-nums}
.bus-panel-eta small{color:var(--muted);font-size:.76rem;font-weight:550;letter-spacing:-.01em}
.bus-panel-eta-clock{display:block;margin-top:5px;color:var(--muted);font-size:.62rem;font-weight:500;font-variant-numeric:tabular-nums}
.bus-details-sheet .bus-panel-medium,.bus-details-sheet .bus-panel-expanded{display:none}
.bus-details-sheet[data-detent="medium"] .bus-panel-medium,.bus-details-sheet[data-detent="expanded"] .bus-panel-medium{display:block}
.bus-details-sheet[data-detent="expanded"] .bus-panel-expanded{display:block}
.bus-panel-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;min-height:43px;padding:10px 0;border-top:1px solid var(--line)}
.bus-panel-row span{color:var(--muted);font-size:.69rem;font-weight:500}
.bus-panel-row strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right;font-size:.76rem;font-weight:600;font-variant-numeric:tabular-nums}
.bus-panel-actions{display:flex;gap:8px;padding:12px 0 4px}
.bus-panel-action{min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--text);font-size:.72rem;font-weight:600}
.bus-panel-action:hover{background:color-mix(in srgb,var(--line) 45%,transparent)}
.bus-panel-action:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.bus-panel-section{margin-top:21px;padding-top:14px;border-top:1px solid var(--line)}
.bus-panel-section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.bus-panel-section h3{margin:0;font-size:.98rem;font-weight:620;letter-spacing:-.02em}
.bus-panel-section-heading span{color:var(--muted);font-size:.64rem;font-weight:500}
.bus-stop-sequence{display:grid;gap:0;margin:8px 0 0;padding:0;list-style:none}
.bus-stop-row{display:grid;grid-template-columns:12px minmax(0,1fr) auto;align-items:center;gap:9px;min-height:43px;padding:9px 0;border-bottom:1px solid var(--line)}
.bus-stop-dot{width:7px;height:7px;border:1px solid var(--muted);border-radius:50%;background:transparent}
.bus-stop-row.is-next .bus-stop-dot{border-color:var(--green);background:var(--green);box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 18%,transparent)}
.bus-stop-row.is-next .bus-stop-name{font-weight:650}
.bus-stop-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.76rem;font-weight:520}
.bus-stop-meta{display:grid;justify-items:end;gap:2px;color:var(--muted);font-size:.62rem;font-weight:500;line-height:1.1;text-align:right;font-variant-numeric:tabular-nums}
.bus-stop-meta strong{color:var(--text);font-size:.64rem;font-weight:600}
.bus-stop-meta small{color:var(--muted);font-size:.58rem;font-weight:500}
.bus-panel-service{margin-top:18px}
.bus-panel-source{margin:18px 0 8px;padding-top:12px;border-top:1px solid var(--line)}
.bus-panel-source summary{color:var(--muted);font-size:.66rem;font-weight:600}
.bus-panel-source p{margin:9px 0;color:var(--muted);font-size:.65rem;line-height:1.45}
.bus-panel-source a{color:var(--muted);font-size:.65rem;font-weight:600}
.bus-details-sheet button,.bus-details-sheet select,.bus-details-sheet input{cursor:pointer}
body.bus-panel-open .route-sheet,body.bus-panel-open .details-sheet,body.bus-panel-open .quick-eta{display:none!important}
body:not(.dark-mode) .bus-details-sheet{background:rgba(255,255,255,.97);border-color:rgba(21,32,51,.15);box-shadow:var(--bus-sheet-shadow)}
body.dark-mode .bus-details-sheet{background:rgba(20,17,29,.98);border-color:var(--line)}
@media(min-width:760px){
  .bus-details-sheet{left:auto;right:var(--bus-sheet-inset-x);width:390px;bottom:var(--bus-sheet-inset-bottom)}
  .bus-details-sheet[data-detent="peek"]{height:252px}
  .bus-details-sheet[data-detent="medium"]{height:min(54vh,430px)}
  .bus-details-sheet[data-detent="expanded"]{height:min(82vh,760px)}
}
@media(max-width:430px){
  .bus-details-sheet{padding-left:15px;padding-right:15px}
  .bus-panel-peek-summary{gap:10px}
  .bus-panel-heading h2{font-size:1.42rem}
}

/* Arrival-card language --------------------------------------------------
   The compact ETA card is the route drawer's collapsed state.  Its larger
   detents retain that same airy glass surface rather than switching to a
   generic opaque dashboard, so opening the sheet feels like one continuous
   object instead of two stacked panels. */
.route-peek{display:none}
.route-sheet,.details-sheet{
  background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(243,247,251,.96));
  border-color:color-mix(in srgb,var(--green) 34%,var(--line));
}
.route-sheet[data-detent="collapsed"]{
  height:112px;
  min-height:112px;
  border:1px solid color-mix(in srgb,var(--green) 42%,var(--line));
  border-radius:22px;
  box-shadow:0 10px 28px rgba(36,54,78,.17);
}
.route-sheet[data-detent="collapsed"] .sheet-handle,
.route-sheet[data-detent="collapsed"] .sheet-heading,
.route-sheet[data-detent="collapsed"] .route-picker-label,
.route-sheet[data-detent="collapsed"] .route-picker,
.route-sheet[data-detent="collapsed"] .nearby-panel,
.route-sheet[data-detent="collapsed"] .route-list{display:none}
.route-sheet[data-detent="collapsed"] .route-peek{display:grid}
.route-peek{
  width:100%;
  min-height:91px;
  grid-template-columns:minmax(0,1fr) auto 16px;
  align-items:center;
  gap:12px;
  padding:0 4px;
  border:0;
  border-radius:16px;
  background:transparent;
  color:var(--text);
  text-align:left;
  touch-action:manipulation;
}
.route-peek:focus-visible{outline:var(--focus-ring);outline-offset:2px}
.route-peek-copy,.route-peek-time{display:grid;min-width:0}
.route-peek-copy small,.route-peek-time small{
  color:var(--muted);
  font-size:.6rem;
  font-weight:650;
  letter-spacing:.12em;
  line-height:1;
}
.route-peek-copy strong{
  margin-top:5px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:1rem;
  font-weight:650;
  letter-spacing:-.025em;
  line-height:1.12;
}
.route-peek-copy>span{
  margin-top:5px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--muted);
  font-size:.68rem;
  font-weight:500;
  line-height:1.2;
}
.route-peek-time{justify-items:end;text-align:right}
.route-peek-time>span{display:flex;align-items:baseline;justify-content:flex-end;gap:4px;margin-top:4px}
.route-peek-time strong{
  font-size:clamp(2.4rem,9vw,3.4rem);
  font-weight:700;
  letter-spacing:-.085em;
  line-height:.82;
  font-variant-numeric:tabular-nums lining-nums;
}
.route-peek-time em{color:var(--muted);font-size:.78rem;font-style:normal;font-weight:600}
.route-peek-time b{margin-top:8px;color:var(--muted);font-size:.62rem;font-weight:650;line-height:1;white-space:nowrap}
.route-peek.is-live .route-peek-time b{color:var(--green)}
.route-peek.is-unavailable .route-peek-time b{color:var(--gold)}
.route-peek-chevron{align-self:center;color:var(--gold);font-size:1.75rem;font-weight:400;line-height:1}
.route-clear-button{
  position:absolute;
  z-index:3;
  top:4px;
  right:4px;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  min-width:44px;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  color:var(--muted);
  font-size:1.55rem;
  font-weight:400;
  line-height:1;
}
.route-clear-button:hover,.route-clear-button:focus-visible{background:color-mix(in srgb,var(--line) 55%,transparent);color:var(--text)}
.route-clear-button:focus-visible{outline:var(--focus-ring);outline-offset:2px}
.route-sheet:not([data-detent="collapsed"]) .route-clear-button{display:none}
.route-sheet:not([data-detent="collapsed"]){
  border-color:color-mix(in srgb,var(--green) 26%,var(--line));
  box-shadow:0 10px 32px rgba(36,54,78,.17);
}
.route-sheet:not([data-detent="collapsed"]) .sheet-heading{
  min-height:48px;
  padding:0 4px 8px;
  border-bottom:1px solid color-mix(in srgb,var(--green) 14%,var(--line));
}
.route-sheet:not([data-detent="collapsed"]) .route-picker{background:rgba(255,255,255,.7)}
.details-sheet{box-shadow:0 -12px 34px rgba(36,54,78,.16)}
body.dark-mode .route-sheet,body.dark-mode .details-sheet{background:linear-gradient(145deg,rgba(28,24,39,.98),rgba(20,17,29,.96))}

/* A compact card needs less map clearance than the old two-card stack. */
@media(max-width:759px){
  .route-sheet[data-detent="collapsed"]{height:112px;min-height:112px}
  .map-buttons{bottom:calc(112px + 28px)}
  .map-attribution{bottom:calc(112px + max(18px,env(safe-area-inset-bottom)))}
  .route-peek{min-height:91px}
  .route-peek-copy strong{font-size:.98rem}
  .route-peek-copy>span{font-size:.64rem}
  .route-peek-time strong{font-size:2.65rem}
  .route-peek-time b{font-size:.59rem}
  .route-clear-button{top:3px;right:3px;width:44px;height:44px;min-width:44px}
}
@media(min-width:760px){
  .route-sheet[data-detent="collapsed"]{height:118px;min-height:118px}
  .route-peek{min-height:96px}
}

/* The selected-stop sheet uses the same compact arrival card at its
   collapsed detent.  Full arrival rows remain available at medium and
   expanded detents, so collapsing never discards the stop context. */
.details-peek{display:none}
.details-sheet[data-detent="collapsed"]{
  height:112px;
  min-height:112px;
  border:1px solid color-mix(in srgb,var(--green) 42%,var(--line));
  border-radius:22px;
  box-shadow:0 10px 28px rgba(36,54,78,.17);
  background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(243,247,251,.96));
}
.details-sheet[data-detent="collapsed"] .sheet-handle,
.details-sheet[data-detent="collapsed"] .details-scroll{display:none}
.details-sheet[data-detent="collapsed"] .details-peek{display:grid}
.details-peek{
  width:100%;
  min-height:91px;
  grid-template-columns:minmax(0,1fr) auto 16px;
  align-items:center;
  gap:12px;
  padding:0 4px;
  border:0;
  border-radius:16px;
  background:transparent;
  color:var(--text);
  text-align:left;
  touch-action:manipulation;
}
.details-peek:focus-visible{outline:var(--focus-ring);outline-offset:2px}
.details-peek-copy,.details-peek-time{display:grid;min-width:0}
.details-peek-copy small,.details-peek-time small{
  color:var(--muted);
  font-size:.6rem;
  font-weight:650;
  letter-spacing:.12em;
  line-height:1;
}
.details-peek-copy strong{
  margin-top:5px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:1rem;
  font-weight:650;
  letter-spacing:-.025em;
  line-height:1.12;
}
.details-peek-copy>span{
  margin-top:5px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--muted);
  font-size:.68rem;
  font-weight:500;
  line-height:1.2;
}
.details-peek-time{justify-items:end;text-align:right}
.details-peek-time>span{display:flex;align-items:baseline;justify-content:flex-end;gap:4px;margin-top:4px}
.details-peek-time strong{
  font-size:clamp(2.4rem,9vw,3.4rem);
  font-weight:700;
  letter-spacing:-.085em;
  line-height:.82;
  font-variant-numeric:tabular-nums lining-nums;
}
.details-peek-time em{color:var(--muted);font-size:.78rem;font-style:normal;font-weight:600}
.details-peek-time b{margin-top:8px;color:var(--muted);font-size:.62rem;font-weight:650;line-height:1;white-space:nowrap}
.details-peek.is-live .details-peek-time b{color:var(--green)}
.details-peek.is-unavailable .details-peek-time b{color:var(--gold)}
.details-peek-chevron{align-self:center;color:var(--gold);font-size:1.75rem;font-weight:400;line-height:1}
body.dark-mode .details-sheet[data-detent="collapsed"]{background:linear-gradient(145deg,rgba(28,24,39,.98),rgba(20,17,29,.96))}

/* Preserve native scrolling and keyboard/touch behavior while removing the
   platform scrollbar chrome from the rider-facing details view. */
.details-scroll,.route-list,.bus-details-scroll{
  scrollbar-width:none;
  -ms-overflow-style:none;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.details-scroll::-webkit-scrollbar,.route-list::-webkit-scrollbar,.bus-details-scroll::-webkit-scrollbar{
  display:none;
  width:0;
  height:0;
}
@media(max-width:759px){
  .details-sheet[data-detent="collapsed"]{height:112px;min-height:112px}
  .details-peek{min-height:91px}
  .details-peek-copy strong{font-size:.98rem}
  .details-peek-copy>span{font-size:.64rem}
  .details-peek-time strong{font-size:2.65rem}
  .details-peek-time b{font-size:.59rem}
}
@media(min-width:760px){
  .details-sheet[data-detent="collapsed"]{height:118px;min-height:118px}
  .details-peek{min-height:96px}
}

/* Long stop names should remain readable in the selected-stop header.  Give
   the heading the flexible column beside the actions and allow the name to
   wrap instead of hiding the end behind an ellipsis.  The transparent native
   select follows the resulting control height, so the whole visible title
   remains tappable for changing stops. */
.stop-heading-copy{flex:1 1 auto;min-width:0}
.stop-name-control{width:100%;max-width:100%;align-items:flex-start;gap:8px}
.details-title-row h2,.stop-name-control h2{
  flex:1 1 auto;
  min-width:0;
  overflow:visible;
  text-overflow:clip;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:normal;
}
.stop-name-chevron{flex:none;margin-top:3px}

/* -------------------------------------------------------------------------
   Premade sheet physics

   The selected-stop sheet is hosted by @magic-spells/sheet.  Its native
   dialog owns the spring, snap-point and scroll hand-off mechanics; these
   rules keep the existing Knight ETA surface language and let the map show
   through without a second card nested inside the library panel.
   ------------------------------------------------------------------------- */
#detailsSheetPanel > dialog{
  --sheet-panel-background:rgba(255,255,255,.98);
  --sheet-panel-border-radius:24px;
  --sheet-panel-box-shadow:0 -12px 34px rgba(36,54,78,.16);
  --sheet-overlay-background:transparent;
  --sheet-overlay-blur:0px;
  background:var(--sheet-panel-background);
  border:0;
  border-radius:24px 24px 0 0;
  overflow:hidden;
}
#detailsSheetPanel > dialog-backdrop{background:transparent;backdrop-filter:none}
body.dark-mode #detailsSheetPanel > dialog{
  --sheet-panel-background:rgba(28,24,39,.98);
  --sheet-panel-box-shadow:0 -12px 34px rgba(0,0,0,.35);
}
#detailsSheetSurface{
  --sheet-content-padding:0px;
  --sheet-handle-color:transparent;
  background:var(--sheet-panel-background);
  color:var(--text);
}
#detailsSheetSurface > sheet-header{
  position:relative;
  z-index:4;
  flex:0 0 0;
  height:0;
  padding:0;
  overflow:visible;
  /* Keep the header itself on the library's drag surface.  The handle remains
     a real button, so taps still work, while pointer streams can be claimed by
     the premade sheet engine before a nested scroll view gets involved. */
  pointer-events:auto;
}
#detailsSheetSurface > sheet-header::before{content:none!important}
#detailsSheetSurface > sheet-header .sheet-handle{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:40px;
  padding:0;
  border:0;
  background:transparent;
  pointer-events:auto;
}
#detailsSheetSurface > sheet-content{
  min-height:0;
  padding:0;
  overflow:hidden;
  overscroll-behavior:contain;
}
#detailsSheetSurface > sheet-content > .details-sheet{
  position:relative!important;
  inset:auto!important;
  z-index:auto;
  width:100%;
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  box-shadow:none;
  background:transparent;
  backdrop-filter:none;
  overflow:hidden;
  transition:none!important;
  transform:none!important;
  touch-action:auto;
}
#detailsSheetSurface > sheet-content > .details-sheet .details-scroll{
  height:100%;
  max-height:none;
  min-height:0;
  overflow:auto;
}
#detailsSheetSurface > sheet-content > .details-sheet[data-detent="collapsed"] .details-scroll{display:none}
#detailsSheetSurface > sheet-content > .details-sheet[data-detent="collapsed"] .details-peek{display:grid}
@media(min-width:760px){
  #detailsSheetPanel > dialog{
    border-radius:20px;
    overflow:hidden;
  }
  #detailsSheetSurface > sheet-content > .details-sheet .details-scroll{padding-bottom:18px}
}

/* Desktop sidebars keep the map as the primary canvas while making the
   route, stop, and bus sheets feel like a familiar maps app. Mobile retains
   the bottom-sheet layout above. */
@media(min-width:760px){
  .route-sheet{
    left:18px;
    right:auto;
    bottom:18px;
    width:min(390px,calc(100vw - 36px));
  }
  .bus-details-sheet{
    left:var(--bus-sheet-inset-x);
    right:auto;
    width:min(390px,calc(100vw - 36px));
  }
  .quick-eta{
    left:auto;
    right:18px;
  }
  .pair-card{
    left:auto;
    right:18px;
  }
  .map-buttons{right:12px}
  .map-legend{
    left:auto;
    right:12px;
  }
  .map-attribution{
    left:auto;
    right:12px;
    justify-content:flex-end;
    text-align:right;
  }
}