/* The charger map (/chargers/). Loaded on that page only, after glass.css and garage.css. Every rule sits under .cm, so nothing here reaches another
   page. The motorsport set: square-cut controls on a hairline, the Paddock20 stripe on what is picked, no pills. Nothing that holds glass is animated
   in opacity, filter, mask or clip-path (garage.css: the flicker rule). Four named sizes become the phone's four in one block; none is under 10px. */

.cm{ --cm-body:1rem; --cm-sub:.9rem; --cm-foot:.82rem; --cm-cap:max(10px,.66rem); --cm-h:clamp(420px,70vh,720px) }
@media (max-width:599.98px), (max-height:520px) and (orientation:landscape) and (pointer:coarse){
  .cm{ --cm-body:var(--t-body,17px); --cm-sub:var(--t-sub,15px); --cm-foot:var(--t-foot,13px); --cm-cap:var(--t-cap,12px); --cm-h:min(58vh,480px) }
}

.cm-wrap{ position:relative }
.cm-label{ display:block; margin:0 0 6px; font-size:var(--cm-cap); font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2) }

/* ---------- the search ---------- */
.cm .cm-search{ position:relative; margin:0 0 14px }
.cm .cm-field{ display:flex; flex-wrap:wrap; gap:8px; align-items:stretch }
.cm input[type="search"]{ flex:1 1 240px; min-width:0; min-height:48px; padding:10px 14px; border:1px solid var(--hairline-strong); border-radius:var(--r-ctl);
  background:rgba(5,7,13,.62); color:var(--ink); font:inherit; font-size:var(--cm-body); -webkit-appearance:none; appearance:none }
.cm input[type="search"]::placeholder{ color:var(--ink-3) }
.cm input[type="search"]:focus-visible{ outline:2px solid var(--ignition); outline-offset:1px }
.cm .cm-btn, .cm .cm-go, .cm .cm-near{ min-height:48px; padding:10px 16px; border:1px solid var(--hairline-strong); border-radius:var(--r-ctl); background:rgba(255,255,255,.04);
  color:var(--ink); cursor:pointer; font-size:var(--cm-cap); font-weight:800; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap }
.cm .cm-go{ background:rgba(244,81,30,.16); border-color:rgba(244,81,30,.6) }
.cm .cm-go:hover, .cm .cm-near:hover{ border-color:var(--ink-2) }
@media (max-width:599.98px){ .cm .cm-go, .cm .cm-near{ flex:1 1 0 } }
.cm .cm-go:focus-visible, .cm .cm-near:focus-visible, .cm .cm-btn:focus-visible{ outline:2px solid var(--ignition); outline-offset:2px }
.cm .cm-near[hidden]{ display:none }

.cm .cm-sug{ position:absolute; z-index:6; left:0; right:0; top:100%; margin:4px 0 0; padding:0; list-style:none; border:1px solid var(--hairline-strong);
  border-radius:var(--r-ctl); background:rgba(8,11,20,.96); box-shadow:var(--drop-1) }
.cm .cm-sug[hidden]{ display:none }
.cm .cm-sug-i{ display:flex; justify-content:space-between; gap:12px; padding:12px 14px; cursor:pointer; font-size:var(--cm-sub); border-top:1px solid var(--hairline-soft) }
.cm .cm-sug-i:first-child{ border-top:0 }
.cm .cm-sug-i:hover, .cm .cm-sug-i[aria-selected="true"]{ background:rgba(244,81,30,.14) }
.cm .cm-sug-s{ color:var(--ink-2); white-space:nowrap }

/* ---------- the filters ---------- */
.cm .cm-filters{ display:flex; flex-wrap:wrap; gap:10px 16px; align-items:flex-end; margin:0 0 14px }
.cm .cm-fg{ display:flex; flex-direction:column; gap:6px; min-width:0; border:0; margin:0; padding:0 }
.cm .cm-fg > legend, .cm .cm-fg > label.cm-fl{ padding:0; font-size:var(--cm-cap); font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2) }
.cm .cm-fmore{ flex:1 1 100%; min-width:0 }
.cm .cm-fmore > summary{ display:inline-flex; align-items:center; min-height:44px; padding:8px 14px; border:1px solid var(--hairline-strong); border-radius:var(--r-ctl);
  background:rgba(255,255,255,.035); color:var(--ink-2); cursor:pointer; font-size:var(--cm-cap); font-weight:700; letter-spacing:.1em; text-transform:uppercase; list-style:none }
