:root{
  --bg:#fbfaf7;
  --panel:#ffffff;
  --line:rgba(0,0,0,.08);
  --text:#2f2f2f;
  --muted:#6c6c6c;
  --sun:#f5c542;
  --radius:18px;
  --shadow:0 8px 20px rgba(0,0,0,.08);
}

*{box-sizing:border-box}

html,body{
  height:100%;
  margin:0;
}

body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
}


body.modalOpen{
  position:fixed;
  left:0;
  right:0;
  width:100%;
  overflow:hidden;
  overscroll-behavior:none;
}

button{font:inherit}
img{display:block}

.app{
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
}

.topbar{
  position:sticky;
  top:0;
  z-index:20;
  padding:12px;
  background:linear-gradient(to bottom, rgba(251,250,247,.98), rgba(251,250,247,.92));
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:center;
}

.toggle{
  display:flex;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:999px;
  overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
}

.toggleBtn{
  flex:1;
  border:0;
  background:transparent;
  color:var(--muted);
  padding:10px 14px;
  font-weight:700;
}

.toggleBtn.isActive{
  background:rgba(245,197,66,.22);
  color:var(--text);
}

.btnPrimary{
  border:0;
  background:rgba(245,197,66,.95);
  color:#1c1c1c;
  font-weight:800;
  padding:10px 14px;
  border-radius:999px;
  box-shadow:0 6px 14px rgba(245,197,66,.25);
}

.weatherBar{
  margin:10px 12px 0;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 2px 10px rgba(0,0,0,.05);
  padding:10px 12px;
}

.weatherBar.sunny{
  background:linear-gradient(180deg,#fff7db,#fffdf4);
}

.weatherBar.cloudy{
  background:linear-gradient(180deg,#f4f4f4,#fcfcfc);
}

.weatherBar.rainy{
  background:linear-gradient(180deg,#eef5fb,#fbfdff);
}

.weatherBar.night-clear{
  background:linear-gradient(180deg,#eef1fb,#f8f9fe);
  border-color:rgba(64,80,120,.14);
}

.weatherBar.night-cloudy{
  background:linear-gradient(180deg,#eef0f5,#f7f8fb);
  border-color:rgba(60,68,84,.14);
}

.weatherBar.night-rainy{
  background:linear-gradient(180deg,#e8edf7,#f5f8fd);
  border-color:rgba(64,80,120,.16);
}

.weatherLeft{
  display:flex;
  gap:10px;
  align-items:center;
}

.weatherIcon{
  width:42px;
  height:42px;
  border-radius:14px;
  background:rgba(0,0,0,.04);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
}

.weatherBar.night-clear .weatherIcon,
.weatherBar.night-cloudy .weatherIcon,
.weatherBar.night-rainy .weatherIcon{
  background:rgba(80,92,128,.08);
}

.weatherTitle{
  font-size:12px;
  color:var(--muted);
  font-weight:800;
  letter-spacing:.2px;
}

.weatherLine{
  font-size:14px;
  font-weight:700;
}

.main{
  flex:1;
  padding:12px;
}

.view{
  display:none;
}

.view.isActive{
  display:block;
}

.rowWrap{
  margin-top:14px;
}

.rowHeader{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:baseline;
  padding:0 2px 8px;
}

.rowHeaderActions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.rowTitle{
  margin:0;
  font-size:16px;
}

.rowMeta{
  font-size:12px;
  color:var(--muted);
}

.hScroll{
  display:flex;
  gap:12px;
  overflow-x:auto;
  padding:2px 2px 12px;
  scroll-snap-type:x proximity;
  scroll-padding-inline:2px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}

.hScroll::-webkit-scrollbar{
  display:none;
}

.vList{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}

.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}

.cardSmall{
  min-width:248px;
  max-width:268px;
  flex:0 0 auto;
  scroll-snap-align:start;
}

.cardButton{
  border:0;
  background:transparent;
  padding:0;
  width:100%;
  text-align:left;
  display:block;
}

.cardImg{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  background:#ececec;
}

.cardBody{
  padding:12px;
}
.cardBadges{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin:0 0 8px;
}

.miniBadge,
.detailBadge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#faf9f4;
  color:#4a4a4a;
  font-size:11px;
  font-weight:800;
}

.rideLine{
  margin-top:8px;
  font-size:12px;
  color:var(--muted);
  font-weight:750;
}

.filterChip{
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--text);
  padding:8px 12px;
  border-radius:999px;
  font-weight:800;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
}

.filterChip.isActive{
  background:rgba(245,197,66,.22);
  border-color:rgba(245,197,66,.5);
}

.detailBadges{
  margin-top:10px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.detailTravel{
  margin-top:10px;
  font-size:13px;
  color:var(--muted);
  font-weight:750;
}


.cardTitle{
  margin:0;
  font-size:16px;
  line-height:1.15;
  font-weight:850;
  color:#2f2f2f;
}

.cardMeta{
  margin-top:8px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
}

.statusBlock{
  min-width:0;
  flex:1;
}

.metaRight{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
  flex:0 0 auto;
}

.statusTop{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:850;
  line-height:1;
  white-space:nowrap;
  color:#1c1c1c;
}

.statusLine{
  font-size:12px;
  color:var(--muted);
  font-weight:700;
  margin-top:2px;
}

.dist{
  font-size:12px;
  color:var(--muted);
  font-weight:700;
  white-space:nowrap;
}

.statusSunBright .statusTop{
  background:rgba(245,197,66,.95);
  box-shadow:0 4px 10px rgba(245,197,66,.18);
}

.statusSunMuted .statusTop{
  background:#d6b24a;
}

.statusSunRainy .statusTop,
.statusShade .statusTop,
.statusNone .statusTop{
  background:#d6d9de;
}

.isHidden{
  display:none !important;
}

.map{
  width:100%;
  min-height:68vh;
  min-height:68svh;
  border-radius:20px;
  overflow:hidden;
  box-shadow:var(--shadow);
  border:1px solid var(--line);
}

.modalOverlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.46);
  z-index:50;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:0;
  overscroll-behavior:contain;
  touch-action:none;
}

.modal{
  width:100%;
  max-width:700px;
  max-height:100vh;
  max-height:100svh;
  background:var(--bg);
  border-radius:24px 24px 0 0;
  overflow:auto;
  position:relative;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y pinch-zoom;
}

.modalContent{
  padding-bottom:20px;
}

.modalClose{
  position:sticky;
  top:12px;
  float:right;
  z-index:10;
  margin:12px 12px 0 0;
  width:42px;
  height:42px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.92);
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}

.heroImg{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  background:#ececec;
}

.detailBody{
  padding:14px 14px 0;
}

.detailTitle{
  margin:0;
  font-size:24px;
  line-height:1.05;
  color:#2f2f2f;
}

.detailAddress{
  margin-top:8px;
  font-size:14px;
  color:var(--muted);
  font-weight:700;
}

.detailNotes{
  margin-top:10px;
  font-size:14px;
  line-height:1.35;
  color:#4a4a4a;
}

.detailActions{
  margin-top:12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.pillBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--text);
  padding:10px 14px;
  border-radius:999px;
  font-weight:800;
  text-decoration:none;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
}

