:root {
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    sans-serif;
  color: #193930;
  background: #eaf0eb;
  font-synthesis: none;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
main {
  display: flex;
  height: 100dvh;
}
.panel {
  width: 370px;
  min-width: 340px;
  background: #fffefb;
  z-index: 3;
  box-shadow: 8px 0 40px #183c3010;
  overflow: auto;
  padding: 28px;
  display: flex;
  flex-direction: column;
}
header {
  padding-bottom: 26px;
  border-bottom: 1px solid #e8eee8;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 780;
  font-size: 25px;
  letter-spacing: -1px;
}
.brand-icon {
  background: #183e32;
  color: #b8ef8a;
  font-size: 32px;
  border-radius: 12px;
  width: 40px;
  text-align: center;
}
.green {
  color: #318556;
}
.tag {
  display: block;
  font-size: 9px;
  letter-spacing: 2px;
  color: #7b8e81;
  margin-top: 16px;
  font-weight: 650;
}
.intro {
  margin: 22px 0;
}
.intro h1 {
  font-size: 27px;
  letter-spacing: -1px;
  margin: 0 0 8px;
}
.intro p {
  font-size: 12px;
  color: #6e8175;
  margin: 0;
}
.section-label {
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 1.6px;
  margin-bottom: 16px;
  color: #718477;
}
label {
  font-size: 12px;
  font-weight: 600;
  display: block;
  margin: 12px 0 7px;
}
input:not([type="checkbox"]),
select {
  width: 100%;
  border: 1px solid #dce5dc;
  border-radius: 9px;
  background: #f6f8f3;
  color: #243e31;
  padding: 12px;
  font: inherit;
  font-size: 13px;
  outline: none;
}
input:focus,
select:focus {
  border-color: #458c61;
  box-shadow: 0 0 0 3px #4a9a6618;
}
button {
  font: inherit;
  cursor: pointer;
  border: 0;
}
.pick {
  font-size: 11px;
  color: #347c50;
  background: none;
  padding: 8px 0;
}
.pick.active {
  font-weight: 750;
  text-decoration: underline;
}
.connector {
  height: 10px;
  border-left: 2px dotted #ccd8ca;
  margin-left: 5px;
}
.actions {
  display: flex;
  gap: 8px;
  margin-top: 15px;
}
.primary {
  background: #214f39;
  color: white;
  font-size: 13px;
  font-weight: 650;
  border-radius: 9px;
  padding: 14px;
  flex: 1;
  display: flex;
  justify-content: space-between;
}
.primary:hover {
  background: #306747;
}
.primary:disabled {
  opacity: 0.45;
  cursor: default;
}
.secondary {
  border-radius: 9px;
  width: 42px;
  background: #eaf0e7;
  color: #345d41;
  font-size: 23px;
}
.hint {
  font-size: 11px;
  line-height: 1.65;
  color: #7a897e;
}
.filters {
  margin-top: 22px;
  border-top: 1px solid #e8eee8;
  padding-top: 22px;
}
.check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  margin: 15px 0;
}
input[type="checkbox"] {
  accent-color: #367b4e;
}
.legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 10px;
  color: #718477;
}
.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 5px;
}
.available {
  background: #35a66a;
}
.unknown {
  background: #859293;
}
footer {
  margin-top: auto;
  padding-top: 30px;
  font-size: 10px;
  color: #64786c;
}
footer p {
  font-size: 9px;
  line-height: 1.5;
}
footer a {
  color: #347c50;
}
.pulse {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #6a9c59;
  border-radius: 50%;
  margin-right: 5px;
}
.map-wrap {
  flex: 1;
  position: relative;
  min-width: 0;
}
#map {
  position: absolute;
  inset: 0;
}
.map-heading {
  position: absolute;
  top: 24px;
  left: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fffefaee;
  padding: 12px 18px;
  border-radius: 12px;
  box-shadow: 0 4px 20px #244b3612;
  pointer-events: none;
}
.country {
  background: #e9efdf;
  padding: 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 750;
}
.map-heading strong {
  font-size: 13px;
}
.map-heading small {
  display: block;
  font-size: 10px;
  color: #7c8b7b;
  margin-top: 3px;
}
.map-bottom {
  position: absolute;
  bottom: 34px;
  left: 50%;
  transform: translateX(-50%);
  background: #fffefbee;
  border-radius: 30px;
  padding: 10px 18px;
  font-size: 11px;
  box-shadow: 0 4px 20px #244b3612;
  white-space: nowrap;
}
.map-status {
  position: absolute;
  top: 100px;
  left: 24px;
  right: 60px;
  max-width: 500px;
  padding: 12px;
  border-radius: 8px;
  background: #fff2d9;
  font-size: 12px;
}
.map-status:empty {
  display: none;
}
.error {
  color: #9e3429;
  font-size: 12px;
  line-height: 1.5;
  margin-top: 10px;
}
.route-stats {
  display: flex;
  gap: 30px;
  border-top: 1px solid #e2e9df;
  margin-top: 18px;
  padding-top: 16px;
}
.route-stats strong {
  font-size: 22px;
  letter-spacing: -0.6px;
}
.route-stats small {
  display: block;
  font-size: 10px;
  color: #7c8b7b;
  margin-top: 5px;
}
.maplibregl-popup-content {
  padding: 18px;
  border-radius: 12px;
  color: #254d36;
  max-width: 285px;
  font: 12px/1.6 system-ui;
}
.maplibregl-popup-content h3 {
  font-size: 15px;
  margin: 0 0 8px;
}
.maplibregl-popup-content p {
  margin: 5px 0;
}
.maplibregl-ctrl-attrib {
  font-size: 9px !important;
}
.marker {
  border-radius: 50%;
  background: #214f39;
  color: white;
  border: 3px solid white;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: bold;
  box-shadow: 0 2px 8px #0003;
}
@media (max-width: 700px) {
  main {
    height: auto;
    min-height: 100dvh;
    flex-direction: column-reverse;
  }
  .map-wrap {
    height: 58dvh;
    min-height: 360px;
    flex: none;
  }
  .panel {
    width: 100%;
    padding: 20px;
    min-width: 0;
    overflow: visible;
  }
  .intro {
    margin: 18px 0;
  }
  header {
    padding-bottom: 16px;
  }
  .tag {
    margin-top: 8px;
  }
  .filters {
    margin-top: 18px;
  }
  footer {
    padding-top: 20px;
  }
  .map-heading {
    top: 15px;
    left: 15px;
  }
  .map-status {
    top: 88px;
    left: 15px;
  }
  .map-bottom {
    bottom: 30px;
  }
}

