/* The maps: the drawn one and Google's, their pins, the locate button and the
   permission card. Moved out of app.css when the tripwire said split, which is
   what the tripwire is for. Same tokens, same rules, loaded right after it. */

  .gpin{width:44px;height:44px;border-radius:50%;background:var(--primary);display:grid;place-items:center;
    font-size:20px;border:3px solid var(--white);box-shadow:0 4px 12px rgba(24,18,38,.35);cursor:pointer}
  .gyou{width:16px;height:16px;border-radius:50%;background:var(--ink);border:3px solid var(--white);
    box-shadow:0 0 0 9px rgba(24,18,38,.12)}
  .mapfull svg{display:block;width:100%;height:100%}
  .locate{position:absolute;top:14px;right:14px;z-index:6;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
    background:var(--white);color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:var(--card)}
  .locate svg,.back svg{display:block}
  .locate:active{transform:scale(.94)}
  .locate.busy{color:var(--ink-soft)}
  .locask{position:absolute;left:12px;right:12px;bottom:12px;z-index:7;background:var(--surface);
    border:1px solid var(--line);border-radius:var(--r-card);padding:16px;text-align:center;box-shadow:var(--card)}
  .hasnav .locask{bottom:92px}
  .locask b{display:block;font-family:var(--disp);font-size:16px;color:var(--ink)}
  .locask .btn{margin-top:12px}
  .locask .linkbtn{margin-top:10px}
  .mapcard{position:absolute;left:12px;right:12px;bottom:12px;z-index:6;
    transform:translateY(calc(100% + 24px));transition:transform .3s cubic-bezier(.2,.8,.2,1)}
  .mapcard.on{transform:none}
  .mapcard .ev{margin:0}
  .mpin{cursor:pointer}
  .mpin circle.h{fill:var(--primary)}
  .mpin text{font-size:4px;text-anchor:middle;dominant-baseline:central}
  .mlabel{font-family:var(--mono);font-size:2.5px;fill:var(--map-label);letter-spacing:.06em;text-anchor:middle}
  .mhood{fill:var(--map-dot)}
  .discmap{flex:1 1 auto;position:relative;min-height:0;margin-top:10px;border-top:1px solid var(--line)}
  .mapfull{position:absolute;inset:0;background:var(--map-land)}

/* the event page's little map: the area before booking, the pin after */
#dArea{height:150px;border-radius:var(--r-img);overflow:hidden;background:var(--bg-2);margin:2px 0 0}
#dAreaNote{margin:6px 2px 0}

/* the map's one When tab, standing in the where-line's slot: same flex,
   so the List|Map switch never moves between modes */
.mapwhen{flex:1 1 auto;min-width:0;display:inline-flex;align-items:center;gap:6px;
  border:0;background:none;padding:0;font-family:var(--body);font-size:14.5px;font-weight:700;
  color:var(--ink);cursor:pointer;white-space:nowrap}