.spotList{
  padding:14px;
  display:grid;
  gap:12px;
}

.spotCard{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 6px 16px rgba(0,0,0,.06);
  padding:14px;
}

.spotHead{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
}

.spotKicker{
  font-size:12px;
  color:var(--muted);
  font-weight:850;
  letter-spacing:.25px;
  text-transform:uppercase;
}

.spotName{
  margin-top:4px;
  font-size:18px;
  font-weight:850;
  line-height:1.12;
}

.spotBadge{
  font-size:11px;
  font-weight:850;
  padding:6px 10px;
  border-radius:999px;
  white-space:nowrap;
  border:1px solid var(--line);
  background:#fafafa;
  color:#666;
}

.spotStatus{
  margin-top:10px;
  font-size:15px;
  font-weight:850;
}

.spotSub{
  margin-top:4px;
  font-size:13px;
  color:var(--muted);
  font-weight:750;
}

.timelineWrap{
  margin-top:14px;
}

.timelineLabels{
  display:flex;
  justify-content:space-between;
  font-size:12px;
  color:var(--muted);
  font-weight:700;
  margin-bottom:6px;
}

.timeline{
  position:relative;
  height:14px;
  border-radius:999px;
  background:#ececec;
  overflow:hidden;
}

.timelineSun{
  position:absolute;
  top:0;
  bottom:0;
  background:linear-gradient(90deg,#f4d77d,#f5c542);
  border-radius:999px;
}

.timelineNow{
  position:absolute;
  top:-3px;
  width:12px;
  height:20px;
  transform:translateX(-50%);
}

.timelineNow::before{
  content:"";
  position:absolute;
  left:4px;
  top:0;
  width:4px;
  height:20px;
  border-radius:999px;
  background:#3f3f3f;
}

.timelineNowLabel{
  margin-top:6px;
  font-size:12px;
  color:var(--muted);
  font-weight:750;
}

.spotWindow{
  margin-top:10px;
  font-size:13px;
  font-weight:800;
  color:#4a4a4a;
}

.emptyState{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px;
  color:var(--muted);
}

@media (min-width:720px){
  .main{
    max-width:980px;
    width:100%;
    margin:0 auto;
    padding:16px;
  }

  .topbar{
    grid-template-columns:220px auto;
  }

  .vList{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}


/* Header reset: remove logo/title clutter and keep controls only */
.topbar .brand,
.topbar .branding,
.topbar .logo,
.topbar .logoWrap,
.topbar .logoMark,
.topbar .logoBadge,
.topbar .title,
.topbar .appTitle,
.topbar .headerTitle,
.topbar .headerText,
.topbar .brandText,
.topbar .brandLockup,
.topbar img,
.topbar svg{
  display:none !important;
}

.topbar .left,
.topbar .leftCol,
.topbar .topbarLeft,
.topbar .brandCol,
.topbar .headerLeft{
  display:contents;
}

.modal{
  position:relative;
}

.modalClose{
  position:absolute;
  top:12px;
  right:12px;
  float:none;
  margin:0;
}

.detailGalleryWrap,
.detailGallerySingle{
  position:relative;
  margin-bottom:8px;
}

.detailGallery{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}

.detailGallery::-webkit-scrollbar{
  display:none;
}

.detailSlide{
  position:relative;
  flex:0 0 100%;
  width:100%;
  margin:0;
  scroll-snap-align:start;
}

.detailGallery .heroImg,
.detailGallerySingle .heroImg{
  width:100%;
  min-width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  display:block;
}

.detailGalleryHint{
  position:absolute;
  left:12px;
  bottom:12px;
  background:rgba(0,0,0,.58);
  color:#fff;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  line-height:1;
}

.detailGalleryDots{
  display:flex;
  justify-content:center;
  gap:7px;
  padding:10px 0 2px;
}

.detailDot{
  width:7px;
  height:7px;
  border-radius:999px;
  background:rgba(0,0,0,.18);
}

.detailDot.isActive{
  background:rgba(0,0,0,.44);
}


.modalContent{position:relative;}
.modalClose{position:absolute;top:12px;right:12px;z-index:20;}
.detailGalleryWrap{position:relative;}
.detailGalleryDots{position:relative;z-index:2;}
.detailDot{cursor:pointer;transition:background .18s ease, transform .18s ease;}
.detailDot.isActive{transform:scale(1.12);}



html.modalOpen,
body.modalOpen{
  overflow:hidden;
  height:100%;
}

body.modalOpen{
  position:fixed;
  left:0;
  right:0;
  width:100%;
}

a,
button,
.card,
.cardButton,
.chip,
.segBtn,
.detailDot,
.modalClose{
  touch-action:manipulation;
}

.modalOverlay{
  overscroll-behavior:contain;
}

.modal{
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}


.routeCard{
  margin:0 14px 14px;
  padding:14px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 6px 16px rgba(0,0,0,.06);
}

.routeCardHead{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}

.routeCardKicker{
  font-size:12px;
  color:var(--muted);
  font-weight:850;
  letter-spacing:.25px;
  text-transform:uppercase;
}

.routeCardTitle{
  margin:4px 0 0;
  font-size:20px;
  line-height:1.12;
  color:#2f2f2f;
}

.routeCardBadge{
  font-size:11px;
  font-weight:850;
  padding:6px 10px;
  border-radius:999px;
  white-space:nowrap;
  border:1px solid var(--line);
  background:#fff7db;
  color:#5a4a14;
}

.routeMetaRow{
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#faf9f4;
  color:#4d4d4d;
  font-size:13px;
  line-height:1.3;
}

.routeMetaItem{
  font-weight:700;
}

.routeMetaStrong{
  color:#2f2f2f;
  font-weight:850;
}

.routeMetaSeparator{
  color:#9a8f6a;
  font-weight:850;
}

.routeNote{
  margin-top:12px;
  font-size:13px;
  color:var(--muted);
  line-height:1.4;
}

.routeMap{
  margin-top:12px;
  height:240px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--line);
  background:#ececec;
}

.routeMapActions{
  margin-top:12px;
  display:flex;
  justify-content:flex-start;
}

.routeMapOverlay{
  position:fixed;
  inset:0;
  z-index:90;
  background:rgba(0,0,0,.52);
  display:flex;
  align-items:stretch;
  justify-content:center;
  padding:12px;
}

.routeMapOverlayPanel{
  position:relative;
  width:100%;
  max-width:860px;
  height:100%;
  max-height:100svh;
  background:var(--bg);
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.22);
}

