/* StreetTasker map view (js/map-view.js, js/taskers-map.js): List / Map toggle, map box, pins and popups.
   Tokens only; Leaflet's own stylesheet is loaded by map-view.js when the map is first opened. */
.stmap-toggle { display: inline-flex; padding: var(--space-1); gap: var(--space-1); border-radius: var(--radius-pill); background: var(--pt-field); }
.stmap-toggle button {
  display: inline-flex; align-items: center; gap: var(--space-1); height: 32px; padding: 0 var(--space-3);
  border: 0; border-radius: var(--radius-pill); background: none; cursor: pointer;
  font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 600; color: var(--pt-ink-muted);
}
.stmap-toggle button[aria-pressed="true"] { background: var(--pt-green); color: var(--color-text-on-primary); }
.stmap-toggle button:focus-visible { outline: 0; box-shadow: var(--shadow-focus); }

.stmap-wrap[hidden] { display: none; }
.stmap-box { position: relative; z-index: 0; width: 100%; height: 560px; border-radius: var(--radius-xl); overflow: hidden; background: var(--pt-field); box-shadow: var(--shadow-pt-card); }
.stmap-note { margin: var(--space-3) 0 0; font-size: var(--text-xs); color: var(--color-text-secondary); }
.stmap-note[hidden] { display: none; }

/* Pins: a green dot with a white ring; paler for "approximate area" */
.stmap-pin span { display: block; width: 26px; height: 26px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--pt-green); border: 3px solid var(--color-bg); box-shadow: var(--shadow-pt-pill); }
.stmap-pin.is-approx span { background: var(--color-primary); opacity: 0.85; }

.stmap-pop { font-family: var(--font-body); min-width: 160px; }
.stmap-pop-title { font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 800; color: var(--color-text); }
.stmap-pop-sub { margin-top: 2px; font-size: var(--text-xs); color: var(--color-text-secondary); }
.stmap-pop-meta { margin-top: 2px; font-size: var(--text-xs); color: var(--color-text-muted); }
.stmap-pop-approx { margin-top: var(--space-1); font-size: var(--text-xs); font-weight: 600; color: var(--color-warning); }
.stmap-pop-link { display: inline-block; margin-top: var(--space-2); font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 700; color: var(--color-primary); text-decoration: none; }
.stmap-pop-link:hover { text-decoration: underline; }

@media (max-width: 768px) { .stmap-box { height: 62vh; min-height: 360px; max-height: 560px; border-radius: var(--radius-lg); } }

/* the list grid sets display: grid, which would beat the hidden attribute while the map is showing */
.spg-grid[hidden] { display: none; }

/* Stage 3: map buttons, "Show in list", cluster bubbles, the card a pin pointed to */
.stmap-ctl { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); }
.stmap-ctl-btn { height: 34px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-pill); background: var(--color-bg); color: var(--color-text); cursor: pointer; box-shadow: var(--shadow-pt-pill); font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 700; }
.stmap-ctl-btn:hover { background: var(--pt-field); }
.stmap-ctl-btn:focus-visible { outline: 0; box-shadow: var(--shadow-focus); }
.stmap-ctl-btn:disabled { opacity: 0.6; cursor: default; }
.stmap-ctl-area { background: var(--pt-green); color: var(--color-text-on-primary); }
.stmap-ctl-area:hover { background: var(--pt-green); opacity: 0.92; }
.stmap-ctl-btn[hidden] { display: none; }
.stmap-pop-pick { display: inline-block; margin: var(--space-2) 0 0 var(--space-3); padding: 0; border: 0; background: none; cursor: pointer; font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 700; color: var(--color-text-secondary); }
.stmap-pop-pick:hover { text-decoration: underline; }
.marker-cluster div { font-family: var(--font-heading); font-weight: 800; color: var(--color-text-on-primary); background: var(--pt-green); }
.marker-cluster { background: rgba(15, 107, 70, 0.25); }
.stmap-picked { animation: stmap-picked 2.4s ease-out; }
@keyframes stmap-picked { 0%, 55% { box-shadow: 0 0 0 4px var(--pt-green); } 100% { box-shadow: 0 0 0 4px transparent; } }
@media (prefers-reduced-motion: reduce) { .stmap-picked { animation: none; box-shadow: 0 0 0 4px var(--pt-green); } }

/* Stage 4: bottom card on phones, bigger touch targets, tile message */
.stmap-sheet { position: absolute; left: var(--space-3); right: var(--space-3); bottom: 28px; z-index: 1000; padding: var(--space-4); padding-right: calc(var(--space-4) + 36px); border-radius: var(--radius-lg); background: var(--color-bg); box-shadow: var(--shadow-pt-card); }
.stmap-sheet .stmap-pop-title { font-size: var(--text-base); }
.stmap-sheet .stmap-pop-sub, .stmap-sheet .stmap-pop-meta, .stmap-sheet .stmap-pop-approx { font-size: var(--text-sm); }
.stmap-sheet .stmap-pop-link, .stmap-sheet .stmap-pop-pick { min-height: 44px; display: inline-flex; align-items: center; font-size: var(--text-sm); }
.stmap-sheet-close { position: absolute; top: var(--space-2); right: var(--space-2); width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; cursor: pointer; font-size: 26px; line-height: 1; color: var(--color-text-secondary); }
.stmap-sheet-close:focus-visible { outline: 0; box-shadow: var(--shadow-focus); }
.stmap-tilemsg { position: absolute; left: var(--space-3); right: var(--space-3); top: var(--space-3); z-index: 999; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-bg); font-size: var(--text-xs); color: var(--color-text-secondary); box-shadow: var(--shadow-pt-pill); text-align: center; }
@media (max-width: 768px) {
  .stmap-ctl-btn { height: 40px; padding: 0 var(--space-4); font-size: var(--text-sm); }
  .stmap-toggle button { height: 36px; }
}