.map-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-bottom:16px;
}
.map-toolbar-group{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.mt-label{
  font-size:12px;
  color:var(--ink-2);
  font-weight:600;
}
.seg.seg-sm button{ padding:6px 10px; font-size:12px; }
.gauge-y-stepper{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:5px;
}
.gauge-y-stepper button{
  border:1px solid var(--border);
  background:var(--surface-2);
  color:var(--ink-2);
  border-radius:6px;
  width:26px; height:26px;
  font-size:14px;
  cursor:pointer;
  font-family:inherit;
}
.gauge-y-stepper button:hover{ color:var(--ink); }
.gauge-y-stepper span{
  min-width:16px;
  text-align:center;
  font-variant-numeric: tabular-nums;
  font-weight:600;
}

.gauge-bars{
  display:flex;
  gap:4px;
  margin-bottom:8px;
}
.gauge-bar{
  flex:1;
  height:28px;
  border:1px solid var(--border);
  background:var(--surface-2);
  border-radius:4px;
  cursor:pointer;
  padding:0;
}
.gauge-bar:hover{ border-color:var(--ink-muted); }
.gauge-bar.filled{
  background:var(--e85-color);
  border-color:var(--e85-color);
}
.fill-total{
  font-size:13px;
  color:var(--ink-2);
  margin-bottom:10px;
}
.fill-total b{ color:var(--ink); font-variant-numeric: tabular-nums; }
.fill-tiles{
  display:flex;
  gap:10px;
}
.fill-tiles[hidden]{ display:none; }
.fill-tile{
  flex:1;
  min-width:0;
  border-radius:10px;
  padding:10px 14px;
  border-left:4px solid var(--tile-color, var(--border));
  background:var(--tile-bg, var(--surface-2));
  transition:background-color .15s ease, border-color .15s ease;
}
.fill-tile-label{
  font-size:11.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:var(--tile-color, var(--ink-2));
  margin-bottom:2px;
}
.fill-tile-value{
  font-size:19px;
  font-weight:700;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  color:var(--ink);
}
 
.fill-tile-e85{
  --tile-color: var(--fuel-e85);
  --tile-bg: var(--fuel-e85-fill);
}
.fill-tile-ref.e10{
  --tile-color: var(--fuel-e10);
  --tile-bg: var(--fuel-e10-fill);
}
.fill-tile-ref.e5{
  --tile-color: var(--fuel-e5);
  --tile-bg: var(--fuel-e5-fill);
}
.fill-tile.warn{
  --tile-color: var(--neg);
  --tile-bg: var(--neg-fill);
}
@media (max-width: 480px){
  .fill-tiles{ gap:6px; }
  .fill-tile{ padding:8px 10px; }
  .fill-tile-value{ font-size:16px; }
}
.hint.warn{
  color:var(--neg);
  font-weight:600;
}
.hint.warn[hidden]{ display:none; }

.map-container{
  position:relative;
  height:260px;
  border-radius:10px;
  overflow:hidden;
  background:var(--surface-2);
  margin:14px 0;
  touch-action:none;
  cursor:grab;
}
.map-tiles, .map-markers, .map-route-line{
  position:absolute;
  inset:0;
}
 
.map-route-line{ z-index:1; pointer-events:none; overflow:visible; }
 
:root{
  --map-route-0: #2a78d6;
  --map-route-1: #c2185b;
  --map-route-2: #00796b;
}
.map-route-line path.route-alt{ fill:none; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; opacity:.75; }
.map-route-line path.route-alt.selected{ stroke-width:6; opacity:1; }
 
.map-route-line path.route-c0{ stroke:var(--map-route-0); }
.map-route-line path.route-c1{ stroke:var(--map-route-1); }
.map-route-line path.route-c2{ stroke:var(--map-route-2); }
.route-alt-row.route-c0{ --ra-couleur:var(--map-route-0); }
.route-alt-row.route-c1{ --ra-couleur:var(--map-route-1); }
.route-alt-row.route-c2{ --ra-couleur:var(--map-route-2); }
 
.map-route-line path.route-hit{ fill:none; stroke:transparent; stroke-linecap:round; stroke-linejoin:round; pointer-events:stroke; cursor:pointer; }
 
.map-route-from, .map-route-to{
  position:absolute;
  width:14px; height:14px;
  margin:-7px 0 0 -7px;
  border-radius:50%;
  border:2px solid #fff;
  box-shadow:0 0 0 1px rgba(0,0,0,0.35), 0 0 8px rgba(0,0,0,0.4);
  pointer-events:none;
  z-index:2;
}
.map-route-from{ background:var(--winter); }
.map-route-to{ background:var(--summer); }
 
.map-markers{
  isolation:isolate;
  z-index:3;
   
  pointer-events:none;
}
.map-markers > *{ pointer-events:auto; }
.map-tile{
  position:absolute;
  width:256px;
  height:256px;
  user-select:none;
  pointer-events:none;
}
 
.map-pin{
  position:absolute;
  width:17px;
  height:17px;
  margin:-20.5px 0 0 -8.5px;
  border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);
  background:var(--ink-muted);
  border:2px solid var(--surface);
  box-shadow:0 1px 4px rgba(0,0,0,0.3);
  padding:0;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.map-pin.selected{
  box-shadow:0 0 0 3px var(--accent-text), 0 1px 4px rgba(0,0,0,0.3);
}
.map-pin-num{
  transform:rotate(45deg);
  color:#fff;
  font-size:11px;
  font-weight:700;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}
 
.map-origin{
  position:absolute;
  width:14px; height:14px;
  margin:-7px 0 0 -7px;
  border-radius:50%;
  background:var(--winter);
  border:2px solid #fff;
  box-shadow:0 0 0 1px rgba(0,0,0,0.35), 0 0 8px rgba(42,120,214,0.55);
  pointer-events:none;
  z-index:0;
}
.map-popup{
  position:absolute;
   
  transform:translate(-50%, -130%) translate(var(--pop-dx, 0px), var(--pop-dy, 0px));
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:8px;
  padding:8px 10px;
  font-size:12px;
  box-shadow:0 4px 16px rgba(0,0,0,0.2);
  display:none;
   
  max-width:240px;
  z-index:6;
}
.map-popup.show{ display:block; }
 
 
.map-popup .mp-head{ display:flex; align-items:flex-start; gap:8px; margin-bottom:4px; }
 
.map-popup .mp-title{ color:var(--ink); flex:1; min-width:0; }
.map-popup .mp-title .s-name{ font-weight:600; }
.map-popup .mp-title .s-brand{ font-weight:700; }
 
.map-popup .mp-title .s-addr-sub{ display:block; font-weight:400; color:var(--ink-2); font-size:11px; margin-top:1px; }
.map-popup .mp-acts{ display:flex; flex-direction:column; gap:4px; flex:none; }
.map-popup .mp-act{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  padding:0;
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--surface-2);
  color:var(--ink-2);
  font-size:13px;
  font-family:inherit;
  line-height:1;
  text-decoration:none;
  cursor:pointer;
}
.map-popup .mp-act:focus-visible{ outline:2px solid var(--accent-text); outline-offset:1px; }
 