.routeMapOverlayHead{
  position:absolute;
  top:14px;
  left:14px;
  right:66px;
  z-index:2;
  pointer-events:none;
}

.routeMapOverlayKicker{
  font-size:12px;
  color:#666;
  font-weight:850;
  letter-spacing:.25px;
  text-transform:uppercase;
}

.routeMapOverlayTitle{
  margin-top:4px;
  font-size:18px;
  font-weight:850;
  line-height:1.12;
  color:#2f2f2f;
}

.routeMapOverlayMap{
  width:100%;
  height:100%;
  background:#ececec;
}

.routeMapClose{
  position:absolute;
  top:14px;
  right:14px;
  z-index:3;
  width:44px;
  height:44px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.94);
  color:#2f2f2f;
  font-size:28px;
  line-height:1;
  box-shadow:0 4px 14px rgba(0,0,0,.12);
}

@media (max-width:560px){
  .routeMapOverlay{
    padding:0;
  }

  .routeMapOverlayPanel{
    border-radius:0;
    max-width:none;
  }

  .routeMapOverlayHead{
    top:12px;
    left:12px;
    right:60px;
  }

  .routeMapClose{
    top:12px;
    right:12px;
  }

  .routeMetaRow{
    gap:5px;
    padding:9px 11px;
    font-size:12px;
  }
}