.cm .cm-fmore > summary::-webkit-details-marker{ display:none }
.cm .cm-fmore > summary::after{ content:"+"; margin-left:10px; font-size:1.1rem; line-height:1 }
.cm .cm-fmore[open] > summary::after{ content:"\2212" }
.cm .cm-fmore > summary:focus-visible{ outline:2px solid var(--ignition); outline-offset:2px }
.cm .cm-fmore-body{ display:flex; flex-wrap:wrap; gap:10px 16px; align-items:flex-end; margin-top:12px }
.cm .cm-seg{ display:inline-flex; border:1px solid var(--hairline-strong); border-radius:var(--r-ctl); background:rgba(255,255,255,.035) }
.cm .cm-seg label{ position:relative; display:flex }
.cm .cm-seg input{ position:absolute; inset:0; opacity:0; margin:0; cursor:pointer }
.cm .cm-seg span{ display:flex; align-items:center; min-height:44px; padding:8px 14px; font-size:var(--cm-cap); font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-2); box-shadow:inset 1px 0 0 var(--hairline) }
.cm .cm-seg label:first-child span{ box-shadow:none }
.cm .cm-seg input:checked + span{ background:rgba(244,81,30,.15); color:var(--ink); box-shadow:inset 0 -3px 0 var(--ignition) }
.cm .cm-seg input:focus-visible + span{ outline:2px solid var(--ignition); outline-offset:-3px }
.cm select{ min-height:44px; max-width:100%; padding:8px 30px 8px 10px; border:1px solid var(--hairline-strong); border-radius:var(--r-ctl); background-color:rgba(5,7,13,.62);
  color:var(--ink); font:inherit; font-size:var(--cm-sub) }
.cm select:focus-visible, .cm .cm-chk input:focus-visible{ outline:2px solid var(--ignition); outline-offset:2px }
.cm .cm-chk{ display:flex; align-items:center; gap:8px; min-height:44px; font-size:var(--cm-sub); color:var(--ink) }
.cm .cm-chk input{ width:20px; height:20px; accent-color:var(--ignition) }

