/* ===== MAP — Leaflet map controls, labels, and responsive rules ===== */
/* ============ MAP CONTROLS (combined menu) / LABELS ============ */
#mapCtl{position:fixed;z-index:17;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(64px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:10px;align-items:flex-end}
#zoomCtl{position:fixed;z-index:17;left:calc(16px + env(safe-area-inset-left,0px));bottom:calc(64px + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;background:var(--panel);backdrop-filter:blur(12px);
  border:1px solid var(--panel-border);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
#zoomCtl button{width:44px;height:44px;font-size:20px;font-weight:700;color:var(--ink);display:flex;align-items:center;justify-content:center}
#zoomCtl button:first-child{border-bottom:1.5px solid var(--sep)}
#zoomCtl button:hover{background:var(--accent-soft)}
#tagsFab{display:flex;border-top:1.5px solid var(--sep)}
#tagsFab.on{background:var(--accent-soft);color:var(--accent)}
#fabRow{display:flex;align-items:center;gap:10px}
#pinFab{width:44px;height:44px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  background:var(--panel);backdrop-filter:blur(12px);border:1px solid var(--panel-border);box-shadow:var(--shadow);color:var(--ink)}
#pinFab:hover{border-color:var(--accent)}
#pinFab.on{background:var(--teal);color:#06231e;border-color:transparent}
#pinFab .ic{width:20px;height:20px}
#routeTip{position:fixed;z-index:26;display:none;pointer-events:none;transform:translate(-50%,-135%);
  background:#fff;color:#1a2233;border-radius:9px;box-shadow:0 5px 18px rgba(0,0,0,.28);
  padding:7px 11px;font-size:12.5px;font-weight:700;white-space:nowrap;line-height:1.35}
#routeTip small{display:block;color:#697588;font-weight:500;font-size:11px}
.route-editing{cursor:grab}
.route-editing:active{cursor:grabbing}
.fab{width:54px;height:54px;border-radius:50%;background:var(--accent);color:#241a05;font-size:27px;font-weight:800;
  display:flex;align-items:center;justify-content:center;box-shadow:0 10px 28px rgba(240,178,74,.4),var(--shadow);
  transition:transform .15s;padding-bottom:3px}
.fab:hover{transform:scale(1.07)}
.fab.open{transform:rotate(45deg)}
#addWrap{position:relative}
#addMenu{position:absolute;right:0;bottom:calc(100% + 10px);width:200px;display:none;flex-direction:column;
  background:var(--panel-solid);border:1px solid var(--panel-border);border-radius:14px;overflow:hidden;
  box-shadow:var(--shadow);z-index:19}
#addMenu.open{display:flex}
#addMenu button{display:flex;align-items:center;gap:10px;height:46px;padding:0 15px;font-size:13px;font-weight:700;
  color:var(--ink);text-align:left;border-bottom:1.5px solid var(--sep)}
#addMenu button:last-child{border-bottom:none}
#addMenu button:hover{background:var(--accent-soft)}
#ctlMenu{display:flex;flex-direction:column;width:176px;background:var(--panel);backdrop-filter:blur(12px);
  border:1px solid var(--panel-border);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.ctlRow{display:flex;gap:9px;align-items:center;width:100%;height:44px;padding:0 14px;
  font-size:12.5px;font-weight:700;letter-spacing:.03em;color:var(--muted);text-align:left;
  border-bottom:1.5px solid var(--sep)}
.ctlRow:hover{color:var(--ink);background:var(--accent-soft)}
.ctlRow.on{background:var(--accent);color:#241a05}
.ctlRow.on:hover{background:var(--accent);color:#241a05}
#layerCtl,#baseCtl{display:flex;flex-direction:column}
#baseCtl{display:none}
.mapmode #baseCtl{display:flex}
#layerCtl .ctlRow:last-child,#baseCtl .ctlRow:last-child{border-bottom:none}
#labels{position:fixed;inset:0;z-index:12;pointer-events:none;overflow:hidden}
.clabel{position:absolute;transform:translate(-50%,-50%);font-family:var(--disp);font-size:10px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink);opacity:.55;white-space:nowrap;
  text-shadow:0 0 6px var(--bg),0 0 3px var(--bg)}
.dlabel{position:absolute;transform:translate(10px,-50%);display:flex;align-items:center;gap:6px;
  background:var(--panel);border:1px solid var(--panel-border);backdrop-filter:blur(8px);
  padding:3px 9px 3px 7px;border-radius:999px;font-size:11.5px;font-weight:600;white-space:nowrap;box-shadow:0 4px 14px rgba(2,5,18,.35)}
.dlabel .dot{width:7px;height:7px;border-radius:50%}

.hbtn.active{background:var(--accent);color:#241a05;border-color:transparent}
#layersMenu{position:absolute;top:calc(100% + 8px);right:0;width:250px;background:var(--panel-solid);
  border:1px solid var(--panel-border);border-radius:14px;box-shadow:var(--shadow);padding:13px;display:none;z-index:30}
#layersMenu.open{display:block}
.lyrow{display:flex;align-items:center;gap:9px;font-size:13.5px;padding:6px 2px;cursor:pointer}
.lyrow input{width:auto;accent-color:var(--accent)}
#addModeBanner{position:fixed;z-index:17;top:66px;left:50%;transform:translateX(-50%);
  background:var(--accent);color:#241a05;font-size:12.5px;font-weight:700;border-radius:999px;
  padding:7px 16px;display:none;box-shadow:var(--shadow)}
/* ============ RESPONSIVE ============ */
@media (max-width:760px){
  /* keep the status-bar / notch clearance — a bare `padding:10px` here was
     wiping the safe-area padding, putting the brand under the phone's clock */
  header{flex-wrap:wrap;gap:8px;
    padding:calc(10px + env(safe-area-inset-top,0px)) calc(10px + env(safe-area-inset-right,0px)) 10px calc(10px + env(safe-area-inset-left,0px))}
  .searchwrap{order:3;flex-basis:100%;max-width:none;margin-left:0}
  .brand span{display:none}
  .hbtn .txt{display:none}
  .hbtn{padding:9px 11px}
  #detail{width:100%;padding:calc(8px + env(safe-area-inset-top,0px)) 8px calc(8px + env(safe-area-inset-bottom,0px))}
  #tourPanel{width:100%;padding:calc(8px + env(safe-area-inset-top,0px)) 8px calc(8px + env(safe-area-inset-bottom,0px))}
  #drawer{left:8px;right:8px;width:auto;top:calc(116px + env(safe-area-inset-top,0px))}
  #drawer .drawer-body{max-height:calc(100vh - 330px)}
  #chips{padding:0 8px;bottom:calc(10px + env(safe-area-inset-bottom,0px))}
  /* On phones the always-on tag bar covered the map; hide it behind the
     tags button under the zoom controls, and show it as a compact panel. */
  #tagsFab{display:flex}
  #chips{display:none}
  body.tags-open #chips{
    display:flex;flex-wrap:wrap;justify-content:flex-start;pointer-events:auto;
    left:calc(16px + env(safe-area-inset-left,0px));right:auto;
    bottom:calc(120px + env(safe-area-inset-bottom,0px));
    width:auto;max-width:min(78vw,340px);max-height:52vh;overflow:auto;
    padding:10px;gap:6px;background:var(--panel);border:1px solid var(--panel-border);
    border-radius:14px;backdrop-filter:blur(12px);box-shadow:0 12px 40px rgba(2,5,18,.5)}
  #cityCard{left:8px;right:8px;width:auto;bottom:56px}
}