.map-popup .mp-fav.active{ color:var(--accent-text); border-color:var(--accent-text); }
 
.map-popup .mp-body > .mp-warn{ color:var(--neg); margin-top:5px; }
 
.map-popup .mp-body > span,
.map-popup .mp-body > button.s-fuel-btn{ display:block; color:var(--ink-2); margin-top:3px; margin-bottom:0; }
.map-popup .mp-body > span:first-child,
.map-popup .mp-body > button.s-fuel-btn:first-child{ margin-top:0; }
.map-popup .mp-body b{ color:var(--ink); }
 
.map-popup .mp-cost{
  margin-top:5px;
  padding-top:5px;
  border-top:1px solid var(--border);
}
 
.map-popup .mp-body > button.s-fuel-btn{ display:flex; align-items:center; }
.map-popup .mp-body > .mp-cost{ display:flex; align-items:center; gap:8px; }
.map-popup .s-trend{ margin-left:auto; }
.map-zoom{
  position:absolute;
  right:8px;
  top:8px;
  display:flex;
  flex-direction:column;
  gap:4px;
  z-index:5;
}
.map-zoom button{
  width:28px; height:28px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--ink-2);
  border-radius:6px;
  font-size:15px;
  cursor:pointer;
  font-family:inherit;
}
.map-zoom button:disabled{ opacity:.4; cursor:default; }
.map-attrib{
  position:absolute;
  left:6px;
  bottom:4px;
  font-size:10px;
  color:var(--ink-2);
  background:rgba(255,255,255,0.75);
  padding:1px 5px;
  border-radius:4px;
  z-index:5;
}
.map-attrib a{ color:inherit; }
:root:where(:not([data-theme="light"])) .map-attrib{ background:rgba(0,0,0,0.55); }
:root[data-theme="dark"] .map-attrib{ background:rgba(0,0,0,0.55); }
.map-empty{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:20px;
  font-size:13px;
  color:var(--ink-muted);
  background:rgba(0,0,0,0.02);
  pointer-events:none;
}
.map-empty[hidden]{ display:none; }

 
.route-alts{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:10px;
}
.route-alts[hidden]{ display:none; }
.route-alt-row{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  text-align:left;
  border:1px solid var(--border);
  border-radius:8px;
  padding:8px 10px;
  font-size:12.5px;
  background:var(--surface);
  color:inherit;
  cursor:pointer;
}
.route-alt-row:hover{ border-color:var(--ink-muted); }
 
.route-alt-row.selected{ border-color:var(--ra-couleur, var(--accent-text)); box-shadow:inset 0 0 0 1px var(--ra-couleur, var(--accent-text)); }
.route-alts .ra-puce{
  flex:none;
  width:14px;
  height:4px;
  border-radius:2px;
  background:var(--ra-couleur, var(--ink-muted));
}
.route-alts .ra-nom{ flex:1; color:var(--ink-2); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.route-alts .ra-meta{ font-weight:700; font-variant-numeric: tabular-nums; flex:none; }

.ranked-list{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:10px;
}
.ranked-item{
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--border);
  border-radius:8px;
  padding:8px 10px;
  font-size:12.5px;
}
.ranked-rank{ font-weight:700; color:var(--accent-text); flex:none; }
.ranked-label{ flex:1; color:var(--ink-2); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ranked-value{ font-weight:700; font-variant-numeric: tabular-nums; }
.ranked-locate{
  flex:none;
  width:26px;
  height:26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:none;
  border-radius:6px;
  background:transparent;
  font-size:14px;
  line-height:1;
  cursor:pointer;
}
.ranked-locate:hover{ background:var(--surface-2); }
.ranked-locate:focus-visible{ outline:2px solid var(--accent-text); outline-offset:-2px; }

@media (max-width: 480px){
  .wrap{ padding:20px 14px 0; }
  h1{ font-size:22px; }
  .card{ padding:16px; }
  .seg button{ font-size:12px; padding:9px 0; }
  input[type="number"]{ width:96px; }
}