/* Expanded route map usability tweaks */
.routeMapOverlay{
  z-index:9999;
}

.routeMapOverlayPanel{
  isolation:isolate;
}

.routeMapOverlayHead{
  top:max(14px, calc(env(safe-area-inset-top, 0px) + 10px));
  left:14px;
  right:92px;
  z-index:1200;
}

.routeMapClose{
  position:absolute;
  top:max(14px, calc(env(safe-area-inset-top, 0px) + 10px));
  right:14px;
  z-index:1300;
  width:56px;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(0,0,0,.08);
  border-radius:999px;
  background:rgba(255,255,255,.98);
  color:#222;
  font-size:32px;
  font-weight:600;
  line-height:1;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}

.routeMapClose:active{
  transform:scale(.98);
}

@media (max-width:560px){
  .routeMapOverlayHead{
    top:max(12px, calc(env(safe-area-inset-top, 0px) + 10px));
    left:12px;
    right:84px;
  }

  .routeMapClose{
    top:max(12px, calc(env(safe-area-inset-top, 0px) + 10px));
    right:12px;
    width:60px;
    height:60px;
    font-size:34px;
  }
}


.routeNavBanner{
  position:absolute;
  left:12px;
  right:12px;
  bottom:max(12px, calc(env(safe-area-inset-bottom, 0px) + 12px));
  z-index:1250;
  padding:11px 13px;
  border-radius:16px;
  border:1px solid rgba(166,132,28,.42);
  background:rgba(223, 187, 73, .96);
  box-shadow:0 10px 24px rgba(0,0,0,.14);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  pointer-events:none;
}

.routeNavBanner.isOnRoute{
  background:rgba(223, 187, 73, .96);
  border-color:rgba(166,132,28,.42);
}

.routeNavBanner.isTurn{
  background:rgba(228, 194, 89, .97);
  border-color:rgba(166,132,28,.5);
}

.routeNavBanner.isOffRoute{
  background:rgba(255,242,239,.98);
  border-color:rgba(224,122,95,.3);
}

.routeNavBanner.isArrive{
  background:rgba(239,248,240,.98);
  border-color:rgba(96,171,111,.28);
}

.routeNavPrimary{
  font-size:16px;
  font-weight:850;
  line-height:1.15;
  color:#2f2f2f;
}

.routeNavSecondary{
  margin-top:4px;
  font-size:12px;
  line-height:1.3;
  color:#5f5f5f;
  font-weight:750;
}

@media (max-width:560px){
  .routeNavBanner{
    left:12px;
    right:12px;
    bottom:max(12px, calc(env(safe-area-inset-bottom, 0px) + 12px));
    padding:10px 12px;
  }

  .routeNavPrimary{
    font-size:15px;
  }

  .routeNavSecondary{
    font-size:11px;
  }
}