:root {
  --bg:#1a1a1a; --panel:#242424; --panel2:#2e2e2e; --line:#3a3a3a;
  --text:#ececec; --muted:#9aa0a6; --accent:#e8b923;
  --rel5:#e8b923; --rel4:#4a9eff; --rel3:#5aa469; --rel-lo:#7a7f86; --visited:#34c759;
  --safe-top:env(safe-area-inset-top,0px); --safe-bottom:env(safe-area-inset-bottom,0px);
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; height:100%; overflow:hidden; }
body { background:var(--bg); color:var(--text); font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; }
#app { display:flex; flex-direction:column; height:100%; }

/* ---- header ---- */
header { padding:calc(8px + var(--safe-top)) 10px 8px; background:var(--panel); border-bottom:1px solid var(--line); z-index:600; }
.row { display:flex; align-items:center; gap:6px; }
.title { font-weight:700; font-size:16px; color:var(--accent); }
.count { font-size:11.5px; color:var(--muted); white-space:nowrap; }
.btn { background:var(--panel2); color:var(--text); border:1px solid var(--line); border-radius:999px;
  padding:6px 10px; font-size:12.5px; font-weight:600; cursor:pointer; white-space:nowrap; }
.btn.active { background:var(--accent); color:#1a1a1a; border-color:var(--accent); }
.btn.icon { padding:6px 8px; font-size:15px; line-height:1; display:inline-flex; align-items:center; justify-content:center; }
.btn.icon svg { display:block; }
.searchrow { display:none; margin-top:8px; }   /* collapsed by default; toggled open by the 🔍 button to save vertical space */
.searchrow.open { display:flex; }
input[type=search] { flex:1; background:var(--panel2); color:var(--text); border:1px solid var(--line);
  border-radius:8px; padding:7px 10px; font-size:13px; }
.chips { display:flex; gap:6px; overflow-x:auto; padding-top:8px; scrollbar-width:none; }
.chips::-webkit-scrollbar { display:none; }
.chip { flex:0 0 auto; background:var(--panel2); color:var(--text); border:1px solid var(--line);
  border-radius:999px; padding:5px 12px; font-size:12.5px; font-weight:600; cursor:pointer; white-space:nowrap; }
.chip.on { background:var(--accent); color:#1a1a1a; border-color:var(--accent); }
#routeChip { margin-left:auto; }
#routeChip.on { background:#ff5a5f; color:#fff; border-color:#ff5a5f; }
/* active-route pill in the top bar: flexes to fill between the title and the icon buttons; doubles as the Route-sheet opener */
.routebar { display:flex; flex:1 1 auto; min-width:0; align-items:center; justify-content:center; gap:5px; background:var(--panel2); color:var(--text);
  border:1px solid var(--accent); border-radius:999px; padding:6px 12px; font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap; }
.routebar .rb-name { color:var(--accent); min-width:0; max-width:60vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.routebar .rb-meta { color:var(--muted); flex:0 0 auto; }
.routebar.active { border-color:#ff5a5f; }

/* ---- main / map / list ---- */
main { flex:1; position:relative; min-height:0; }
#map { position:absolute; inset:0; background:#303030; }
#list { position:absolute; inset:0; overflow-y:auto; display:none; padding:0 0 calc(8px + var(--safe-bottom)); }
body.view-list #map { display:none; }
body.view-list #list { display:block; }
.leaflet-container { background:#303030; font:inherit; }

.lhead { position:sticky; top:0; background:var(--panel); padding:9px 12px; border-bottom:1px solid var(--line);
  color:var(--muted); font-size:12px; font-weight:600; z-index:2; }
.card { display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid #2c2c2c;
  border-left:4px solid var(--rel-lo); cursor:pointer; }
.card.r5 { border-left-color:var(--rel5); } .card.r4 { border-left-color:var(--rel4); } .card.r3 { border-left-color:var(--rel3); }
.card.visited { opacity:.6; }
.cmain { flex:1; min-width:0; }
.cn { font-weight:700; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cm { color:var(--muted); font-size:12px; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.star { flex:0 0 auto; border:none; background:none; font-size:21px; color:var(--accent); cursor:pointer; line-height:1; padding:0 3px; }
.star:not(.on) { color:#555; }
.rtflag { flex:0 0 auto; border:none; background:none; font-size:18px; color:#ff5a5f; cursor:pointer; line-height:1; padding:0 2px; }
.rtflag:not(.on) { color:#555; }

/* ---- sheets (place + filters) ---- */
.sheet { position:absolute; left:0; right:0; bottom:0; z-index:700; background:var(--panel);
  border-top:1px solid var(--line); border-radius:16px 16px 0 0; transform:translateY(110%); transition:transform .22s ease;
  max-height:82%; overflow-y:auto; padding:6px 16px calc(18px + var(--safe-bottom)); box-shadow:0 -8px 24px rgba(0,0,0,.45); }
.sheet.open { transform:translateY(0); }
.grab { width:38px; height:4px; background:var(--line); border-radius:2px; margin:8px auto 10px; }

/* place detail */
#sheet .nm { font-size:19px; font-weight:700; }
#sheet .sub { color:var(--muted); font-size:13px; margin:2px 0 8px; }
.badges { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; }
.badge { background:var(--panel2); border:1px solid var(--line); border-radius:8px; padding:3px 8px; font-size:12px; }
.badge.rel { font-weight:700; color:#1a1a1a; }
.badge.haz { background:#3a2a1a; border-color:#6b4a20; color:#ffc98a; }
.badge.appr { background:#2a2a3a; border-color:#44486b; color:#aab; }
.badge.prov { color:var(--muted); }
#sheet .desc { font-size:14px; line-height:1.5; margin:6px 0 12px; }
#sheet .fits { font-size:12.5px; color:var(--muted); margin-bottom:10px; }
.src { font-size:11.5px; color:#7f868d; margin-bottom:10px; }
.actions { display:flex; gap:8px; position:sticky; bottom:0; background:var(--panel); padding:8px 0 0; }
.actions a, .actions button { flex:1; text-align:center; text-decoration:none; border:none; cursor:pointer;
  border-radius:10px; padding:12px 6px; font-size:14px; font-weight:700; }
.act-nav { background:var(--accent); color:#1a1a1a; }
.act-rt { background:var(--panel2); color:var(--text); border:1px solid var(--line) !important; }
.act-rt.on { background:#ff5a5f; color:#fff; }
.act-wish { background:var(--panel2); color:var(--text); border:1px solid var(--line) !important; }
.act-wish.on { background:var(--accent); color:#1a1a1a; }
.subact { display:flex; gap:8px; margin-top:8px; }
.subact button { flex:1; background:var(--panel2); color:var(--muted); border:1px solid var(--line); border-radius:9px; padding:9px; font-size:12.5px; font-weight:600; cursor:pointer; }
.subact button.on { background:var(--visited); color:#06310f; border-color:var(--visited); }

/* filters sheet */
.fsec { padding:12px 0 4px; border-top:1px solid var(--line); }
.fsec:first-of-type { border-top:none; }
.fsec h4 { margin:0 0 8px; font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted);
  display:flex; justify-content:space-between; align-items:center; }
.fsec h4 a { font-size:11px; color:var(--accent); cursor:pointer; text-transform:none; letter-spacing:0; }
.gh { font-size:12.5px; font-weight:700; color:var(--text); margin:8px 0 4px; }
.fchips { display:flex; flex-wrap:wrap; gap:6px; }
.fchip { display:flex; align-items:center; gap:5px; background:var(--panel2); border:1px solid var(--line);
  border-radius:999px; padding:5px 11px; font-size:12.5px; cursor:pointer; }
.fchip.off { opacity:.4; }
.fchip .ci { font-size:13px; }
.fchip .cc { color:var(--muted); font-size:11px; }
.frow { display:flex; align-items:center; gap:9px; padding:7px 2px; cursor:pointer; }
.frow input { width:18px; height:18px; }
.slider { display:flex; align-items:center; gap:10px; margin:6px 2px; }
.slider input[type=range] { flex:1; }
.slider .v { width:54px; text-align:right; color:var(--text); font-variant-numeric:tabular-nums; font-size:12.5px; }
.rbtns { display:flex; flex-wrap:wrap; gap:7px; margin:8px 0 2px; }
.rbtn { padding:8px 12px; border:1px solid var(--line); border-radius:9px; background:var(--panel2); color:var(--text); cursor:pointer; font-size:12.5px; font-weight:600; }
.rbtn.pri { border-color:#ff5a5f; color:#ff7a7f; }
.rbtn.on { background:#ff5a5f; border-color:#ff5a5f; color:#fff; }
.rstat { margin:7px 2px 0; color:var(--muted); font-size:12px; min-height:15px; }

#toast { position:absolute; bottom:18px; left:50%; transform:translateX(-50%); background:#000c; color:#fff;
  padding:9px 15px; border-radius:999px; font-size:13px; z-index:800; opacity:0; transition:opacity .2s; pointer-events:none; max-width:84%; text-align:center; }
#toast.show { opacity:1; }

/* ---- wishlist chip variant ---- */
.chip-wish { margin-left:auto; }
.chip-wish.on { background:#c0392b; color:#fff; border-color:#c0392b; }

/* ---- waypoint list ---- */
.wp-list { display:flex; flex-direction:column; gap:3px; margin-top:6px; }
.wprow { display:flex; align-items:center; gap:7px; padding:7px 6px; background:var(--panel2); border:1px solid var(--line); border-radius:9px; }
.wp-num { flex:0 0 auto; width:20px; height:20px; border-radius:50%; background:var(--accent); color:#1a1a1a; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.wp-num:active { transform:scale(.88); }
.wp-name { flex:1; min-width:0; font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wp-mi { flex:0 0 auto; font-size:11px; color:var(--muted); white-space:nowrap; }
.wp-btns { display:flex; gap:3px; flex:0 0 auto; }
.wp-btn { border:1px solid var(--line); background:var(--panel); color:var(--text); border-radius:6px; width:26px; height:26px; font-size:13px; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; line-height:1; }
.wp-btn.wp-rm { color:#ff7a7f; border-color:#ff5a5f44; }
.wp-btn-ph { width:26px; height:26px; display:inline-block; }
.wp-btn.wp-lock { font-size:12px; filter:grayscale(1); opacity:.32; }   /* dim when unlocked, bright when pinned */
.wp-btn.wp-lock.on { filter:none; opacity:1; border-color:var(--accent); }
.wprow.locked { border-color:var(--accent); background:rgba(232,185,35,.08); }
.wp-empty { color:var(--muted); font-size:12.5px; padding:10px 2px; }

/* ---- route picker ---- */
.rp-sec { padding-bottom:8px; }
.rp-active { display:flex; flex-direction:column; gap:7px; margin-top:6px; }
.rp-nameinput { background:var(--panel2); color:var(--text); border:1px solid var(--line); border-radius:8px; padding:8px 10px; font-size:14px; font-weight:600; width:100%; }
.rp-nameinput:focus { outline:none; border-color:var(--accent); }
.rp-ops { display:flex; gap:6px; }
.rp-ops .rbtn { flex:1; text-align:center; }
.rp-del { color:#ff7a7f !important; border-color:#ff5a5f44 !important; }
.rp-list { margin-top:8px; display:flex; flex-direction:column; gap:3px; }
.rprow { display:flex; align-items:center; gap:8px; padding:8px 10px; background:var(--panel2); border:1px solid var(--line); border-radius:9px; cursor:pointer; }
.rprow.active { border-color:var(--accent); background:#2a2518; }
.rprow:not(.active):hover { background:var(--panel); }
.rpname { flex:1; font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rpcount { font-size:11px; color:var(--muted); white-space:nowrap; }
.rpempty { color:var(--muted); font-size:12px; padding:4px 2px; }

/* cluster bubbles tuned for the dark basemap */
.marker-cluster-small div, .marker-cluster-medium div, .marker-cluster-large div { color:#1a1a1a; font-weight:700; }