/* /malitools/evs/map, the MaliEVs charger map (2026-10-19; was /ev). Builds on
   /malitools/bills/calc.css (cards, fields) and /food.css (buttons, chips). Desktop:
   map left (sticky), list right. Phones: the map on top, the list under it.
   The map is Google (/gmaps.js); its pins are our own HTML, styled here. */
.ev-page { --app: #2fbf71; --app-2: #1f9a57; --app-ink: #0f2a1a; --app-soft: #dff5e8; max-width: 1240px; }
html[data-theme="dark"] .ev-page { --app-soft: #173524; }
.ev-page .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* finding a place */
.ev-where { display: flex; gap: 10px; flex-wrap: wrap; }
.ev-search { flex: 1 1 280px; display: flex; gap: 8px; min-width: 0; }
.ev-search input { flex: 1; min-width: 0; min-height: 46px; padding: 10px 14px; font: inherit; font-size: 16px; color: var(--text);
  background: var(--surface); border: 2px solid var(--edge, #2b1a12); border-radius: 14px; }
.ev-search input:focus { outline: none; border-color: var(--app); box-shadow: 0 0 0 3px color-mix(in srgb, var(--app) 35%, transparent); }
.ev-search .fd-btn { padding: 10px 14px; }
#evNear { flex: 0 0 auto; }
.ev-places { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ev-places:empty { display: none; }
.ev-places button { width: 100%; display: grid; gap: 2px; text-align: left; padding: 10px 14px; font: inherit; color: var(--text);
  background: var(--surface-soft, #ffe8cf); border: 1px solid var(--line, rgba(43, 26, 18, .15)); border-radius: 12px; cursor: pointer; }
.ev-places button:hover, .ev-places button:focus-visible { border-color: var(--app); }
.ev-places small { color: var(--muted); font-size: 12.5px; }

.ev-filters { display: grid; gap: 12px; }
.ev-flabel { align-self: center; font-size: 13px; font-weight: 800; color: var(--muted); margin-right: 2px; }
.ev-frow { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.ev-frow .cc-field { flex: 1 1 140px; max-width: 240px; }
.ev-check { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; font-weight: 700; cursor: pointer; }
.ev-check input { width: 20px; height: 20px; accent-color: var(--app); }

/* map + list */
.ev-layout { display: grid; gap: 18px; margin-top: 18px; align-items: start; }
.ev-mapwrap { min-width: 0; }
.ev-map { height: 340px; border: 2px solid var(--edge, #2b1a12); border-radius: 20px; overflow: hidden; background: var(--surface-soft, #ffe8cf); z-index: 0; }
@media (min-width: 900px) {
  .ev-layout { grid-template-columns: minmax(0, 1.35fr) minmax(340px, 1fr); }
  .ev-mapwrap { position: sticky; top: calc(var(--nav-h, 76px) + 16px); }
  .ev-map { height: calc(100vh - var(--nav-h, 76px) - 48px); min-height: 420px; max-height: 760px; }
}
/* Google sits a pin's bottom centre on the spot: the teardrop's tip is
   below its box once rotated, and the round centre dot is lifted half way */
.cz-map .ev-pin { margin-bottom: 5px; cursor: pointer; }
.cz-map .ev-me { transform: translateY(50%); }
.ev-pin { display: block; width: 22px; height: 22px; border-radius: 50% 50% 50% 4px; transform: rotate(-45deg);
  background: var(--app); border: 2.5px solid #2b1a12; box-shadow: 0 2px 0 #2b1a12; }
.ev-pin.dc { background: #ffb21a; }
.ev-pin.off { background: #b9aaa0; }
.ev-pin.plan { background: #fff; border-style: dashed; }
.ev-me { display: block; width: 18px; height: 18px; border-radius: 50%; background: #ff4b2b; border: 3px solid #fff; box-shadow: 0 0 0 2px #2b1a12; }
.ev-me.you { background: #2f7bff; box-shadow: 0 0 0 2px #2b1a12, 0 0 0 8px rgba(47, 123, 255, .25); }
.ev-pop { display: grid; gap: 6px; font: 13px/1.45 Inter, "SukhumvitSet", system-ui, sans-serif; color: #2b1a12; }
.ev-pop > b { font-size: 14px; }
.ev-pop small { color: #8b6b5a; }

.ev-count { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.ev-live { margin: 0; padding: 10px 12px; font-size: 13px; font-weight: 600; line-height: 1.55; color: var(--text);
  background: var(--app-soft); border-radius: 12px; }
.ev-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ev-card { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--line, rgba(43, 26, 18, .15)); border-radius: 14px; background: var(--surface); scroll-margin: 90px; }
.ev-card.on { border-color: var(--app); box-shadow: 0 0 0 2px color-mix(in srgb, var(--app) 40%, transparent); }
.ev-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 0; text-align: left; font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.ev-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--app); border: 2px solid var(--edge, #2b1a12); }
.ev-dot.dc { background: #ffb21a; }
.ev-name { flex: 1; min-width: 0; display: grid; }
.ev-name b { font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.ev-name small, .ev-addr { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.ev-addr { margin: 0; overflow-wrap: anywhere; }
.ev-far { flex: none; font-weight: 800; font-size: 13.5px; }
.ev-plugs { display: flex; flex-wrap: wrap; gap: 6px; }
.ev-plug { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; font-size: 12.5px; border-radius: 999px; background: var(--app-soft); color: var(--text); }
.ev-plug.dc { background: color-mix(in srgb, #ffb21a 28%, var(--surface)); }
.ev-plug.none { background: none; padding-left: 0; color: var(--muted); }
.ev-pop .ev-plug { background: #dff5e8; color: #2b1a12; }
.ev-pop .ev-plug.dc { background: #ffe9bf; }
.ev-st { justify-self: start; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.ev-st.operational { color: #1f8a4c; }
.ev-st.not_operational { color: var(--accent, #ff4b2b); }
.ev-st.live { color: #1f8a4c; }
html[data-theme="dark"] .ev-st.operational, html[data-theme="dark"] .ev-st.live { color: #5fd38f; }
.ev-links { display: flex; flex-wrap: wrap; gap: 6px; }
.ev-a { display: inline-flex; align-items: center; min-height: 34px; padding: 4px 12px; font-size: 13px; font-weight: 700; text-decoration: none;
  color: var(--text); border: 1px solid var(--line-strong, rgba(43, 26, 18, .3)); border-radius: 999px; }
.ev-a:hover, .ev-a:focus-visible { border-color: var(--app); }
.ev-pop .ev-a { color: #2b1a12; border-color: rgba(43, 26, 18, .3); min-height: 30px; }
.ev-empty { list-style: none; display: grid; justify-items: center; }
@media (max-width: 700px) {
  .ev-frow .cc-field { max-width: none; }
  #evNear { flex: 1 1 100%; }
}