/* Colours sampled from the reference screenshots (Sample1/Sample2.JPG) */
:root{
  --pin-green:#2EAD5E;      /* leaf pin body */
  --pin-green-hi:#3EC36D;   /* leaf pin highlight */
  --pin-green-lo:#1A9546;   /* leaf pin shade */
  --pin-halo:#C8F6D9;       /* mint halo around green pins */
  --pin-dark:#136935;       /* tree pin body */
  --pin-dark-halo:#D8F0E0;
  --pin-blue:#3A7AEB;       /* walker pin body */
  --pin-blue-halo:#D0E6FF;
  --pill:#F7F7F5;           /* credit pill / card background */
  --ink:#2E3430;            /* credit pill text */
  --muted:#6B716D;
  --line:#E3E2DE;           /* basemap background tone */
  --shadow:0 2px 10px rgba(0,0,0,.18);
  --radius:22px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#E3E2DE;color:var(--ink);font:15px/1.35 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-tap-highlight-color:transparent;overflow:hidden}
#map{position:fixed;inset:0;background:#E3E2DE}

/* Muted OSM basemap, matching the reference look */
.leaflet-tile-pane .basemap{filter:saturate(.22) brightness(.97) contrast(.95)}
.leaflet-container{font-family:inherit}
.leaflet-control-attribution{background:rgba(255,255,255,.75)!important;font-size:10px}
.leaflet-bottom.leaflet-right{bottom:calc(var(--sheet-h,0px) + var(--safe-b))}
.leaflet-bottom.leaflet-left{bottom:calc(var(--sheet-h,0px) + var(--safe-b))}
.leaflet-control-zoom{border:none!important;box-shadow:var(--shadow)!important;margin-bottom:28px!important}
.leaflet-control-zoom a{width:36px!important;height:36px!important;line-height:34px!important;font-size:22px!important;color:var(--ink)!important}

/* Info button (top-left "i" like reference) */
.info-btn{position:fixed;z-index:1001;top:calc(10px + var(--safe-t));left:10px;width:30px;height:30px;border:0;background:transparent;padding:5px;cursor:pointer}
.info-btn svg{fill:#111}

/* Cards */
.card{background:var(--pill);border-radius:var(--radius);box-shadow:var(--shadow)}
.planner{position:fixed;z-index:1000;top:calc(10px + var(--safe-t));left:46px;right:10px;padding:8px 10px 10px;max-width:460px}
.field{display:flex;align-items:center;gap:8px;height:40px}
.field input{flex:1;min-width:0;height:38px;border:1px solid transparent;border-radius:12px;background:#fff;padding:0 12px;font:inherit;color:var(--ink);outline:none}
.field input:focus{border-color:var(--pin-green)}
.dot{width:14px;height:14px;border-radius:50%;flex:none;box-shadow:0 0 0 3px var(--halo)}
.dot-from{background:var(--pin-blue);--halo:var(--pin-blue-halo)}
.dot-to{background:var(--pin-green);--halo:var(--pin-halo)}
.icon-btn{flex:none;width:34px;height:34px;border:0;border-radius:50%;background:#fff;display:grid;place-items:center;cursor:pointer}
.icon-btn svg{fill:var(--pin-blue)}
.divider{height:6px;margin-left:6px;border-left:2px dotted #b9bdb9}
.swap svg{fill:var(--muted)}
.go-btn{display:block;width:100%;margin-top:8px;height:40px;border:0;border-radius:20px;background:var(--pin-green);color:#fff;font:600 15px Inter,system-ui,sans-serif;cursor:pointer}
.go-btn:active{background:var(--pin-green-lo)}
.suggest{list-style:none;margin:6px 0 0;padding:4px;background:#fff;border-radius:14px;max-height:40vh;overflow:auto}
.suggest li{padding:10px 12px;border-radius:10px;cursor:pointer}
.suggest li:hover,.suggest li[aria-selected=true]{background:#EEF8F1}
.suggest small{color:var(--muted)}

/* Layer chips */
.chips{position:fixed;z-index:999;left:0;right:0;top:calc(var(--planner-h,150px) + 18px + var(--safe-t));display:flex;gap:8px;padding:0 10px;overflow-x:auto;scrollbar-width:none}
.chip{flex:none;display:flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:16px;border:0;background:var(--pill);box-shadow:var(--shadow);font:500 13px Inter,system-ui,sans-serif;color:var(--muted);cursor:pointer}
.chip.on{color:var(--ink)}
.chip:not(.on) .chip-ico{opacity:.35}
.chip-ico{width:12px;height:12px;border-radius:50%}
.chip-ico.bus{background:#4F832E;border-radius:3px}
.chip-ico.stop{background:var(--pin-green);box-shadow:0 0 0 2px var(--pin-halo)}
.chip-ico.route{height:4px;width:14px;border-radius:2px;background:linear-gradient(90deg,#C800A1,#1988B7,#ED1C24)}
.chip-ico.trail{background:var(--pin-dark);box-shadow:0 0 0 2px var(--pin-dark-halo)}

/* Credit pill (bottom-left) */
.credit{position:fixed;z-index:998;left:10px;bottom:calc(14px + var(--sheet-h,0px) + var(--safe-b));display:flex;align-items:center;gap:10px;padding:5px 16px 5px 5px;background:var(--pill);border-radius:999px;box-shadow:var(--shadow);font:500 12px Inter,system-ui,sans-serif;color:var(--ink)}
.avatar{width:28px;height:28px;border-radius:50%;background:var(--pin-green);color:#fff;display:grid;place-items:center;font-weight:700;font-size:11px;box-shadow:0 0 0 2px #fff}

/* Bottom sheet */
.sheet{position:fixed;z-index:1000;left:0;right:0;bottom:0;background:var(--pill);border-radius:var(--radius) var(--radius) 0 0;box-shadow:0 -2px 12px rgba(0,0,0,.15);padding:6px 16px calc(12px + var(--safe-b));max-height:55vh;overflow:auto;transform:translateY(100%);transition:transform .25s}
.sheet.open{transform:none}
.grab{width:40px;height:4px;border-radius:2px;background:#cfd2cf;margin:2px auto 8px}
.status{display:flex;align-items:center;gap:10px;font-size:13px}
.status b{font-weight:600}
.live-dot{width:9px;height:9px;border-radius:50%;background:#E8A33A;flex:none}
.muted{color:var(--muted);font-size:13px}

/* Map markers */
.pin{width:34px;height:44px}
.pin svg{display:block;filter:drop-shadow(0 2px 2px rgba(0,0,0,.25))}
.stop-dot{width:10px;height:10px;border-radius:50%;background:var(--pin-green);border:2px solid var(--pin-halo);box-shadow:0 1px 2px rgba(0,0,0,.3)}
.busmk{position:relative;width:30px;height:30px}
.busmk .b{position:absolute;inset:0;border-radius:50%;border:2.5px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.35);display:grid;place-items:center;font:700 11px/1 Inter,system-ui,sans-serif;letter-spacing:-.3px}
.busmk .h{position:absolute;left:50%;top:50%;width:0;height:0;transform-origin:0 0}
.busmk .h i{position:absolute;left:-6px;top:-24px;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:8px solid var(--c)}
.leaflet-popup-content-wrapper{border-radius:16px;background:var(--pill)}
.leaflet-popup-content{margin:12px 14px;font:13px/1.4 Inter,system-ui,sans-serif;color:var(--ink)}
.pop-title{font-weight:600;font-size:14px;margin-bottom:2px}
.badge{display:inline-block;min-width:22px;padding:2px 6px;border-radius:6px;font-weight:700;font-size:12px;text-align:center}

/* Info dialog */
.dlg{border:0;padding:18px 18px 14px;max-width:min(92vw,420px)}
.dlg::backdrop{background:rgba(0,0,0,.3)}
.dlg h2{margin:0 0 6px;font-size:18px}
.legend{list-style:none;padding:0;margin:10px 0}
.legend li{display:flex;align-items:center;gap:10px;margin:6px 0}
.lg-pin{width:22px;height:28px;display:inline-block}
.lg-bus{width:20px;height:20px;border-radius:50%;background:#4F832E;border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.3)}

/* Trip results */
.spinner{width:18px;height:18px;border-radius:50%;border:3px solid var(--pin-halo);border-top-color:var(--pin-green);animation:spin .8s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
.sum{display:flex;align-items:center;justify-content:space-between;gap:10px}
.big{font-size:22px;font-weight:700;line-height:1.1}
.dep{font-size:12px;color:var(--muted);display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.dep input{font:inherit;font-size:14px;color:var(--ink);border:1px solid #d9dbd8;border-radius:10px;padding:4px 6px;background:#fff}
.closest{display:flex;align-items:center;gap:6px;margin:10px 0 2px;padding:8px 10px;border-radius:12px;background:#EEF8F1;font-size:13px}
.closest .lg-pin{width:18px;height:23px}
.steps{list-style:none;padding:0;margin:10px 0 6px;position:relative}
.step{display:flex;gap:10px;align-items:flex-start;padding:7px 0;border-bottom:1px solid #ecece9;font-size:14px}
.step:last-child{border-bottom:0}
.step .badge{flex:none;margin-top:2px;color:#fff}
.walk-ico{flex:none;width:22px;display:grid;place-items:center}
.live{color:var(--pin-green);font-size:12px;font-weight:600}
.shed-note{display:flex;align-items:center;gap:8px;margin-top:4px}
.shed-swatch{width:16px;height:12px;flex:none;border:1.5px dashed #3A7AEB;background:rgba(58,122,235,.12);border-radius:3px}
.leaflet-tooltip.tip{background:var(--pill);border:0;border-radius:999px;box-shadow:var(--shadow);font:600 12px Inter,system-ui,sans-serif;color:var(--ink);padding:4px 10px}
.leaflet-tooltip.tip:before{display:none}

.sheet.collapsed{max-height:178px;overflow:hidden}
.sheet.collapsed .grab{background:var(--pin-green)}
.grab{cursor:pointer;padding:0;height:5px;width:44px}
body.trip .credit{display:none}
.legs{display:inline-flex;align-items:center;gap:3px;vertical-align:middle;margin-left:6px}
.legs .badge{font-size:12px}
.chev{color:var(--muted);font-weight:700}
.go-btn.ghost{background:transparent;color:var(--pin-green);border:1.5px solid var(--pin-green)}

.live-dot.pulse{animation:pulse 2s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(46,173,94,.55)}70%{box-shadow:0 0 0 9px rgba(46,173,94,0)}100%{box-shadow:0 0 0 0 rgba(46,173,94,0)}}

/* Next-bus arrivals */
.arrivals{margin-top:6px;min-width:220px}
.arr{display:flex;align-items:center;gap:8px;padding:5px 0;border-top:1px solid #ecece9}
.arr:first-child{border-top:0}
.arr .badge{flex:none;color:#fff}
.arr-h{flex:1;min-width:0;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arr-t{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15}
.arr-t b{font-size:15px}
.arr-t small{font-size:10px;color:var(--muted)}
.is-live{color:var(--pin-green)!important;font-weight:600}
.arrivals.compact{min-width:0;margin-top:4px}
.arrivals.compact .arr{padding:3px 0;border:0}
.closest>div{flex:1;min-width:0}
.eta{margin-top:6px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.eta-pill{display:inline-block;padding:4px 10px;border-radius:999px;background:#fff;border:1.5px solid #d9dbd8;font-weight:600;font-size:13px}
.eta-pill.live{border-color:var(--pin-green);background:#EEF8F1;color:#1A7A40}
.skip-note{margin:4px 0 2px;padding:6px 8px;border-radius:10px;background:#FFF4E0;color:#7A4B00;font-size:12px;line-height:1.5}
.skip-note .badge{font-size:11px;padding:1px 5px}
/* live location: blue dot with white rim, pulsing halo, heading wedge, accuracy ring drawn by Leaflet */
.me{position:relative}
.me-dot{position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:var(--pin-blue);border:3px solid #fff;box-sizing:border-box;box-shadow:0 1px 4px rgba(0,0,0,.35);animation:mepulse 2s infinite}
.me-head{position:absolute;left:0;top:0;width:22px;height:22px;transform-origin:50% 50%}
.me-head::before{content:"";position:absolute;left:5px;top:-9px;border:6px solid transparent;border-bottom:12px solid rgba(58,122,235,.55);border-top:0}
@keyframes mepulse{0%{box-shadow:0 0 0 0 rgba(58,122,235,.5),0 1px 4px rgba(0,0,0,.35)}70%{box-shadow:0 0 0 12px rgba(58,122,235,0),0 1px 4px rgba(0,0,0,.35)}100%{box-shadow:0 0 0 0 rgba(58,122,235,0),0 1px 4px rgba(0,0,0,.35)}}
#locateBtn.on svg{fill:var(--pin-blue)}
#locateBtn.follow{background:var(--pin-blue)}
#locateBtn.follow svg{fill:#fff}