/* ---------- the map and the list ---------- */
.cm .cm-grid{ display:grid; gap:14px; grid-template-columns:minmax(0,1fr) }
@media (min-width:900px){ .cm .cm-grid{ grid-template-columns:minmax(0,1fr) 380px } }
.cm .cm-mapwrap{ position:relative; height:var(--cm-h); border:1px solid var(--hairline-strong); border-radius:var(--r-box); overflow:hidden; background:#070A12 }
.cm .cm-canvas{ display:block; width:100%; height:100%; touch-action:none; cursor:grab; outline:0 }
.cm .cm-mapwrap.is-grab .cm-canvas{ cursor:grabbing }
.cm .cm-canvas:focus-visible{ box-shadow:inset 0 0 0 2px var(--ignition) }
.cm .cm-ctl{ position:absolute; top:10px; right:10px; display:flex; flex-direction:column; gap:6px }
.cm .cm-ctl button{ width:44px; height:44px; padding:0; border:1px solid var(--hairline-strong); border-radius:var(--r-ctl); background:rgba(8,11,20,.88); color:var(--ink);
  cursor:pointer; font-size:1.3rem; line-height:1; font-weight:700 }
.cm .cm-ctl button:hover{ border-color:var(--ink-2) }
.cm .cm-ctl button:focus-visible{ outline:2px solid var(--ignition); outline-offset:2px }
.cm .cm-ctl .cm-us{ font-size:var(--cm-cap); letter-spacing:.08em }
.cm .cm-hint{ position:absolute; left:10px; bottom:34px; margin:0; padding:6px 10px; border:1px solid var(--hairline-strong); border-radius:var(--r-ctl);
  background:rgba(8,11,20,.92); font-size:var(--cm-foot); color:var(--ink) }
.cm .cm-hint[hidden]{ display:none }
.cm .cm-mapcol{ min-width:0 }
.cm .cm-legend{ display:flex; flex-wrap:wrap; gap:6px 16px; margin:10px 0 0; padding:0; font-size:var(--cm-foot); color:var(--ink-2) }
.cm .cm-legend span{ display:inline-flex; align-items:center; gap:7px }
.cm .cm-attr{ position:absolute; left:0; right:0; bottom:0; margin:0; padding:5px 10px; background:linear-gradient(0deg,rgba(5,7,13,.92),rgba(5,7,13,0)); font-size:var(--cm-cap);
  color:var(--ink-2); pointer-events:none }

.cm .cm-dot{ flex:0 0 auto; width:11px; height:11px; border-radius:50%; background:var(--sky); box-shadow:0 0 0 1px rgba(5,7,13,.9) }
.cm .cm-dot.is-dc{ background:var(--ignition) }
.cm .cm-dot.is-own{ background:transparent; box-shadow:inset 0 0 0 2px var(--sky) }
.cm .cm-dot.is-dc.is-own{ box-shadow:inset 0 0 0 2px var(--ignition) }

.cm .cm-side{ display:flex; flex-direction:column; min-width:0; min-height:0 }
@media (min-width:900px){ .cm .cm-side{ height:var(--cm-h) } }
.cm .cm-status{ flex:0 0 auto; margin:0 0 10px; font-size:var(--cm-sub); line-height:1.45; color:var(--ink); min-height:4.4em }
.cm .cm-list{ flex:1 1 auto; min-height:0; margin:0; padding:0; list-style:none; overflow-y:auto; border:1px solid var(--hairline); border-radius:var(--r-box);
  background:rgba(5,7,13,.45); overscroll-behavior:contain }
@media (max-width:899.98px){ .cm .cm-list{ max-height:520px } }
.cm .cm-row + .cm-row{ border-top:1px solid var(--hairline-soft) }
.cm .cm-item{ display:flex; flex-direction:column; gap:3px; width:100%; padding:12px 14px; border:0; border-radius:0; background:transparent; color:var(--ink); text-align:left;
  cursor:pointer; font:inherit }
.cm .cm-item:hover{ background:rgba(244,81,30,.08) }
.cm .cm-item:focus-visible{ outline:2px solid var(--ignition); outline-offset:-2px }
.cm .cm-i-top{ display:flex; align-items:center; gap:9px; min-width:0 }
.cm .cm-i-name{ flex:1 1 auto; min-width:0; font-size:var(--cm-sub); font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.cm .cm-i-d{ flex:0 0 auto; font-size:var(--cm-foot); color:var(--ink-2); font-variant-numeric:tabular-nums }
.cm .cm-i-sub{ padding-left:20px; font-size:var(--cm-foot); color:var(--ink-2); overflow-wrap:anywhere }
.cm .cm-all .cm-i-name{ color:var(--sky) }
.cm .cm-more{ margin:10px 0 0; align-self:stretch; min-height:44px }
.cm .cm-more[hidden]{ display:none }
.cm .cm-side.is-detail .cm-list, .cm .cm-side.is-detail .cm-more{ display:none }

/* ---------- one station ---------- */
.cm .cm-detail{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:14px; border:1px solid var(--hairline-strong); border-radius:var(--r-box); background:rgba(8,11,20,.7) }
.cm .cm-detail[hidden]{ display:none }
.cm .cm-back{ min-height:44px; padding:8px 12px; border:1px solid var(--hairline-strong); border-radius:var(--r-ctl); background:rgba(255,255,255,.04); color:var(--ink);
  cursor:pointer; font-size:var(--cm-cap); font-weight:800; letter-spacing:.1em; text-transform:uppercase }
.cm .cm-back:focus-visible{ outline:2px solid var(--ignition); outline-offset:2px }
.cm .cm-d-h{ margin:14px 0 4px; font-size:1.2rem; line-height:1.25; outline:0 }
.cm .cm-d-addr{ margin:0 0 6px; font-size:var(--cm-sub); color:var(--ink) }
.cm .cm-d-dist{ margin:0 0 12px; font-size:var(--cm-foot); color:var(--ink-2) }
.cm .cm-d-dl{ margin:0 0 12px }
.cm .cm-f{ padding:9px 0; border-top:1px solid var(--hairline-soft) }
.cm .cm-f dt{ font-size:var(--cm-cap); font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2) }
.cm .cm-f dd{ margin:3px 0 0; font-size:var(--cm-sub); color:var(--ink); overflow-wrap:anywhere }
.cm .cm-d-links{ display:flex; flex-direction:column; gap:10px; margin:0 }
.cm .cm-link{ color:var(--sky); font-size:var(--cm-sub) }

/* ---------- with no script: the numbers, and where else to look ---------- */
.cm .cm-nojs{ display:block }
html.js .cm .cm-nojs{ display:none }
html:not(.js) .cm .cm-search, html:not(.js) .cm .cm-filters, html:not(.js) .cm .cm-grid{ display:none }
.cm-states{ width:100%; border-collapse:collapse; font-size:var(--cm-sub,.9rem) }
.cm-states th, .cm-states td{ padding:6px 10px; text-align:left; border-top:1px solid var(--hairline-soft) }
.cm-states td:nth-child(n+2), .cm-states th:nth-child(n+2){ text-align:right; font-variant-numeric:tabular-nums }

.cm-about h2{ margin-top:0 }
.cm-about dl{ margin:0 }
.cm-about dt{ margin-top:14px; font-weight:800; color:var(--ink) }
.cm-about dd{ margin:4px 0 0; max-width:66ch; color:var(--ink-2) }
@media (prefers-reduced-motion:reduce){ .cm *{ scroll-behavior:auto !important } }