/* GroupiApp - the map's context menu (map-context-menu.js): «צור פעילות חדשה במיקום זה».

   Only tokens from style.css. The look is the site's own floating menu (.acct-menu in style.css): the raised
   float surface, a hairline border, radius 12, the float elevation, 44px rows. The ONE primary row is the
   site's primary action - an ink fill (--brand on --brand-ink, 17:1 in light; the yellow-on-soot pair in
   dark) - exactly like .btn. No hue of its own: the yellow ground (--signal) stays the panel's header.

   PHYSICAL left/top on .gm-ctx are intentional and the only ones: the menu is position:fixed at a VIEWPORT
   point (clientX / clientY of the press) and map-context-menu.js measures it and clamps it on screen.
   Everything inside uses logical properties and follows the page direction (dir is set on the menu). */

.gm-ctx{
  position:fixed; z-index:2000; box-sizing:border-box;
  inline-size:max-content; min-inline-size:240px; max-inline-size:min(320px, calc(100vw - 16px));
  padding:6px; margin:0;
  background:var(--surface-float); color:var(--ink);
  border:1px solid var(--line-strong); border-radius:var(--radius-md, 12px);
  box-shadow:var(--edge-hi), var(--elev-float);
  font-family:var(--font-body, inherit); font-size:var(--t-meta); line-height:1.35;
  animation:gm-ctx-in 140ms var(--ease-out, ease-out) both;
}
@keyframes gm-ctx-in{ from{ opacity:0; transform:scale(.94) } to{ opacity:1; transform:none } }

.gm-ctx:focus{ outline:none }
.gm-ctx-item{
  display:flex; align-items:center; gap:10px; inline-size:100%; box-sizing:border-box;
  min-block-size:44px; padding:10px 12px; margin:0;
  border:0; border-radius:8px; background:none; color:inherit;
  font:inherit; font-weight:600; text-align:start; cursor:pointer;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  transition:background-color var(--dur-press, 120ms) var(--ease-out, ease-out);
}
.gm-ctx-item + .gm-ctx-item{ margin-block-start:2px }
.gm-ctx-ic-wrap{ display:inline-flex; flex:none }
.gm-ctx-ic{ inline-size:20px; block-size:20px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round }
.gm-ctx-label{ min-inline-size:0; overflow-wrap:anywhere }

@media (hover:hover) and (pointer:fine){
  .gm-ctx-item:hover{ background:var(--band) }
  .gm-ctx-primary:hover{ background:var(--brand); opacity:.88 }
}
.gm-ctx-item:focus-visible{ outline:3px solid var(--focus-ring, var(--accent)); outline-offset:-3px }
.gm-ctx-item:active{ background:var(--band) }

.gm-ctx-primary{ background:var(--brand); color:var(--brand-ink) }
.gm-ctx-primary:active{ background:var(--brand); opacity:.88 }

/* the "outside Israel" message: a row you can focus and read, with nothing to press */
.gm-ctx-note{ cursor:default; font-weight:500; color:var(--ink-2) }
.gm-ctx-note:hover, .gm-ctx-note:active{ background:none }

/* the pin that marks the pressed point while the menu is open (same drawing as the create page's picker) */
.gm-ctx-pin{ background:none; border:0; pointer-events:none }
.gm-ctx-pin svg{ display:block; overflow:visible; animation:gm-ctx-drop 160ms var(--ease-out, ease-out) both }
.gm-ctx-pin-body{ fill:var(--ink); stroke:var(--bg-elev); stroke-width:2; stroke-linejoin:round }
.gm-ctx-pin-dot{ fill:var(--bg-elev) }
.gm-ctx-pin-shadow{ fill:rgba(0,0,0,.28) }
@keyframes gm-ctx-drop{ from{ opacity:0; transform:translateY(-10px) } to{ opacity:1; transform:none } }

/* the "+" button in the map controls: same bar as zoom / "my location" (map.css gives .map-wrap .leaflet-bar its look) */
.gm-ctx-btn .gm-ctx-ic{ inline-size:20px; block-size:20px }
.gm-ctx-btn a:focus-visible{ outline:3px solid var(--focus-ring, var(--accent)); outline-offset:-3px }

/* iOS: a long press on the map would select text / open the callout instead of reaching the script */
#map{ -webkit-touch-callout:none; -webkit-user-select:none; user-select:none }

@media (prefers-reduced-motion:reduce){
  .gm-ctx, .gm-ctx-pin svg{ animation:none }
  .gm-ctx-item{ transition:none }
}

/* the one-line hint in the list panel (map.html .map-hint is also a .map-note: it is hidden in the
   mobile sheet's peek / half states with it). Its sibling note below keeps the divider. */
.map-side .map-hint{ padding-block-end:2px; color:var(--ink-2) }
.map-side .map-hint + .map-note{ border-block-start:0; padding-block-start:2px }