.dot.busy { background: #c44040; }
.maplibregl-popup { max-width: 350px !important; }

.search-button { margin-top: 7px; padding: 9px 14px; border: 1px solid #c5d9cb; border-radius: 8px; background: #eef5ed; color: #234f3e; cursor: pointer; }
.search-results { font-size: 13px; margin-top: 6px; max-height: 260px; overflow-y: auto; }
.search-results:empty { display: none; }
.search-result { display: block; text-align: left; width: 100%; padding: 11px; background: white; color: #234f3e; border: 1px solid #c5d9cb; border-radius: 7px; margin: 5px 0; cursor: pointer; overflow-wrap: anywhere; }
.search-result:hover, .search-result:focus-visible { background: #e4f1e8; outline: 2px solid #329b65; }

.ev-settings{margin-top:18px;border-top:1px solid #d8e3dc;padding-top:12px}.ev-settings summary{cursor:pointer;margin:8px 0;font-weight:600}.ev-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.ev-grid input{width:100%;box-sizing:border-box}.mercedes-panel{border-top:1px solid #d8e3dc;margin-top:12px;padding-top:8px}#mb-data{white-space:pre-wrap;overflow-wrap:anywhere;max-height:260px;overflow:auto;font-size:11px}#ev-chart svg{width:100%;height:120px}#ev-stops{padding-left:20px;font-size:13px}#ev-stops li{margin:10px 0}#ev-verdict{font-size:14px;font-weight:600}.ev-stop{background:#17573e;color:white;border:2px solid white;border-radius:50%;width:26px;height:26px;display:grid;place-items:center}.ev-settings input[type=number]{min-width:0;width:100%;box-sizing:border-box}

[hidden]{display:none!important}

.vehicle-launch{display:flex;align-items:center;justify-content:space-between;width:100%;text-align:left;padding:15px;border:1px solid #c7dacf;border-radius:12px;background:#edf5ee;color:#204d3c;cursor:pointer;margin:18px 0}.vehicle-launch small{display:block;font-size:12px;margin-top:5px;color:#647c6d}
#vehicle-dialog{width:min(940px,94vw);max-height:90dvh;border:0;border-radius:20px;padding:26px;background:#fafcf8;color:#234536;box-sizing:border-box;box-shadow:0 24px 80px #102b3755}#vehicle-dialog::backdrop{background:#102d2a88;backdrop-filter:blur(4px)}.vehicle-dialog-head{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:22px}.vehicle-dialog-head h2{font-size:23px;margin:6px 0}.vehicle-layout{display:grid;grid-template-columns:1fr 1.1fr;gap:26px}.vehicle-card{background:linear-gradient(145deg,#173e32,#2c7358);color:#f1fff5;border-radius:18px;padding:24px;align-self:start;position:sticky;top:0}.vehicle-eyebrow{font-size:10px;letter-spacing:2px;color:#b7ddbf}.vehicle-card h3{font-size:26px;margin:12px 0}.vehicle-silhouette{width:100%;height:auto;color:#d7efe0}.vehicle-battery{display:flex;align-items:baseline;gap:14px}.vehicle-battery strong{font-size:48px}.vehicle-battery span{font-size:13px}.vehicle-battery-track{height:7px;background:#ffffff26;border-radius:8px;margin:12px 0;overflow:hidden}#vehicle-soc-bar{width:0;height:100%;background:#a8e3aa}.vehicle-muted{font-size:11px;line-height:1.6;color:#c9dfd1}.vehicle-metrics{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0}.vehicle-metric{padding:12px;background:#ffffff0d;border-radius:10px}.vehicle-metric small{display:block;font-size:10px;color:#cee3d5}.vehicle-metric strong{display:block;font-size:20px;margin:7px 0}.vehicle-metric time{font-size:10px;color:#bed5c6}#vehicle-dialog .ev-settings{border:0;padding:0;margin:0}#vehicle-dialog label{display:block;font-size:13px;font-weight:600;margin:13px 0 6px}#vehicle-dialog label.check{display:flex;gap:8px;align-items:center}#vehicle-dialog select,#vehicle-dialog input[type=number],#vehicle-dialog input[type=text]{padding:10px;background:#f2f6f0;border:1px solid #d4e0d5;border-radius:8px;width:100%;color:#234536;box-sizing:border-box}#vehicle-dialog .hint{font-size:12px;line-height:1.6;color:#6d8073}#vehicle-dialog .search-button{margin-right:5px}#vehicle-dialog summary{font-weight:600;cursor:pointer}#vehicle-dialog #mb-data{max-height:170px}
.ev-search-container{position:relative;margin:8px 0 14px}
.ev-search-input{width:100%;padding:10px 12px;background:#f2f6f0;border:1px solid #bdd0c0;border-radius:8px;color:#234536;font-size:13px;box-sizing:border-box}
.ev-search-input:focus{border-color:#2c7358;box-shadow:0 0 0 3px #2c735820;background:#ffffff;outline:none}
.ev-search-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;max-height:260px;overflow-y:auto;background:#ffffff;border:1px solid #c4d6c7;border-radius:10px;box-shadow:0 12px 30px #102d2a33;z-index:100;display:flex;flex-direction:column}
.ev-search-item{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;border-bottom:1px solid #f0f4f0;cursor:pointer;text-align:left;background:none;border-left:0;border-right:0;border-top:0;width:100%;color:#234536}
.ev-search-item:hover,.ev-search-item:focus-visible{background:#edf6f0}
.ev-search-item-info strong{display:block;font-size:13px;color:#173e32}
.ev-search-item-info small{display:block;font-size:11px;color:#637b6d;margin-top:2px}
.ev-search-item-add{flex-shrink:0;padding:5px 10px;background:#235c46;color:#ffffff;border:0;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer}
.ev-search-item-add:hover{background:#194634}
.ev-search-empty,.ev-search-loading{padding:12px;font-size:12px;color:#6d8073;text-align:center}
.garage-list{display:flex;flex-direction:column;gap:8px;margin:8px 0 16px;max-height:220px;overflow-y:auto;padding-right:2px}
.garage-card{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border:1.5px solid #d5e2d7;border-radius:10px;background:#ffffff;transition:border-color .15s}
.garage-card.active{border-color:#287d57;background:#f3faf5;box-shadow:0 2px 8px #287d5718}
.garage-card-title{display:flex;align-items:center;gap:8px}
.garage-card-title strong{font-size:13px;color:#1d4233}
.garage-badge-active{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:2px 6px;border-radius:5px;background:#287d57;color:#ffffff}
.garage-card-details{font-size:11px;color:#5b7565;margin-top:2px}
.garage-card-actions{display:flex;gap:5px;flex-shrink:0}
.garage-btn{padding:4px 8px;border-radius:5px;font-size:11px;font-weight:600;cursor:pointer;border:1px solid #c4d6c7;background:#f5f8f5;color:#234536}
.garage-btn:hover{background:#e6eee7}
.garage-btn-select{background:#2c7358;color:#ffffff;border-color:#2c7358}
.garage-btn-select:hover{background:#1e5440}
.garage-btn-delete{color:#a82e2e;border-color:#ecc8c8;background:#fdf5f5}
.garage-btn-delete:hover{background:#fae6e6}
.vehicle-thumb-img{max-width:100%;max-height:110px;object-fit:contain;margin:6px auto;display:block;filter:drop-shadow(0 4px 10px rgba(0,0,0,0.25))}
.vehicle-tech-chips{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
.vehicle-chip{font-size:11px;background:#ffffff14;padding:4px 8px;border-radius:6px;color:#cee3d5}
@media(max-width:700px){.vehicle-layout{grid-template-columns:1fr}.vehicle-card{position:static}#vehicle-dialog{padding:18px}.vehicle-dialog-head h2{font-size:18px}}

#route-instructions{padding-left:22px;font-size:13px}#route-instructions li{margin:8px 0}#route-instructions button{width:100%;text-align:left;border:1px solid #d4e0d5;border-radius:8px;background:#f2f6f0;color:#234536;padding:10px;line-height:1.5;cursor:pointer}#route-instructions button:hover{background:#e2eee2}

.map-layers{position:absolute;z-index:5;top:24px;right:54px;width:min(330px,calc(100% - 70px));pointer-events:none}
#map-layers-toggle{pointer-events:auto;display:flex;align-items:center;gap:9px;margin-left:auto;padding:12px 15px;border:1px solid #dce6dc;border-radius:12px;background:#fffefbf5;color:#234f3e;box-shadow:0 4px 20px #15372b25;font-weight:650;cursor:pointer}
#map-layers-toggle svg{width:23px;height:23px}#map-layers-toggle[aria-expanded=true]{background:#234f3e;color:white;border-color:#234f3e}
#map-layers-panel{pointer-events:auto;margin-top:10px;max-height:calc(100dvh - 140px);overflow:auto;overscroll-behavior:contain;background:#fffefbf7;border:1px solid #dce6dc;border-radius:16px;box-shadow:0 12px 38px #142f3540;backdrop-filter:blur(12px);padding:16px}
.map-layers-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}.map-layers-head strong{font-size:16px}.map-layers-head small{display:block;font-size:11px;color:#748577;margin-top:4px}#map-layers-close{border:0;border-radius:8px;padding:8px 10px;background:#eef3e9;color:#234f3e;cursor:pointer}
.map-filter-group{border-top:1px solid #e0e8dc}.map-filter-group>summary{padding:15px 0;cursor:pointer;font-size:14px;font-weight:650}.map-filter-content{padding-bottom:14px}.map-filter-content label{display:block;margin:6px 0;font-size:12px;font-weight:600}.map-filter-content select{width:100%;padding:10px;border:1px solid #cddccd;border-radius:8px;background:#f5f8f0;color:#234536}.map-filter-content .check{display:flex;align-items:center;gap:9px;line-height:1.5;padding:5px 0}.map-filter-content .check input{width:17px;height:17px;flex:none;accent-color:#287d57}.map-filter-content input[type=range]{width:100%}.map-filter-content .hint{font-size:11px;line-height:1.5}.map-filter-content details{font-size:12px}.map-filter-content summary{cursor:pointer}.map-layers button:focus-visible,.map-layers summary:focus-visible{outline:3px solid #73b78b;outline-offset:3px}
@media(max-width:700px){.map-layers{top:15px;right:50px;width:min(330px,calc(100% - 62px))}#map-layers-toggle{padding:10px}#map-layers-toggle span{display:none}#map-layers-toggle:after{content:"Ebenen";font-size:12px}#map-layers-panel{max-height:calc(max(58dvh,360px) - 120px)}.map-heading{padding:10px}.map-heading small{display:none}}

.planner .pick{display:block;margin-top:12px;margin-bottom:8px;padding:4px 0}

.tariff-card{margin:12px 0;padding:12px;border:1px solid #d2e0d3;border-radius:12px;background:#f7faf5}.tariff-card summary{font-weight:700}.tariff-card label{margin-top:10px}#trip-settings>label{margin-top:12px}

.charger-pin-button{width:40px;height:58px;border:0;padding:0;background:transparent!important;cursor:pointer;filter:drop-shadow(0 2px 2px #12382e44);z-index:2;overflow:visible}
.charger-pin-body{display:block;position:relative;width:40px;height:58px}.charger-pin-icon{display:block;width:40px;height:58px}
.charger-pin-caption{position:absolute;top:34px;left:50%;transform:translateX(-50%);padding:1px 4px;border-radius:7px;white-space:nowrap;background:#fffffff2;color:var(--pin-dark);font:700 9px/12px Arial,sans-serif;box-shadow:0 1px 2px #0002}
.charger-pin-button:focus-visible{outline:3px solid #172f70;outline-offset:4px;border-radius:18px}.charger-pin-button:hover{filter:drop-shadow(0 2px 4px #12382e99)}
.charger-pin-detail{width:118px;height:84px}.charger-pin-detail .charger-pin-body{width:118px;height:84px}.charger-pin-detail .charger-pin-icon{position:absolute;bottom:0;left:39px}.charger-pin-detail .charger-pin-caption{top:0;padding:5px 7px;font-size:11px;border:1px solid var(--pin-color);border-radius:8px;max-width:118px;box-sizing:border-box}
.charger-pin-list{max-height:280px;overflow:auto;display:grid;gap:8px}.charger-pin-list button{text-align:left;border:1px solid #cadacd;background:#f4f8f2;border-radius:8px;padding:10px;cursor:pointer;color:#214a39}
.maplibregl-popup{z-index:5}

.charge-card-list{max-height:340px;overflow:auto;margin:12px 0;border:1px solid #d4e1d6;border-radius:12px;padding:8px 12px}.charge-card-choice{padding:10px 0;border-bottom:1px solid #e3ebe3}.charge-card-choice:last-child{border-bottom:0}.charge-card-choice .check{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0}.charge-card-choice .check input{flex:none;width:18px;height:18px}.charge-card-choice select{margin-top:5px}.charge-card-choice .hint{margin-bottom:0}

#poi-categories{display:grid;gap:7px;margin:12px 0}#poi-categories .check{margin:0}.poi-collection{border-top:1px solid #d4e1d6;padding:10px 0}.poi-profile-create{margin-top:8px}.poi-profile-create button,#poi-import{margin-top:8px}#poi-file{font-size:12px;max-width:100%}

.route-choice{display:block;width:100%;text-align:left;margin:6px 0;padding:10px 12px;border:1px solid #c8d8cd;border-radius:10px;background:#f3f7f2;color:#214f3c;cursor:pointer}.route-choice[aria-pressed="true"]{border:2px solid #255eaa;background:#edf3fc}

.routing-source{font-size:13px;padding:10px 12px;border-radius:9px;background:#edf5ed;color:#24533d;margin:10px 0}.routing-warning{background:#fff2db;color:#784814;border:1px solid #e7c897}.traffic-detail{max-width:290px;max-height:360px;overflow:auto}.traffic-detail h3{margin:4px 0 10px}.traffic-detail p{white-space:pre-line;margin:8px 0;font-size:13px}.traffic-detail section+section{border-top:1px solid #dce4de;margin-top:12px;padding-top:8px}
.route-timing{display:block;margin:10px 0 14px;padding:11px 14px;border:1px solid #bfe0ca;border-radius:10px;background:#f0f8f2;color:#18422f;font-size:13px;line-height:1.45}.route-timing strong{display:block;font-size:14px;font-weight:700;color:#103926;margin-bottom:3px}.route-timing span{font-size:12px;color:#3b664d}

.traffic-route-card{margin:14px 0;padding:13px 14px;border:1px solid #c8d8cd;border-radius:12px;background:#f3f7f2;font-size:13px;line-height:1.6}.traffic-route-card>strong{font-size:14px}.traffic-route-card>p{margin:6px 0 10px}.traffic-route-card summary{cursor:pointer;color:#286145;font-size:12px}.traffic-route-card .hint{margin:10px 0 0}.route-choice small{line-height:1.4;margin-top:4px}
.researched-tariffs { margin: .5rem 0; font-size: .9rem; } .researched-tariff { padding: .8rem; margin-top: .5rem; background: #f2f6f1; border-radius: .6rem; overflow-wrap: anywhere; } .researched-tariff p { margin: .35rem 0; line-height: 1.45; } .researched-tariff a { display: inline-block; margin: .3rem .5rem .2rem 0; }

#charging-access{margin-top:24px;min-width:0}
#vehicle-dialog #charging-access>label{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin:18px 0;font-size:13px;line-height:1.5}
#vehicle-dialog #charging-access>label.check{flex-direction:row;align-items:flex-start;gap:10px}
#charging-access textarea,#charging-access input:not([type=checkbox]),#charging-access select{display:block;box-sizing:border-box;width:100%;min-width:0;padding:11px 12px;border:1px solid #cbdcd0;border-radius:9px;background:#fff;color:#234536;font:inherit}
#charging-access textarea{resize:vertical;min-height:76px}
#charging-access input[type=checkbox]{flex:0 0 auto;margin-top:3px}
#charging-access button{padding:10px 14px;border:1px solid #bcd7c6;border-radius:8px;background:#edf5ef;color:#22543f;font:inherit;cursor:pointer}
#charging-access .tariff-card{display:grid;gap:8px;padding:16px}
#charging-access .tariff-card label{display:flex;flex-direction:column;gap:7px;margin:0}
#charging-access .tariff-card button{justify-self:start}

/* Compact route facts and large, explicit click targets. */
.route-facts{list-style:none;padding:0;margin:12px 0;display:grid;gap:10px}
.route-fact{display:grid;gap:5px;width:100%;padding:14px;text-align:left;border:1px solid #c3dacc;border-radius:12px;background:#f5f8f4;color:#193e32;font:inherit;cursor:pointer}
.route-fact span{display:block;font-size:.9rem;line-height:1.45}.route-fact strong{font-size:1rem}
.route-fact:hover,.route-fact:focus-visible,.route-fact.selected{background:#e8f2e9;outline:2px solid #287d57;outline-offset:2px}
.route-fact.jam{border-left:6px solid #d93237}.route-fact.slow{border-left:6px solid #f5c542}
.ev-stop.selected{width:56px;height:56px;font-size:24px;box-shadow:0 0 0 7px #ffffffb0}
.provider-priorities{padding-left:24px}.provider-priorities li{display:flex;gap:6px;align-items:center;padding:7px 0;flex-wrap:wrap}.provider-priorities strong{flex:1}.provider-priorities button{width:auto!important;padding:5px 9px!important}
#charging-priority>input{width:100%;box-sizing:border-box}#charging-priority>label{display:flex;flex-direction:column;margin-top:12px;gap:8px}#charging-priority>button{margin-top:8px}.search-info{font-size:.8rem;margin-top:12px}

/* Route labels stay compact and readable over both imagery and vector maps. */
.map-route-card{width:180px;min-height:88px;padding:9px 12px;border:1px solid #c8d3e7;border-radius:12px;background:#fff;color:#304459;box-shadow:0 3px 14px #10294235;cursor:pointer;text-align:left;font-family:inherit;line-height:1.35;z-index:3;}
.map-route-card::after{content:"";position:absolute;bottom:-7px;left:calc(50% - 6px);width:12px;height:12px;background:inherit;border-right:1px solid #c8d3e7;border-bottom:1px solid #c8d3e7;transform:rotate(45deg);}
.map-route-card .map-route-name{display:block;font-size:10px;font-weight:700;letter-spacing:.025em;color:#607394;margin-bottom:3px;}
.map-route-card strong{font-size:18px;color:#405eaf;margin-right:8px;white-space:nowrap;}
.map-route-card>span:not(.map-route-name){font-size:12px;white-space:nowrap;}
.map-route-card .map-route-charge{display:block;margin-top:3px;color:#49655c;}
.map-route-card.selected{border:2px solid #315bdd;background:#f8faff;z-index:4;}
.map-route-card.selected strong{color:#214dcc;}
.map-route-card:focus-visible{outline:3px solid #173b86;outline-offset:3px;}
.map-route-card:hover{box-shadow:0 4px 18px #10294265;}
.map-route-card[hidden]{display:none;}

/* Independent, touch-friendly overlay switches below the zoom control. */
.map-quick-controls{display:flex;flex-direction:column;align-items:center;gap:9px;clear:both;}
.map-quick-controls button{position:relative;display:grid;place-items:center;width:42px;height:42px;border:2px solid #fff;border-radius:50%;background:#fff;color:#586560;box-shadow:0 2px 8px #102b3940;cursor:pointer;padding:9px;}
.map-quick-controls button svg{width:22px;height:22px;fill:currentColor;}
.map-quick-controls button[aria-pressed="true"]{background:#215740;color:#fff;}
.map-quick-controls button[aria-pressed="false"]::after{content:"";position:absolute;width:29px;height:2px;background:#65716a;transform:rotate(-45deg);box-shadow:0 0 0 1px #fff;}
.map-quick-controls button:focus-visible{outline:3px solid #315bdd;outline-offset:3px;}
.map-quick-controls button:hover{box-shadow:0 2px 10px #102b3970;}

.map-quick-controls button[aria-pressed="true"]:hover{background:#2b6b50;}
.map-quick-controls button[aria-pressed="false"]:hover{background:#eef3ef;}

/* Center the narrower zoom group over the round overlay switches. */
.maplibregl-ctrl-top-right{display:flex;flex-direction:column;align-items:center;}
.maplibregl-ctrl-top-right>.maplibregl-ctrl{float:none;}