:root { --map-accent: #7637cc; --map-accent-soft: #eee5fa; --map-surface: #faf9f6; --map-border: #e6e2eb; --map-control-surface: rgba(250, 249, 246, .88); --map-control-accent-soft: rgba(238, 229, 250, .88); }
:root.dark-mode { --map-accent: #c698ff; --map-accent-soft: #49345f; --map-surface: #29272e; --map-border: #45404d; --map-control-surface: rgba(41, 39, 46, .88); --map-control-accent-soft: rgba(73, 52, 95, .88); }
[hidden] { display: none !important; }
.maps-page { height: 100vh; height: 100dvh; min-height: 320px; display: flex; flex-direction: column; overflow: hidden; }
.maps-page .topbar { flex-shrink: 0; width: 100%; max-width: none; margin: 0; padding: 18px 30px; }
.maps-page .breadcrumb { margin: 0; font: 400 14px/1.4 Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: 0; }
.map-source { color: var(--muted); font-size: 12px; text-decoration: none; }
.map-source span { margin-left: 5px; color: var(--map-accent); }
.map-stage { flex: 1; min-height: 0; position: relative; isolation: isolate; margin: 0 20px 20px; overflow: hidden; border: 1px solid var(--map-border); border-radius: 25px; background: #e5e3df; }
#gregle-map { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; font-family: inherit; }
#gregle-map .leaflet-tile { -webkit-touch-callout: none; }
.map-glass { color: var(--text); background: var(--map-surface); border: 1px solid var(--map-border); box-shadow: 0 6px 24px #0002; }
.map-search { position: absolute; top: 20px; left: 20px; z-index: 500; width: 380px; max-width: calc(100% - 100px); border-radius: 19px; overflow: hidden; background: var(--map-control-surface); }
#map-search-form { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 6px 8px 6px 18px; }
.map-search-icon { flex: 0 0 20px; width: 20px; height: 20px; color: var(--map-accent); }
#map-query { min-width: 0; width: 100%; border: 0; padding: 8px 0; outline: none; background: transparent; color: var(--text); font-size: 14px; }
#map-query::placeholder { color: var(--muted); opacity: 1; }
.map-search:focus-within { border-color: var(--map-accent); }
.map-search-submit { display: grid; place-items: center; flex: 0 0 42px; height: 42px; padding: 10px; background: var(--map-control-accent-soft); color: var(--map-accent); border: 0; border-radius: 13px; }
.map-search-submit svg, .map-icon-button svg { width: 22px; height: 22px; }
.map-search-content { border-top: 1px solid var(--map-border); max-height: min(440px, calc(100dvh - 240px)); overflow-y: auto; overscroll-behavior: contain; }
#map-search-status { margin: 14px 18px 8px; font-size: 12px; color: var(--muted); }
#map-results { list-style: none; margin: 0; padding: 0 8px; }
#map-results button { width: 100%; display: block; text-align: left; padding: 12px 10px; border: 0; border-radius: 12px; background: transparent; color: var(--text); line-height: 1.45; }
#map-results button:hover, #map-results button:focus-visible { background: var(--map-accent-soft); }
#map-results strong { display: block; font-size: 14px; font-weight: 500; }
#map-results span { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
.map-search-fallback { display: inline-block; margin: 8px 18px; color: var(--map-accent); font-size: 13px; }
.map-search-scope { display: block; margin: 8px 18px; padding: 0; border: 0; background: transparent; color: var(--map-accent); font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.map-search-credit { margin: 12px 18px; color: var(--muted); font-size: 10px; }
.map-actions { position: absolute; top: 20px; right: 20px; z-index: 450; display: grid; gap: 9px; }
.map-icon-button { display: grid; place-items: center; width: 46px; height: 46px; padding: 11px; border: 1px solid var(--map-border); border-radius: 15px; background: var(--map-control-surface); box-shadow: none; color: var(--text); }
.map-icon-button:hover, .map-icon-button[aria-busy="true"] { color: var(--map-accent); background: var(--map-control-accent-soft); }
.map-icon-button:focus-visible { outline: 2px solid var(--map-accent); outline-offset: -2px; }
.map-icon-button:disabled { opacity: .5; cursor: default; }
.map-place { position: absolute; bottom: 38px; left: 20px; z-index: 400; width: 330px; max-width: calc(100% - 100px); max-height: calc(100% - 145px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--map-accent) transparent; border-radius: 20px; padding: 18px 20px; }
.place-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 20px; }
.place-kicker { color: var(--map-accent); text-transform: uppercase; letter-spacing: .13em; font-size: 9px; font-weight: 600; }
.map-dismiss { flex-shrink: 0; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; background: transparent; border-radius: 50%; color: var(--muted); font-size: 23px; line-height: 1; }
.map-dismiss:hover { background: var(--soft); }
.map-place h2 { font-family: Montserrat, ui-sans-serif, system-ui, sans-serif; font-size: 23px; font-weight: 400; line-height: 1.3; letter-spacing: -.7px; margin: 8px 0; overflow-wrap: anywhere; }
.map-place p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; max-height: 60px; overflow: auto; }
.place-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--map-border); }
#place-coordinates { color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
#share-pin { padding: 4px 0; border: 0; background: transparent; color: var(--map-accent); font-size: 11px; white-space: nowrap; }
#place-tags { margin-top: 14px; font-size: 12px; line-height: 1.6; }
.place-facts, .place-raw-tags { margin: 0; }
.place-facts dt { color: var(--muted); font-size: 10px; margin-top: 10px; }
.place-facts dd, .place-raw-tags dd { margin: 1px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.place-hours { white-space: normal !important; }
.place-hours table { width: 100%; border-collapse: collapse; font-size: 12px; line-height: 1.6; }
.place-hours th, .place-hours td { padding: 5px 0; vertical-align: top; border-bottom: 1px solid var(--map-border); }
.place-hours tr:last-child :is(th, td) { border-bottom: 0; }
.place-hours th { width: 38%; padding-right: 12px; text-align: left; font-weight: 400; }
.place-hours td { text-align: right; font-variant-numeric: tabular-nums; }
.place-hours-closed td { color: var(--muted); }
.place-hours-exceptions { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--map-border); font-size: 11px; }
.place-hours-exceptions > div { display: flex; justify-content: space-between; gap: 12px; margin-top: 4px; }
.place-hours-exceptions strong { font-weight: 400; color: var(--muted); }
.place-hours-exceptions span { text-align: right; white-space: pre-wrap; }
.map-place .place-hours-note { margin: 4px 0; max-height: none; overflow: visible; font-size: 11px; }
.place-hours-recorded { white-space: pre-wrap; overflow-wrap: anywhere; }
#place-tags a { color: var(--map-accent); text-underline-offset: 3px; }
.map-place .place-tags-status { margin: 10px 0; max-height: none; overflow: visible; font-size: 11px; }
.place-all-tags, .place-choices { border-top: 1px solid var(--map-border); margin-top: 14px; padding-top: 10px; }
#place-tags summary { cursor: pointer; color: var(--map-accent); font-size: 11px; padding: 4px 0; }
.place-raw-tags dt { margin-top: 9px; color: var(--muted); font: 10px/1.5 ui-monospace, monospace; overflow-wrap: anywhere; }
.place-raw-tags dd { font-size: 11px; }
.place-data-source { margin-top: 12px; font-size: 10px; }
.place-choice-list { display: grid; gap: 5px; margin-top: 8px; }
.place-choice-list button { width: 100%; text-align: left; padding: 9px 10px; border: 1px solid var(--map-border); border-radius: 10px; color: var(--text); background: transparent; }
.place-choice-list button:hover, .place-choice-list button[aria-current="true"] { background: var(--map-accent-soft); border-color: var(--map-accent); }
.place-choice-list strong, .place-choice-list span { display: block; font-weight: 400; overflow-wrap: anywhere; }
.place-choice-list span { color: var(--muted); font-size: 10px; margin-top: 3px; }
.place-retry { padding: 6px 0; border: 0; background: transparent; color: var(--map-accent); font-size: 11px; }
#place-tags :is(a, button, summary):focus-visible { outline: 2px solid var(--map-accent); outline-offset: 3px; }
.map-notice { position: absolute; z-index: 600; bottom: 30px; left: 50%; transform: translateX(-50%); max-width: calc(100% - 32px); width: max-content; border-radius: 13px; padding: 10px 16px; font-size: 12px; }
.map-link-copy { position: absolute; z-index: 650; top: 88px; right: 20px; width: 360px; max-width: calc(100% - 40px); padding: 14px 16px; border-radius: 16px; font-size: 12px; }
.map-link-copy > div { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.map-link-copy input { width: 100%; min-width: 0; padding: 8px; border: 1px solid var(--map-border); border-radius: 8px; background: var(--bg); color: var(--text); font-size: 12px; }
.map-report { position: absolute; bottom: 7px; left: 20px; z-index: 400; color: #38363d; background: #faf9f6e8; border-radius: 5px; padding: 1px 6px; font-size: 10px; text-decoration: none; }
.map-stage .leaflet-top.leaflet-right { top: auto; bottom: 54px; right: 10px; }
.map-stage .leaflet-control-zoom { border: 1px solid var(--map-border); border-radius: 15px; overflow: hidden; box-shadow: 0 6px 24px #0002; }
.map-stage .leaflet-control-zoom a { width: 44px; height: 44px; line-height: 44px; background: var(--map-control-surface); color: var(--text); border-color: var(--map-border); font-size: 22px; font-weight: 400; }
.map-stage .leaflet-control-zoom a:hover { background: var(--map-control-accent-soft); color: var(--map-accent); }
.map-stage .leaflet-control-attribution { font: 10px/1.5 Arial, sans-serif; color: #333; background: transparent; padding: 2px 7px; text-shadow: 0 0 2px #fff, 0 1px 4px #fff; pointer-events: none; }
.map-stage .leaflet-control-attribution a { color: #4c257e; pointer-events: auto; }
.map-stage .leaflet-control-attribution a:hover,
.map-stage .leaflet-control-attribution a:focus-visible { background: #ffffffe6; border-radius: 2px; text-shadow: none; }
.map-stage .leaflet-control-attribution a:focus-visible { outline: 2px solid #4c257e; outline-offset: 2px; }
.gregle-map-pin { background: transparent; border: 0; }
.gregle-map-pin svg { width: 38px; height: 46px; filter: drop-shadow(0 3px 4px #0004); }
.map-noscript { position: absolute; z-index: 700; inset: 30% 20px auto; padding: 24px; border-radius: 20px; text-align: center; }
.map-stage:fullscreen { margin: 0; border-radius: 0; width: 100%; height: 100%; }
@media(max-width:600px) {
  .maps-page .topbar { padding: 12px 16px; }
  .maps-page .brand-wrap { gap: 12px; }
  .maps-page .breadcrumb { display: block; padding-left: 12px; }
  .maps-page .brand { font-size: 28px; }
  .maps-page .top-actions { gap: 12px; }
  .map-source { font-size: 0; }
  .map-source span { font-size: 20px; }
  .map-stage { margin: 0 8px 8px; border-radius: 20px; }
  .map-search { top: 12px; left: 12px; width: calc(100% - 24px); max-width: none; border-radius: 16px; }
  #map-search-form { min-height: 56px; gap: 10px; padding-left: 14px; }
  #map-query { font-size: 16px; }
  .map-actions { top: 82px; right: 12px; }
  .map-place { bottom: 49px; left: 12px; max-width: calc(100% - 88px); max-height: calc(100% - 175px); padding: 14px 16px; border-radius: 17px; }
  .map-place:not(.has-pin) { display: none; }
  .map-place h2 { font-size: 20px; }
  .place-bottom { flex-wrap: wrap; gap: 5px; }
  .map-stage .leaflet-top.leaflet-right { right: 2px; bottom: 69px; }
  .map-report { bottom: 25px; left: 12px; }
  .map-link-copy { top: 82px; right: 68px; max-width: calc(100% - 80px); }
  .map-notice { bottom: 16px; }
}
@media(max-height:520px) { .map-place:not(.has-pin) { display: none; } .map-place.has-pin { max-height: calc(100% - 125px); } .map-actions { display: flex; } .map-search-content { max-height: calc(100dvh - 180px); } }

/* Optional map layers use the same Gregle surfaces and controls as the launcher. */
.map-icon-button[aria-expanded="true"] { color: var(--map-accent); background: var(--map-control-accent-soft); }
.map-layers-panel { position: absolute; z-index: 550; top: 20px; right: 80px; width: 300px; max-width: calc(100% - 100px); max-height: calc(100% - 40px); overflow-y: auto; overscroll-behavior: contain; border-radius: 20px; padding: 16px 18px; }
.layers-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.layers-heading h2 { margin: 0; color: var(--text); font: 500 17px/1.4 Montserrat, ui-sans-serif, system-ui, sans-serif; letter-spacing: -.4px; }
.map-layers-panel fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.map-layers-panel legend { margin-bottom: 9px; padding: 0; color: var(--muted); font-size: 11px; }
.map-base-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.map-base-options label { display: flex; align-items: flex-start; gap: 7px; border: 1px solid var(--map-border); border-radius: 12px; padding: 10px 8px; cursor: pointer; }
.map-base-options label:has(input:checked) { background: var(--map-accent-soft); border-color: var(--map-accent); }
.map-base-options label:has(input:focus-visible) { outline: 2px solid var(--map-accent); outline-offset: 2px; }
.map-layers-panel input[type="radio"], .map-layers-panel input[type="checkbox"] { flex-shrink: 0; accent-color: var(--map-accent); cursor: pointer; }
.map-base-options input { margin: 3px 0 0; }
.map-layers-panel strong { display: block; font-size: 12px; font-weight: 500; }
.map-layers-panel small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.map-overlay-options { border-top: 1px solid var(--map-border) !important; margin-top: 15px !important; padding-top: 4px !important; }
.map-overlay-options legend { margin-bottom: 4px; padding-right: 10px; }
.map-overlay-options label { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 0; cursor: pointer; }
.map-overlay-options input { width: 17px; height: 17px; margin: 0; }
.map-live-toggles {
  --gm-muted: var(--muted); --gm-line: var(--map-border); --gm-ink: var(--text); --gm-accent: var(--map-accent);
  --gregle-switch-off-icon: none; --gregle-switch-on-icon: none;
  --gregle-switch-width: 26px; --gregle-switch-height: 14px; --gregle-switch-thumb: 8px; --gregle-switch-travel: 12px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
  margin: 0 0 2px; padding: 0; border-bottom: 1px solid var(--map-border);
}
.map-live-control { display: flex; align-items: center; justify-content: center; min-height: 28px; padding-left: 28px; }
.map-live-toggles .map-live-switch::before { top: -15px; bottom: -15px; left: -32px; }
.map-live-switch > svg { position: absolute; left: -28px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--muted); }
.map-live-switch[aria-checked="true"] > svg { color: var(--map-accent); }
.map-layers-panel .layer-status { margin: 8px 0 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.map-layers-panel .layer-status[data-state="error"] { color: #ae3c3c; }
.dark-mode .map-layers-panel .layer-status[data-state="error"] { color: #ffaaa3; }
.traffic-legend { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; color: var(--muted); font-size: 9px; }
.traffic-legend i { flex: 1; height: 6px; border-radius: 6px; background: linear-gradient(90deg, #ad0000, #fb2d09, #ffc105, #2ae57b); }
.traffic-options, .traffic-key-form > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.traffic-options button, .traffic-key-form button { padding: 5px 0; background: transparent; border: 0; color: var(--map-accent); font-size: 11px; }
.google-traffic-options { margin: 2px 0 8px 12px; padding-left: 12px; border-left: 2px solid var(--map-border); }
.google-traffic-options > p:first-child { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.google-traffic-opacity label { margin-top: 8px; padding: 0; color: var(--muted); font-size: 10px; }
.google-traffic-opacity output { font-variant-numeric: tabular-nums; }
.google-traffic-opacity input[type="range"] { width: 100%; height: 20px; margin: 5px 0 0; }
.traffic-key-form { margin-top: 12px; border-top: 1px solid var(--map-border); padding-top: 14px; }
.traffic-key-form label { display: block; color: var(--text); font-size: 11px; }
#traffic-api-key, #aviation-api-key { width: 100%; margin-top: 8px; padding: 9px 10px; border: 1px solid var(--map-border); border-radius: 10px; background: var(--bg); color: var(--text); font-size: 14px; }
.aviation-reference { margin: 6px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
#aviation-options { margin-bottom: 10px; }
.traffic-key-form p { margin: 8px 0 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.traffic-key-form .traffic-save { padding: 8px 12px; border-radius: 9px; background: var(--map-accent-soft); }
.traffic-key-form > a { display: inline-block; margin-top: 12px; color: var(--map-accent); font-size: 10px; }
.layers-footnote { margin: 15px 0 0; padding-top: 12px; border-top: 1px solid var(--map-border); color: var(--muted); font-size: 9px; line-height: 1.5; }
.map-stage .leaflet-control-attribution { max-width: calc(100% - 12px); text-align: right; overflow-wrap: anywhere; }
.map-stage .leaflet-bottom.leaflet-right { max-width: 100%; }
@media(max-width:600px) {
  .map-layers-panel { top: 82px; right: 68px; width: 300px; max-width: calc(100% - 80px); max-height: calc(100% - 100px); padding: 14px; border-radius: 17px; }
  .map-base-options { grid-template-columns: 1fr; gap: 6px; }
  .map-base-options label { padding: 8px; align-items: center; }
  .map-base-options small { display: inline; margin: 0 0 0 5px; }
  .map-base-options strong { display: inline; }
  .map-base-options input { margin: 0; }
  #traffic-api-key, #aviation-api-key { font-size: 16px; }
  .map-place { bottom: 78px; }
  .map-stage .leaflet-top.leaflet-right { bottom: 88px; }
  .map-report { bottom: 46px; }
}
.drivebc-road-casing { filter: drop-shadow(0 0 1px #17213acc); }
.drivebc-marker { display: grid; place-items: center; border: 3px solid #fff; border-radius: 50%; color: #18212f; background: #ff7a00; box-shadow: 0 0 0 1px #17213a99, 0 2px 8px #0006; font: 700 20px/1 Arial, sans-serif; }
.drivebc-marker-closed { background: #ff315b; }
.drivebc-marker-work { background: #ffc400; }
.drivebc-marker-condition { background: #008cff; }
.drivebc-marker-future { background: #a152ee; color: #fff; }
.drivebc-sublayer label:has(input:disabled) { opacity: .55; cursor: default; }
.drivebc-sign-marker { display: grid; place-items: center; border: 3px solid #fff; border-radius: 8px; box-shadow: 0 0 0 1px #17213a99, 0 2px 8px #0005; }
.drivebc-sign-speed { background: #faf9f6; color: #141414; font: 700 17px/1 Arial, sans-serif; }
.drivebc-sign-messages { background: #242424; color: #ffc400; }
.drivebc-sign-messages svg { width: 26px; height: 24px; }
.drivebc-sign-unavailable { opacity: .65; }
.drivebc-speed-reading { display: inline-block; padding: 10px 16px; border: 2px solid #252525; border-radius: 7px; font-size: 26px; font-weight: 700; }
.drivebc-message-display { margin: 5px 0 12px; padding: 12px; border-radius: 8px; background: #242424; color: #ffd65a; font: 700 13px/1.6 ui-monospace, monospace; text-align: center; white-space: pre-wrap; overflow-wrap: anywhere; }
.drivebc-popup { color: #252525; font: 12px/1.5 Arial, sans-serif; }
.drivebc-popup strong { display: block; font-size: 14px; }
.drivebc-popup p { margin: 8px 0; }
.drivebc-popup .drivebc-meta { color: #65616d; font-size: 10px; }
.drivebc-popup a { color: #7637cc; }
.drivebc-sublayer { margin: 2px 0 8px 12px; padding-left: 12px; border-left: 2px solid var(--map-border); }
.drivebc-camera-marker { display: grid; place-items: center; border: 3px solid #fff; border-radius: 50%; background: #7637cc; color: #fff; box-shadow: 0 0 0 1px #38205099, 0 2px 8px #0005; }
.drivebc-camera-marker svg { width: 22px; height: 22px; }
.drivebc-camera-popup { max-width: 360px; }
.drivebc-camera-popup label { display: block; margin: 10px 0; font-size: 11px; }
.drivebc-camera-popup select { display: block; width: 100%; margin-top: 5px; padding: 7px; border: 1px solid #ccc; border-radius: 8px; background: #faf9f6; color: #252525; font-size: 13px; }
.drivebc-camera-image { display: block; width: 100%; height: auto; border-radius: 8px; background: #eee; }
.drivebc-camera-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.drivebc-camera-actions button { border: 0; border-radius: 8px; background: #eee5fa; color: #7637cc; padding: 8px 10px; font-size: 11px; }
.drivebc-camera-actions button:disabled { opacity: .5; cursor: default; }
.drivebc-ferry-marker { display: grid; place-items: center; border: 3px solid #fff; border-radius: 50%; background: #007eaa; color: #fff; box-shadow: 0 0 0 1px #173d5099, 0 2px 8px #0005; }
.drivebc-ferry-inland { background: #7637cc; }
.drivebc-ferry-marker svg { width: 23px; height: 23px; }
.drivebc-ferry-popup .ferry-subheading { margin-top: 12px; font-size: 12px; }
.drivebc-ferry-popup .ferry-schedule { white-space: pre-wrap; }
.ferry-routes { margin: 8px 0; padding-left: 17px; }
.ferry-routes li { margin: 7px 0; overflow-wrap: anywhere; }
@media(max-width:600px) { .drivebc-camera-popup select { font-size: 16px; } }
.osm-source, .plugshare-source { display: inline-flex; align-items: center; gap: 5px; }
.osm-symbol, .plugshare-symbol { flex-shrink: 0; width: 18px; height: 18px; color: var(--map-accent); }
.map-source.osm-source span, .map-source.plugshare-source span { margin: 0; }
.map-source .osm-label, .map-source .plugshare-label { color: inherit; font-size: 12px; }
.ev-charge-marker { display: grid; place-items: center; border: 3px solid #fff; border-radius: 10px; background: #008752; color: #fff; box-shadow: 0 0 0 1px #164b3699, 0 2px 8px #0005; }
.ev-charge-restricted { background: #685a7d; }
.ev-charge-marker svg { width: 23px; height: 23px; }
.ev-popup { color: #252525; font: 12px/1.5 Arial, sans-serif; overflow-wrap: anywhere; }
.ev-popup .ev-title { display: block; font-size: 15px; }
.ev-popup p { margin: 8px 0; }
.ev-popup .ev-meta { color: #65616d; font-size: 10px; }
.ev-popup a { color: #7637cc; }
.ev-facts { margin: 10px 0; }
.ev-facts dt { margin-top: 8px; color: #65616d; font-size: 10px; }
.ev-facts dd { margin: 1px 0 0; white-space: pre-wrap; }
.ev-facts .place-hours { white-space: normal; }
.ev-popup .place-hours th { color: #252525; }
.ev-popup .place-hours td { color: #252525; }
.ev-popup .place-hours-closed td { color: #65616d; }
.ev-popup .place-hours :is(th, td) { border-color: #e6e2eb; }
.ev-subheading { display: block; margin-top: 12px; font-size: 12px; }
.ev-connectors { padding-left: 17px; margin: 8px 0; }
.ev-connectors li { margin: 4px 0; }
.ev-links { display: grid; gap: 9px; margin-top: 12px; }
@media(max-width:600px) {
  .osm-source .osm-arrow, .osm-source .osm-label, .plugshare-source .plugshare-arrow { display: none; }
  .osm-symbol, .plugshare-symbol { width: 20px; height: 20px; }
  .maps-page .top-actions { gap: 10px; }
}
@media(max-width:360px) { .map-source .plugshare-label { display: none; } }
.ev-sublayer, .tomtom-sublayer { margin: 2px 0 8px 12px; padding-left: 12px; border-left: 2px solid var(--map-border); }
.ev-charge-supercharger { background: #d2192f; box-shadow: 0 0 0 1px #90112599, 0 2px 8px #0005; }
.map-layer-heading { display: flex; align-items: center; gap: 14px; padding: 8px 0; }
.map-options-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex: 1; min-width: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.map-options-toggle > span { min-width: 0; }
.map-options-toggle > svg { flex-shrink: 0; width: 16px; height: 16px; color: var(--map-accent); }
.map-options-toggle[aria-expanded="true"] > svg { transform: rotate(180deg); }
.map-options-toggle:focus-visible { outline: 2px solid var(--map-accent); outline-offset: 4px; border-radius: 3px; }
.embedded-map { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; background: var(--map-surface); }
.embedded-toolbar { flex-shrink: 0; display: flex; align-items: center; gap: 14px; min-height: 54px; padding: 9px 16px; color: var(--text); border-bottom: 1px solid var(--map-border); }
.embedded-toolbar strong { margin-right: auto; font-size: 13px; font-weight: 500; }
.embedded-toolbar a { color: var(--map-accent); font-size: 11px; text-decoration: none; }
.embedded-toolbar button { flex-shrink: 0; border: 1px solid var(--map-border); border-radius: 10px; padding: 8px 10px; color: var(--map-accent); background: var(--map-accent-soft); font: inherit; font-size: 12px; cursor: pointer; }
.embedded-toolbar :is(a, button):focus-visible { outline: 2px solid var(--map-accent); outline-offset: 3px; }
.embedded-frame { position: relative; flex: 1; min-height: 0; }
.embedded-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
#embedded-status { position: absolute; z-index: 1; top: 10px; left: 12px; right: 12px; width: fit-content; margin: 0; padding: 8px 12px; border-radius: 10px; font-size: 12px; pointer-events: none; }
#embedded-zoom-help { position: absolute; z-index: 1; bottom: 60px; left: 12px; max-width: calc(100% - 24px); margin: 0; padding: 8px 12px; border-radius: 10px; font-size: 12px; line-height: 1.5; pointer-events: none; }
.embedded-active #gregle-map { visibility: hidden; }
.embedded-active :is(.map-search, .map-actions, .map-place, .map-report, .map-link-copy, .map-notice, #tomtom-options) { display: none; }
.embedded-active .map-layers-panel { top: 66px; right: 12px; max-width: calc(100% - 24px); max-height: calc(100% - 78px); }
@media(max-width:360px) { .embedded-toolbar { gap: 8px; padding-inline: 10px; } .embedded-toolbar a { font-size: 10px; } }

.aircraft-marker { background: transparent; border: 0; }
.aircraft-marker svg { width: 34px; height: 34px; overflow: visible; fill: #7637cc; stroke: #302642; stroke-width: 1.25; stroke-linejoin: round; filter: drop-shadow(0 0 1px #fff) drop-shadow(0 1px 2px #0008); }
.aircraft-marker:focus-visible { outline: 3px solid #7637cc; outline-offset: 4px; border-radius: 50%; }
.aircraft-small-plane svg { width: 30px; height: 30px; margin: 2px; }
.aircraft-detail { fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; }
.aircraft-popup { color: #252525; font: 12px/1.5 Arial, sans-serif; overflow-wrap: anywhere; }
.aircraft-popup .aircraft-title { display: block; font-size: 16px; }
.aircraft-popup p { margin: 8px 0; }
.aircraft-popup dl { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 12px; margin: 12px 0; }
.aircraft-popup dt { color: #65616d; }
.aircraft-popup dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.aircraft-popup .aircraft-meta { color: #65616d; font-size: 10px; }
.aircraft-popup a { color: #7637cc; }

.aircraft-sources { margin-top: 10px; font-size: 10px; line-height: 1.6; color: var(--muted); }
.aircraft-sources summary { cursor: pointer; color: var(--map-accent); }
.aircraft-sources a { color: var(--map-accent); }
.aircraft-altitude-key { margin: 12px 0; font-size: 10px; line-height: 1.6; color: var(--muted); }
.aircraft-altitude-key strong { display: block; margin-bottom: 6px; color: var(--text); font-weight: 500; }
.aircraft-altitude-bar { height: 9px; border-radius: 6px; }
.aircraft-altitude-labels { display: flex; justify-content: space-between; margin-top: 3px; font-variant-numeric: tabular-nums; }
.aircraft-altitude-key p { display: flex; align-items: center; gap: 6px; margin: 7px 0 0; }
#aircraft-altitude-neutral { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.ev-provider-credit { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--map-border); overflow-wrap: anywhere; font-size: 10px; line-height: 1.6; }
.ev-provider-credit p { margin: 5px 0; }

.vessels-marker { background: transparent; border: 0; }
.vessels-marker svg { width: 26px; height: 32px; overflow: visible; fill: var(--vessel-color, #7b8494); stroke: #fff; stroke-width: 1.7; stroke-linejoin: round; filter: drop-shadow(0 1px 2px #0008); }
.vessels-marker:focus-visible { outline: 3px solid #087e8b; outline-offset: 4px; border-radius: 50%; }
.vessels-popup { color: #252525; font: 12px/1.5 Arial, sans-serif; overflow-wrap: anywhere; }
.vessels-popup .vessels-title { display: block; font-size: 16px; }
.vessels-popup p { margin: 8px 0; }
.vessels-popup dl { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 12px; margin: 12px 0; }
.vessels-popup dt { color: #65616d; }
.vessels-popup dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.vessels-popup .vessels-meta { color: #65616d; font-size: 10px; }
.vessels-popup a { color: #087e8b; }


.vessels-deck { fill: none; stroke: #fff; stroke-width: 1.4; }
.vessels-type-swatch { display: inline-block; flex: 0 0 12px; width: 12px; height: 12px; border: 1px solid #0003; border-radius: 3px; box-shadow: 0 0 0 1px #fff8; }
.vessels-popup-type { display: flex; align-items: center; gap: 7px; }
.vessels-legend { position: absolute; z-index: 560; top: 20px; right: 80px; width: 340px; max-width: calc(100% - 100px); max-height: calc(100% - 40px); overflow-y: auto; overscroll-behavior: contain; padding: 16px 18px; border-radius: 20px; }
.vessels-legend-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin: 0; padding: 0; list-style: none; }
.vessels-legend-list li { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--text); font-size: 11px; line-height: 1.5; }
.vessels-legend > p { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--map-border); color: var(--muted); font-size: 10px; line-height: 1.6; }
@media(max-width:600px) {
  .vessels-legend { top: 82px; right: 68px; width: 300px; max-width: calc(100% - 80px); max-height: calc(100% - 100px); padding: 14px; border-radius: 17px; }
  .vessels-legend-list { grid-template-columns: 1fr; gap: 9px; }
}

/* Daily city averages and petrol station locations. */
.map-fuel-card { position: absolute; z-index: 410; top: 94px; left: 20px; width: 330px; max-width: calc(100% - 100px); padding: 15px 18px; border-radius: 18px; }
.map-fuel-card h2 { margin: 7px 0; font: 500 17px/1.35 Montserrat, sans-serif; letter-spacing: -.3px; }
.fuel-card-reading { display: flex; flex-wrap: wrap; gap: 5px 12px; align-items: baseline; }
.fuel-card-reading strong { font-size: 29px; font-weight: 500; letter-spacing: -.8px; font-variant-numeric: tabular-nums; }
.fuel-card-reading span, .map-fuel-card p { color: var(--muted); font-size: 11px; line-height: 1.5; }
.map-fuel-card p { margin: 6px 0; }
.map-fuel-card a { color: var(--map-accent); font-size: 10px; text-underline-offset: 3px; }
.map-fuel-card #fuel-card-stations { border-top: 1px solid var(--map-border); padding-top: 8px; }
#fuel-pin-action { display: block; margin: 6px 0 10px; border: 0; padding: 0; color: var(--map-accent); background: transparent; font: inherit; font-size: 11px; text-align: left; cursor: pointer; }
#fuel-pin-action:disabled { color: var(--muted); cursor: default; }
.fuel-sublayer select { max-width: 155px; padding: 7px; color: var(--text); background: var(--map-surface); border: 1px solid var(--map-border); border-radius: 8px; font: inherit; font-size: 12px; }
.fuel-station-marker { display: grid; place-items: center; color: #fff; background: #865521; border: 2px solid #fff; border-radius: 10px; box-shadow: 0 2px 5px #0005; }
.fuel-station-marker svg { width: 23px; height: 25px; }
.fuel-average-marker { display: grid; place-items: center; width: max-content; color: #fff; background: #6840a0; border: 2px solid #fff; border-radius: 9px; box-shadow: 0 2px 5px #0005; font: 600 12px/1 system-ui, sans-serif; }
.fuel-popup { min-width: 180px; max-width: 260px; }
.fuel-popup p { margin: 8px 0; }
@media(max-width:600px) { .map-fuel-card { left: 12px; top: 82px; max-width: calc(100% - 80px); padding: 12px 14px; } .fuel-card-reading strong { font-size: 25px; } }

/* Driving directions share the map's light and dark Gregle surfaces. */
.map-directions { position: absolute; z-index: 520; top: 20px; left: 20px; width: 380px; max-width: calc(100% - 100px); max-height: calc(100% - 40px); padding: 18px; border-radius: 20px; overflow-y: auto; overscroll-behavior: contain; font-size: 12px; }
.directions-open :is(.map-search, .map-place, .map-fuel-card) { display: none; }
.embedded-active .map-directions { display: none; }
.map-directions label { display: block; margin: 12px 0 6px; color: var(--muted); }
.directions-field { display: flex; gap: 6px; }
.directions-field input { width: 100%; min-width: 0; padding: 11px 10px; border: 1px solid var(--map-border); border-radius: 10px; color: var(--text); background: var(--bg); font: inherit; font-size: 14px; }
.map-directions button:not(.map-dismiss), .route-pin-actions button { padding: 10px 12px; border: 1px solid var(--map-border); border-radius: 10px; background: var(--map-accent-soft); color: var(--map-accent); font: inherit; cursor: pointer; }
.map-directions button:disabled { opacity: .5; cursor: default; }
#directions-search { margin-top: 10px; }
#directions-status { color: var(--muted); line-height: 1.6; }
#directions-results { list-style: none; padding: 0; margin: 0 0 12px; }
#directions-results button { display: block; width: 100%; margin-bottom: 5px; text-align: left; background: transparent; }
#directions-results strong, #directions-results span { display: block; overflow-wrap: anywhere; }
#directions-results span { margin-top: 4px; font-size: 11px; color: var(--muted); }
.directions-actions, .route-pin-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.route-pin-actions { margin-top: 14px; font-size: 12px; }
#directions-route { background: #7637cc; color: #fff; border-color: #7637cc; }
#directions-handoff { display: grid; gap: 10px; margin: 18px 0; }
.map-directions a { color: var(--map-accent); text-underline-offset: 3px; }
#directions-summary { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--map-border); }
#directions-total { font-size: 20px; font-weight: 500; }
#directions-summary p, .directions-credit { font-size: 10px; color: var(--muted); line-height: 1.6; }
#directions-summary summary { cursor: pointer; padding: 10px 0; color: var(--map-accent); }
#directions-steps { padding-left: 24px; }
#directions-steps li { padding: 9px 0; line-height: 1.5; border-bottom: 1px solid var(--map-border); overflow-wrap: anywhere; }
.directions-marker { display: grid; place-items: center; color: #fff; background: #7637cc; border: 2px solid #fff; border-radius: 50%; font: 600 12px/1 system-ui, sans-serif; box-shadow: 0 2px 8px #0005; }
.map-directions :is(a, button, input, summary):focus-visible, .route-pin-actions button:focus-visible { outline: 2px solid var(--map-accent); outline-offset: 2px; }
@media(max-width:700px) {
  .map-directions { top: auto; bottom: 36px; left: 12px; width: calc(100% - 88px); max-width: none; max-height: 53%; padding: 14px; border-radius: 17px; }
  .directions-field { flex-wrap: wrap; }
  .directions-field input { font-size: 16px; }
}
@media(max-height:520px) and (min-width:701px) { .map-directions { top: 80px; max-height: calc(100% - 100px); } }

/* Mobile panels share a freely resizable drawer. The map remains interactive above it. */
.map-drawer { display: none; }
@media(max-width:700px) {
  .has-mobile-drawer .map-drawer { position: absolute; display: flex; flex-direction: column; z-index: 580; bottom: calc(24px + var(--map-drawer-lift, 0px)); left: 0; right: 0; min-height: 64px; max-height: calc(100% - 100px); border-radius: 22px 22px 0 0; overflow: hidden; box-shadow: 0 -4px 22px #0002; box-sizing: border-box; }
  .map-drawer-bar { display: flex; flex: 0 0 64px; align-items: center; padding: 0 8px 0 16px; gap: 2px; }
  .map-drawer-resize { position: relative; display: flex; flex: 1; min-width: 0; height: 64px; flex-direction: column; justify-content: center; padding-top: 9px; cursor: ns-resize; touch-action: none; user-select: none; -webkit-user-select: none; }
  .map-drawer-grip { position: absolute; width: 38px; height: 4px; top: 8px; left: calc(50% + 40px); border-radius: 4px; background: var(--map-border); }
  #map-drawer-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 500; }
  .map-drawer-hint { font-size: 10px; color: var(--muted); margin-top: 3px; }
  .map-drawer-bar button { display: flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 14px; color: var(--map-accent); background: transparent; line-height: 1; cursor: pointer; }
  .map-drawer-bar button:hover { background: var(--map-accent-soft); }
  .map-drawer-bar svg { display: block; flex: none; width: 20px; height: 20px; }
  .map-drawer.is-compact #map-drawer-collapse svg { transform: rotate(180deg); }
  .map-drawer.is-compact :is(.map-drawer-body, .map-drawer-tabs) { display: none; }
  .map-drawer-tabs { display: flex; flex: 0 0 auto; gap: 6px; padding: 2px 14px 10px; overflow-x: auto; scrollbar-width: thin; }
  .map-drawer-tabs button { flex: 0 0 auto; min-height: 40px; padding: 8px 14px; border: 1px solid var(--map-border); border-radius: 12px; background: transparent; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; }
  .map-drawer-tabs button[aria-pressed="true"] { background: var(--map-accent-soft); color: var(--map-accent); border-color: var(--map-accent); }
  .map-drawer-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scroll-padding: 16px; padding-bottom: 16px; }
  .map-drawer-body > :is(.map-place, .map-search-content, .map-directions, .map-layers-panel, .map-fuel-card, .vessels-legend, .map-link-copy, #map-feature-details) { position: static; display: none; inset: auto; width: auto; max-width: none; max-height: none; overflow: visible; border: 0; border-radius: 0; box-shadow: none; padding: 4px 18px 12px; margin: 0; background: transparent; }
  #map-drawer-body > .drawer-active-panel:not([hidden]) { display: block; }
  .map-drawer-body .place-heading { min-height: 16px; }
  .map-drawer-body :is(#clear-pin, #close-directions, #close-map-layers, #close-vessels-legend, #close-map-link) { display: none; }
  .map-drawer-body .map-place h2 { font-size: 22px; margin-top: 8px; }
  .map-drawer-body .map-place p { max-height: none; overflow: visible; }
  .map-drawer-body :is(button, a, summary) { touch-action: manipulation; }
  .map-drawer :is(button, [role="slider"]):focus-visible { outline: 2px solid var(--map-accent); outline-offset: -3px; }
  .map-drawer-body .map-base-options { grid-template-columns: 1fr 1fr; }
  .map-drawer-body .map-base-options label { min-height: 54px; align-items: flex-start; }
  .map-drawer-body .map-base-options strong { display: block; }
  .map-drawer-body .map-base-options small { display: block; margin: 3px 0 0; }
  .map-drawer-body .map-base-options input { margin-top: 3px; }
  .map-drawer-body .map-overlay-options label { min-height: 44px; }
  .map-drawer-body .directions-field input { font-size: 16px; }
  .map-drawer-body .map-link-copy input { font-size: 16px; }
  .has-mobile-drawer .map-search { top: 12px; left: 12px; width: calc(100% - 24px); max-width: none; }
  .has-mobile-drawer.directions-open .map-search { display: block; }
  .has-mobile-drawer .map-actions { display: flex; flex-wrap: nowrap; top: 82px; left: auto; right: 12px; max-width: calc(100% - 24px); gap: 6px; overflow-x: auto; padding: 2px; scrollbar-width: none; }
  .has-mobile-drawer .map-actions .map-icon-button { width: 42px; height: 44px; flex: 0 0 42px; padding: 10px; border-radius: 14px; }
  .has-mobile-drawer .leaflet-top.leaflet-right { top: 142px; bottom: auto; right: 2px; }
  .has-mobile-drawer .leaflet-control-zoom a { width: 38px; height: 38px; line-height: 38px; }
  .has-mobile-drawer .map-notice { bottom: calc(var(--map-drawer-height, 0px) + 32px); pointer-events: none; }
  .has-mobile-drawer .map-report { bottom: 4px; left: 8px; font-size: 9px; }
  .has-mobile-drawer .leaflet-popup { visibility: hidden; pointer-events: none; }
  #map-feature-details .leaflet-popup-content { width: auto !important; max-height: none !important; overflow: visible; margin: 0; color: var(--text); font: 13px/1.6 ui-sans-serif, system-ui, sans-serif; }
  #map-feature-details .leaflet-popup-content > div { width: auto !important; max-width: none; color: var(--text); }
  #map-feature-details :is(.aircraft-meta, .vessels-meta, .drivebc-meta) { color: var(--muted); }
  #map-feature-details a { color: var(--map-accent); }
  #map-feature-details :is(th, td) { color: var(--text); }
  #map-feature-details :is(.ev-facts dt, .aircraft-popup dt, .vessels-popup dt) { color: var(--muted); }
}

/* Live guidance stays outside the details drawer at every viewport width. */
.directions-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.map-directions .directions-modes button { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; color: var(--text); background: transparent; }
.directions-modes svg { width: 24px; height: 24px; flex-shrink: 0; }
.map-directions .directions-modes button[aria-pressed="true"] { background: var(--map-accent-soft); color: var(--map-accent); border-color: var(--map-accent); }
.map-directions #directions-start { width: 100%; min-height: 52px; font-size: 16px; font-weight: 500; color: #fff; background: #7637cc; border-color: #7637cc; }
.navigation-live { position: absolute; z-index: 650; top: 16px; left: 16px; width: 390px; max-width: calc(100% - 32px); padding: 18px; border-radius: 20px; box-sizing: border-box; }
.navigation-turn { display: flex; align-items: center; gap: 16px; }
#navigation-arrow { flex: 0 0 48px; color: var(--map-accent); font: 500 48px/1 system-ui, sans-serif; text-align: center; }
.navigation-turn > div { min-width: 0; }
#navigation-distance { color: var(--map-accent); font: 600 22px/1.3 system-ui, sans-serif; }
#navigation-instruction { font: 500 22px/1.3 system-ui, sans-serif; margin: 6px 0 0; overflow-wrap: anywhere; }
.navigation-trip { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--map-border); font: 500 15px/1.5 system-ui, sans-serif; font-variant-numeric: tabular-nums; }
#navigation-status { margin: 8px 0 12px; min-height: 18px; color: var(--muted); font: 400 13px/1.5 system-ui, sans-serif; }
.navigation-controls { display: flex; flex-wrap: wrap; gap: 8px; }
.navigation-controls button { flex: 1; min-width: 75px; min-height: 48px; border: 1px solid var(--map-border); border-radius: 12px; background: var(--map-surface); color: var(--text); font: 500 15px/1.2 system-ui, sans-serif; padding: 10px; cursor: pointer; touch-action: manipulation; }
.navigation-controls button[aria-pressed="true"] { background: var(--map-accent-soft); color: var(--map-accent); }
#navigation-stop { background: #7637cc; border-color: #7637cc; color: #fff; }
.navigation-controls button:focus-visible, .map-car-layout:focus-visible { outline: 2px solid var(--map-accent); outline-offset: 2px; }
.navigation-position { display: grid; place-items: center; border: 3px solid #fff; border-radius: 50%; background: #2476e8; color: #fff; box-shadow: 0 0 0 2px #2476e8, 0 2px 6px #0004; font: 24px/1 system-ui, sans-serif; }
.navigation-position span { display: block; }
.navigating :is(.map-search, .map-actions, .map-place, .map-directions, .map-layers-panel, .map-fuel-card, .map-drawer, .map-link-copy, #map-feature-details) { display: none !important; }
.map-car-layout { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; gap: 10px; min-width: 64px; min-height: 56px; padding: 8px 12px; border: 0; border-radius: 14px; color: var(--text); background: transparent; font: 500 13px/1.3 system-ui, sans-serif; cursor: pointer; touch-action: manipulation; }
.map-car-label { white-space: nowrap; }
.map-car-track { position: relative; flex: 0 0 56px; width: 56px; height: 32px; border: 1px solid var(--map-border); border-radius: 999px; background: var(--map-accent-soft); transition: background .18s, border-color .18s; }
.map-car-thumb { position: absolute; top: 3px; left: 3px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #fff; color: #7637cc; box-shadow: 0 1px 4px #0002; transition: transform .18s; }
.map-car-layout svg { width: 17px; height: 17px; }
.map-car-layout:hover .map-car-track { border-color: var(--map-accent); }
.map-car-layout[aria-checked="true"] { color: var(--map-accent); }
.map-car-layout[aria-checked="true"] .map-car-track { background: #7637cc; border-color: #7637cc; }
.map-car-layout[aria-checked="true"] .map-car-thumb { transform: translateX(24px); }
.vehicle-layout .topbar { padding: 10px 20px; }
.vehicle-layout .map-stage { --map-tools-top: 100px; margin: 0 10px 10px; border-radius: 18px; }
.vehicle-layout .map-icon-button { width: 56px; height: 56px; padding: 14px; }
.vehicle-layout .map-icon-button svg { width: 26px; height: 26px; }
.vehicle-layout .map-actions { top: var(--map-tools-top); left: 20px; right: auto; display: flex; flex-wrap: wrap; width: max-content; max-width: calc(100% - 40px); justify-content: flex-start; gap: 8px; }
.vehicle-layout .map-stage .leaflet-top.leaflet-right { top: calc(var(--map-tools-top) + var(--map-tools-height, 56px) + 12px); left: 20px; right: auto; bottom: auto; }
.vehicle-layout .leaflet-control-zoom { display: flex; float: none; margin: 0; }
.vehicle-layout .leaflet-control-zoom a { border-radius: 0; }
.vehicle-layout .leaflet-control-zoom .leaflet-control-zoom-in { border-bottom: 0; border-right: 1px solid var(--map-border); }
.vehicle-layout .directions-open .map-search { display: block; }
.vehicle-layout .map-search-submit { flex-basis: 50px; height: 50px; }
.vehicle-layout #map-search-form { min-height: 68px; }
.vehicle-layout #map-query { font-size: 18px; }
.vehicle-layout :is(.map-directions, .map-layers-panel) { font-size: 16px; }
.vehicle-layout :is(.map-directions, .map-layers-panel) :is(button:not([role="switch"]), input:not([type="checkbox"]):not([type="radio"]), summary, a) { min-height: 48px; touch-action: manipulation; }
.vehicle-layout .map-live-toggles { --gregle-switch-width: 52px; --gregle-switch-height: 30px; --gregle-switch-thumb: 22px; --gregle-switch-travel: 22px; --gm-line: var(--map-accent-soft); }
.vehicle-layout .map-live-control { min-height: 56px; padding-left: 32px; }
.vehicle-layout .map-live-switch > svg { width: 22px; height: 22px; left: -30px; }
.vehicle-layout .map-layers-panel input:is([type="checkbox"], [type="radio"]) { width: 24px; height: 24px; min-height: 24px; }
:is(.map-layer-heading, .map-layer-row) > .map-layer-check { display: contents; }
.vehicle-layout :is(.map-layer-heading, .map-layer-row) > .map-layer-check { display: grid; place-items: center; justify-content: center; gap: 0; flex: 0 0 48px; width: 48px; height: 48px; min-height: 48px; margin: 0; padding: 0; }
.vehicle-layout .directions-field { flex-wrap: wrap; }
.vehicle-layout .directions-field input { flex: 1 1 160px; font-size: 18px; }
.vehicle-layout .map-directions :is(label, #directions-status) { font-size: 15px; }
.vehicle-layout .map-layers-panel :is(strong, legend) { font-size: 15px; }
.vehicle-layout .map-layers-panel :is(small, .layer-status) { font-size: 12px; }
.vehicle-layout .map-base-options label { min-height: 60px; }
.vehicle-layout .map-overlay-options label { min-height: 52px; }
.vehicle-layout .map-dismiss { width: 48px; height: 48px; }
.vehicle-layout .leaflet-control-zoom a { width: 52px; height: 52px; line-height: 52px; }
.vehicle-layout .navigation-controls button { min-height: 56px; font-size: 17px; }
.vehicle-layout #navigation-instruction { font-size: 25px; }
@media (min-width: 701px) and (max-width: 1100px) {
  .map-directions { width: 340px; }
  .vehicle-layout .map-directions { width: 330px; }
  .vehicle-layout .map-search { width: 340px; }
  .vehicle-layout .top-actions { gap: 12px; }
  .vehicle-layout .map-source :is(.osm-label, .plugshare-label, .osm-arrow, .plugshare-arrow) { display: none; }
}
@media (max-width: 700px) {
  .maps-page .topbar { gap: 10px; }
  .maps-page .top-actions { min-width: 0; gap: 10px; }
  .map-source :is(.osm-label, .plugshare-label, .osm-arrow, .plugshare-arrow) { display: none; }
  .map-car-label { display: none; }
  .map-car-layout { padding: 4px; }
  .navigation-live { top: 10px; left: 10px; width: calc(100% - 20px); max-width: none; padding: 14px; }
  #navigation-instruction { font-size: 21px; }
  .vehicle-layout .topbar { padding: 8px 12px; }
  .vehicle-layout .brand { font-size: 28px; }
  .vehicle-layout .top-actions { gap: 10px; }
  .vehicle-layout .map-stage { margin: 0 6px 6px; }
  .vehicle-layout .has-mobile-drawer { --map-tools-top: 94px; }
  .vehicle-layout .has-mobile-drawer .map-actions { top: 94px; left: 12px; right: auto; max-width: calc(100% - 24px); flex-wrap: wrap; gap: 8px; overflow: visible; }
  .vehicle-layout .has-mobile-drawer .map-actions .map-icon-button { flex-basis: 52px; width: 52px; height: 52px; }
  .vehicle-layout .has-mobile-drawer .leaflet-top.leaflet-right { left: 12px; right: auto; }
  .vehicle-layout .map-drawer-body { padding-bottom: 24px; }
  .vehicle-layout .map-drawer-bar button { width: 52px; height: 52px; flex-basis: 52px; }
  .vehicle-layout .map-drawer-tabs button { min-height: 48px; font-size: 15px; }
  .vehicle-layout .map-drawer-body .map-base-options label { min-height: 68px; }
}
@media (max-height: 560px) and (min-width: 701px) {
  .vehicle-layout .topbar { padding-top: 4px; padding-bottom: 4px; }
  .vehicle-layout .map-directions { top: 12px; max-height: calc(100% - 24px); }
  .navigation-live { top: 10px; left: 10px; padding: 12px; }
  .navigation-trip { margin-top: 10px; padding-top: 8px; }
}
@media (min-width: 701px) {
  .vehicle-layout .map-stage:not(.embedded-active) > :is(.map-directions, .map-layers-panel, .map-place, .map-fuel-card, .map-link-copy, .vessels-legend) { top: calc(var(--map-tools-top) + var(--map-tools-height, 56px) + 12px); left: 140px; right: auto; bottom: auto; max-width: calc(100% - 160px); max-height: calc(100% - var(--map-tools-top) - var(--map-tools-height, 56px) - 32px); overflow-y: auto; }
}
.vehicle-layout .map-stage.navigating .leaflet-top.leaflet-right { top: auto; bottom: 20px; }
.car-layers-zoom:not([hidden]) { display: block; flex: 0 0 auto; }
.vehicle-layout #map-layers-panel > .layers-heading { position: sticky; top: -16px; z-index: 2; gap: 10px; background: var(--map-surface); }
.vehicle-layout #map-layers-panel > .layers-heading h2 { margin-right: auto; }
.vehicle-layout .map-stage.car-layers-zoom-docked > #map-layers-panel { left: 20px; width: 380px; max-width: calc(100% - 40px); }
@media (min-width: 701px) and (max-width: 1100px) { .vehicle-layout .map-stage.car-layers-zoom-docked > #map-layers-panel { width: 340px; } }
@media (max-width: 700px) { .vehicle-layout #map-layers-panel > .layers-heading { top: -4px; } }
@media (max-width: 700px) {
  .vehicle-layout .car-layers-zoom-docked #map-layers-panel > .layers-heading { display: none; }
  .vehicle-layout .car-layers-zoom-docked .map-drawer-hint { display: none; }
  .vehicle-layout .car-layers-zoom-docked .map-drawer-grip { left: calc(50% - 19px); }
}
@media (prefers-reduced-motion: reduce) { .navigation-live, .navigation-position { transition: none; } }
@media (prefers-reduced-motion: reduce) { .map-car-track, .map-car-thumb { transition: none; } }
@media (max-width: 360px) {
  .vehicle-layout .has-mobile-drawer .map-actions { max-width: 176px; }
}
@media (max-width: 360px) { .maps-page .breadcrumb { display: none; } }