/* ---------- GPS route map ----------
   The pane only exists once a GPS session is loaded; js/map/route-map.js adds .has-gps to
   <body>, which reveals it and widens main by a column. */
body.has-gps main{grid-template-columns:1fr 1fr 320px}
#mapwrap{position:relative; display:none; min-width:0; border-left:1px solid var(--line); background:var(--bg1)}
body.has-gps #mapwrap{display:block}
#map{position:absolute; inset:0}
#map .mapboxgl-ctrl-logo{opacity:.6} #map .mapboxgl-ctrl-attrib{opacity:.7}
#gps-grp{display:none} body.has-gps #gps-grp{display:block}

/* base / satellite style switch and the route colour pickers */
.maptabs{position:absolute; top:10px; left:10px; z-index:5; display:flex; background:rgba(15,18,26,.9); border:1px solid var(--line2); border-radius:8px; overflow:hidden}
.maptabs button{background:transparent; color:var(--ink2); border:none; padding:6px 13px; font-size:12px; cursor:pointer; font-family:var(--font)}
.maptabs button.on{background:var(--bore); color:#04222b; font-weight:600}
.maptabs button:not(.on):hover{color:#fff}
.mapcolors{position:absolute; top:44px; left:10px; z-index:5; display:flex; flex-direction:column; gap:4px}
.mapcolors label{display:flex; align-items:center; gap:6px; background:rgba(15,18,26,.9); border:1px solid var(--line2); border-radius:7px; padding:3px 8px 3px 4px; font-size:11px; color:var(--ink2); cursor:pointer}
.mapcolors input[type=color]{width:20px; height:18px; border:none; background:none; padding:0; cursor:pointer}
#mapkey{position:absolute; bottom:30px; left:10px; z-index:5; background:rgba(15,18,26,.9); border:1px solid var(--line2); color:var(--ink2); border-radius:7px; padding:5px 9px; cursor:pointer; font-size:12px; font-family:var(--font)}
#mapkey:hover{color:#fff}

/* token prompt — shared by every map pane on the page (see js/map/token.js) */
.mapoverlay{position:absolute; inset:0; z-index:6; display:none; align-items:center; justify-content:center; background:rgba(11,13,18,.92); padding:20px}
.mapoverlay.on{display:flex}
.mo-box{max-width:340px; text-align:center; color:var(--ink)}
.mo-box b{font-size:15px} .mo-box p{color:var(--muted); font-size:12.5px; margin:8px 0 12px; line-height:1.5}
.mo-box code{color:var(--ink2); font-family:var(--mono)}
.mo-box input{width:100%; background:var(--panel2); border:1px solid var(--line2); color:var(--ink); border-radius:8px; padding:9px 11px; font-family:var(--mono); font-size:12px}
.mo-box>button{margin-top:10px; width:100%; background:var(--bore); color:#04222b; border:none; border-radius:8px; padding:9px; font-weight:600; cursor:pointer; font-family:var(--font)}
.mo-err{color:var(--warn); font-size:12px; margin-top:8px; min-height:14px}
.mo-link{color:var(--bore)}

@media (max-width:880px){
  #mapwrap{height:52vh}
  body.has-gps main{grid-template-columns:1fr; grid-template-rows:auto auto auto}
  body.has-gps #stage,body.has-gps #mapwrap{height:46vh}
}