.cpmx-explorer{position:relative;width:100%;height:var(--cpmx-height,720px);min-height:420px;overflow:hidden;background:#111;color:#fff;font-family:inherit;isolation:isolate}
.cpmx-explorer *{box-sizing:border-box}.cpmx-map{position:absolute;inset:0}.cpmx-loading{position:absolute;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;gap:12px;background:#101316;color:#fff;transition:opacity .4s ease}.cpmx-loading.is-hidden{opacity:0;pointer-events:none}.cpmx-loading span{width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.25);border-top-color:#fff;animation:cpmxSpin .8s linear infinite}@keyframes cpmxSpin{to{transform:rotate(360deg)}}
.cpmx-topbar{position:absolute;z-index:10;left:18px;right:18px;top:18px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.cpmx-project-home,.cpmx-band-indicator,.cpmx-category-strip,.cpmx-radius-strip,.cpmx-panel,.cpmx-controls-left>*{pointer-events:auto}.cpmx-project-home{appearance:none;border:1px solid rgba(255,255,255,.2);background:rgba(12,15,18,.82);backdrop-filter:blur(15px);color:#fff;border-radius:999px;padding:9px 14px 9px 10px;display:flex;align-items:center;gap:9px;font-weight:750;letter-spacing:.08em;font-size:11px;cursor:pointer;box-shadow:0 8px 26px rgba(0,0,0,.18)}.cpmx-home-dot{width:11px;height:11px;border-radius:50%;background:var(--cpmx-accent,#ff6a00);box-shadow:0 0 0 5px color-mix(in srgb,var(--cpmx-accent,#ff6a00) 20%,transparent)}.cpmx-band-indicator{background:rgba(12,15,18,.75);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:9px 13px;font-size:10px;letter-spacing:.12em;font-weight:800;color:rgba(255,255,255,.9)}
.cpmx-category-strip{position:absolute;z-index:10;left:50%;top:18px;transform:translateX(-50%);display:flex;gap:6px;max-width:58%;overflow-x:auto;scrollbar-width:none}.cpmx-category-strip::-webkit-scrollbar{display:none}.cpmx-chip{appearance:none;border:1px solid rgba(255,255,255,.14);background:rgba(12,15,18,.72);backdrop-filter:blur(14px);color:rgba(255,255,255,.8);border-radius:999px;padding:9px 12px;white-space:nowrap;font-size:11px;font-weight:650;cursor:pointer;transition:.2s ease}.cpmx-chip:hover,.cpmx-chip.is-active{background:var(--cpmx-accent,#ff6a00);border-color:transparent;color:#fff;transform:translateY(-1px)}
.cpmx-radius-strip{position:absolute;z-index:10;left:18px;bottom:18px;display:flex;gap:6px;flex-wrap:wrap}.cpmx-radius-btn{appearance:none;border:1px solid rgba(255,255,255,.14);background:rgba(12,15,18,.78);backdrop-filter:blur(14px);color:#fff;border-radius:10px;padding:9px 11px;font-weight:750;font-size:11px;cursor:pointer}.cpmx-radius-btn.is-active{background:#fff;color:#111}.cpmx-radius-btn small{display:block;font-size:8px;opacity:.65;letter-spacing:.08em;margin-top:1px}
.cpmx-controls-left{position:absolute;z-index:10;right:18px;bottom:18px;display:flex;gap:7px;flex-direction:column}.cpmx-control{width:42px;height:42px;border:1px solid rgba(255,255,255,.14);background:rgba(12,15,18,.78);backdrop-filter:blur(14px);border-radius:11px;color:#fff;display:grid;place-items:center;cursor:pointer;font-size:18px}.cpmx-control:hover{background:var(--cpmx-accent,#ff6a00)}
.cpmx-panel{position:absolute;z-index:15;top:0;right:0;width:min(410px,92%);height:100%;padding:72px 28px 28px;background:var(--cpmx-panel,rgba(10,13,16,.94));color:var(--cpmx-panel-text,#fff);backdrop-filter:blur(24px);transform:translateX(105%);transition:transform .45s cubic-bezier(.2,.75,.25,1);overflow-y:auto;box-shadow:-18px 0 50px rgba(0,0,0,.25)}.cpmx-panel.is-open{transform:translateX(0)}.cpmx-panel-close{position:absolute;right:20px;top:20px;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:inherit;font-size:24px;cursor:pointer}.cpmx-panel-kicker{text-transform:uppercase;letter-spacing:.16em;font-weight:800;font-size:10px;color:var(--cpmx-accent,#ff6a00);margin-bottom:9px}.cpmx-panel-title{font-size:31px;line-height:1.06;margin:0 0 18px;font-weight:800;color:inherit}.cpmx-panel-metrics{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 20px}.cpmx-metric{padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.07);min-width:92px}.cpmx-metric strong{display:block;font-size:18px}.cpmx-metric span{display:block;font-size:9px;letter-spacing:.09em;text-transform:uppercase;opacity:.65;margin-top:2px}.cpmx-panel-media img{display:block;width:100%;border-radius:12px;margin:0 0 18px;aspect-ratio:16/9;object-fit:cover}.cpmx-panel-copy{font-size:14px;line-height:1.65;color:color-mix(in srgb,currentColor 78%,transparent)}.cpmx-panel-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}.cpmx-panel-action{border:0;border-radius:9px;background:var(--cpmx-accent,#ff6a00);color:#fff;padding:11px 14px;font-weight:750;cursor:pointer;text-decoration:none}.cpmx-panel-action.secondary{background:rgba(255,255,255,.1)}
.cpmx-marker{--marker-accent:var(--cpmx-accent,#ff6a00);position:relative;display:flex;align-items:center;gap:7px;transform:translate(-50%,-100%);cursor:pointer;filter:drop-shadow(0 5px 10px rgba(0,0,0,.24));transition:opacity .25s ease,transform .25s ease}.cpmx-marker:hover,.cpmx-marker.is-active{z-index:20!important;transform:translate(-50%,-100%) scale(1.07)}.cpmx-marker-pin{width:34px;height:34px;border-radius:10px 10px 10px 3px;transform:rotate(-45deg);display:grid;place-items:center;background:rgba(16,20,24,.92);border:1px solid color-mix(in srgb,var(--marker-accent) 65%,white 8%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}.cpmx-marker-icon{width:18px;height:18px;transform:rotate(45deg);color:#fff}.cpmx-marker-label{background:rgba(15,18,22,.88);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.12);color:#fff;border-radius:8px;padding:6px 9px;white-space:nowrap;font-weight:700;font-size:10px;letter-spacing:.01em}.cpmx-marker.is-hero .cpmx-marker-pin{width:43px;height:43px;background:var(--marker-accent);border-color:rgba(255,255,255,.55)}.cpmx-marker.is-hero .cpmx-marker-label{font-size:11px;padding:8px 10px}.cpmx-marker.is-hidden{opacity:0;pointer-events:none}.cpmx-site-marker{position:relative;width:34px;height:58px;transform:translate(-50%,-88%);pointer-events:none}.cpmx-site-beacon{position:absolute;left:50%;bottom:0;width:16px;height:16px;border-radius:50%;background:var(--cpmx-accent,#ff6a00);transform:translateX(-50%);box-shadow:0 0 0 8px color-mix(in srgb,var(--cpmx-accent,#ff6a00) 22%,transparent),0 0 30px color-mix(in srgb,var(--cpmx-accent,#ff6a00) 75%,transparent)}.cpmx-site-beam{position:absolute;bottom:9px;left:50%;width:2px;height:47px;background:linear-gradient(to top,var(--cpmx-accent,#ff6a00),transparent);transform:translateX(-50%)}
.cpmx-toast{position:absolute;z-index:20;left:50%;bottom:70px;transform:translate(-50%,20px);background:#111;color:#fff;padding:9px 12px;border-radius:8px;font-size:11px;opacity:0;pointer-events:none;transition:.25s}.cpmx-toast.is-on{opacity:1;transform:translate(-50%,0)}
.cpmx-explorer .maplibregl-ctrl-bottom-right,.cpmx-explorer .maplibregl-ctrl-bottom-left{font-size:9px}.cpmx-explorer .maplibregl-ctrl-attrib{background:rgba(255,255,255,.72)}
/* (phone layout: explorer width <= 767px, class set by script) */.cpmx-explorer.cpmx-compact{height:max(520px,var(--cpmx-height,620px))}.cpmx-explorer.cpmx-compact .cpmx-category-strip{top:auto;bottom:76px;left:12px;right:12px;transform:none;max-width:none}.cpmx-explorer.cpmx-compact .cpmx-topbar{left:12px;right:12px;top:12px}.cpmx-explorer.cpmx-compact .cpmx-band-indicator{display:none}.cpmx-explorer.cpmx-compact .cpmx-radius-strip{left:12px;right:66px;bottom:14px;flex-wrap:nowrap;overflow-x:auto}.cpmx-explorer.cpmx-compact .cpmx-controls-left{right:12px;bottom:13px}.cpmx-explorer.cpmx-compact .cpmx-panel{top:auto;bottom:0;height:auto;max-height:74%;width:100%;padding:56px 20px 24px;transform:translateY(105%);border-radius:18px 18px 0 0}.cpmx-explorer.cpmx-compact .cpmx-panel.is-open{transform:translateY(0)}.cpmx-explorer.cpmx-compact .cpmx-panel-title{font-size:26px}.cpmx-explorer.cpmx-compact .cpmx-marker-label{display:none}.cpmx-explorer.cpmx-compact .cpmx-marker.is-hero .cpmx-marker-label{display:block;max-width:150px;overflow:hidden;text-overflow:ellipsis}
@media(prefers-reduced-motion:reduce){.cpmx-explorer *{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}

/* ============================================================
   CPM EXPLORER 1.2.0 STABILITY / VISIBILITY PASS
   ============================================================ */

.cpmx-marker {
  z-index: 4;
}

.cpmx-marker.is-featured {
  z-index: 8;
}

.cpmx-marker.is-hero {
  z-index: 12;
}

.cpmx-marker-label {
  opacity: 0 !important;
  pointer-events: none;
  transform: translateY(4px);
  transition:
    opacity .2s ease,
    transform .2s ease;
}

.cpmx-marker.is-label-visible .cpmx-marker-label,
.cpmx-marker:hover .cpmx-marker-label,
.cpmx-marker.is-active .cpmx-marker-label {
  opacity: 1 !important;
  transform: translateY(0);
}

.cpmx-marker.is-featured .cpmx-marker-pin {
  box-shadow:
    0 0 0 5px rgba(255,255,255,.12),
    0 8px 26px rgba(0,0,0,.28);
}

.cpmx-marker.is-hero .cpmx-marker-pin {
  box-shadow:
    0 0 0 7px rgba(255,255,255,.15),
    0 10px 36px rgba(0,0,0,.34);
}

.cpmx-marker.is-hidden {
  display: none !important;
}

.cpmx-glass-enabled .cpmx-panel,
.cpmx-glass-enabled .cpmx-category-strip,
.cpmx-glass-enabled .cpmx-radius-strip {
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* (phone layout: explorer width <= 767px, class set by script) */
  .cpmx-explorer.cpmx-compact .cpmx-marker:not(.is-featured):not(.is-hero) .cpmx-marker-label{
    display: none;
  }


/* ==========================================================
   CPM EXPLORER 1.2.1 PROJECT HERO
   ========================================================== */

.cpmx-site-marker {
  width: 76px;
  height: 94px;
  transform: translate(-50%,-88%);
  overflow: visible;
  z-index: 30;
}

.cpmx-site-beacon {
  width: 19px;
  height: 19px;
  border: 3px solid #fff;
  box-shadow:
    0 0 0 9px
      color-mix(
        in srgb,
        var(--cpmx-accent,#ff6a00) 24%,
        transparent
      ),
    0 0 42px
      color-mix(
        in srgb,
        var(--cpmx-accent,#ff6a00) 90%,
        transparent
      );
}

.cpmx-site-beam {
  width: 3px;
  height: 72px;
  bottom: 8px;
}

.cpmx-site-label {
  position:absolute;
  left:50%;
  bottom:79px;
  transform:translateX(-50%);
  padding:7px 10px;
  border-radius:7px;
  background:#101418;
  border:1px solid rgba(255,255,255,.25);
  box-shadow:0 9px 28px rgba(0,0,0,.32);
  color:#fff;
  font-size:10px;
  line-height:1;
  font-weight:900;
  letter-spacing:.12em;
  white-space:nowrap;
}

@keyframes cpmxProjectPulse {
  0%,100% {
    box-shadow:
      0 0 0 8px rgba(255,255,255,.10),
      0 0 26px
        color-mix(
          in srgb,
          var(--cpmx-accent,#ff6a00) 65%,
          transparent
        );
  }

  50% {
    box-shadow:
      0 0 0 15px rgba(255,255,255,.03),
      0 0 45px
        color-mix(
          in srgb,
          var(--cpmx-accent,#ff6a00) 100%,
          transparent
        );
  }
}

.cpmx-site-beacon {
  animation:
    cpmxProjectPulse 2.1s ease-in-out infinite;
}


/* =========================================================
   CPM EXPLORER 1.3.0
   Roads / travel / perimeter / project model
   ========================================================= */

/* Always-readable active location labels */

.cpmx-marker.is-label-visible .cpmx-marker-label {
  opacity:1 !important;
  transform:none !important;
}

.cpmx-marker-label {
  opacity:1;
}

/* ROAD MODE */

.cpmx-explorer.is-roads-mode .cpmx-radius-strip {
  opacity:.45;
}

.cpmx-explorer.is-roads-mode .cpmx-travel-pane {
  opacity:.25;
  pointer-events:none;
}

.cpmx-explorer.is-roads-mode .cpmx-marker {
  opacity:0 !important;
  pointer-events:none !important;
}

/* TRAVEL TIMES */

.cpmx-travel-pane {
  position:absolute;
  z-index:14;
  left:18px;
  top:74px;
  width:min(292px,calc(100% - 36px));
  max-height:calc(100% - 190px);
  overflow:hidden;

  background:rgba(11,14,17,.88);
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;

  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);

  color:#fff;

  box-shadow:
    0 18px 48px rgba(0,0,0,.24);

  opacity:0;
  transform:translateX(-12px);
  pointer-events:none;

  transition:
    opacity .25s ease,
    transform .25s ease;
}

.cpmx-travel-pane.is-visible {
  opacity:1;
  transform:none;
  pointer-events:auto;
}

.cpmx-travel-head {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:12px;

  padding:13px 14px 10px;

  border-bottom:
    1px solid rgba(255,255,255,.09);
}

.cpmx-travel-head span {
  font-size:10px;
  font-weight:900;
  letter-spacing:.15em;
}

.cpmx-travel-head small {
  font-size:9px;
  opacity:.55;
}

.cpmx-travel-list {
  overflow-y:auto;
  max-height:360px;
}

.cpmx-travel-row {
  width:100%;
  appearance:none;
  border:0;
  border-bottom:
    1px solid rgba(255,255,255,.07);
  background:transparent;
  color:#fff;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  padding:10px 12px;

  cursor:pointer;
  text-align:left;
}

.cpmx-travel-row:hover,
.cpmx-travel-row.is-active {
  background:
    color-mix(
      in srgb,
      var(--cpmx-accent,#ff6a00) 22%,
      transparent
    );
}

.cpmx-travel-row span {
  min-width:0;
}

.cpmx-travel-row strong {
  display:block;
  font-size:11px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.cpmx-travel-row small {
  display:block;
  margin-top:2px;
  opacity:.55;
  font-size:9px;
}

.cpmx-travel-row>b {
  white-space:nowrap;
  font-size:13px;
  color:
    var(--cpmx-accent,#ff6a00);
}

/* PERIMETER DESTINATIONS */

.cpmx-edge-marker {
  appearance:none;
  border:0;
  background:transparent;
  color:#fff;

  display:flex;
  align-items:center;
  gap:7px;

  cursor:pointer;

  filter:
    drop-shadow(
      0 6px 12px rgba(0,0,0,.28)
    );
}

.cpmx-edge-arrow {
  width:31px;
  height:31px;
  border-radius:50%;

  display:grid;
  place-items:center;

  background:
    var(--cpmx-accent,#ff6a00);

  border:
    2px solid #fff;

  font-size:13px;

  transform:
    rotate(var(--edge-bearing));

  box-shadow:
    0 0 0 5px
    color-mix(
      in srgb,
      var(--cpmx-accent,#ff6a00) 20%,
      transparent
    );
}

.cpmx-edge-copy {
  display:block;

  background:
    rgba(10,13,16,.9);

  border:
    1px solid rgba(255,255,255,.14);

  border-radius:8px;

  padding:6px 8px;

  text-align:left;

  backdrop-filter:blur(12px);
}

.cpmx-edge-copy strong {
  display:block;
  max-width:170px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  font-size:10px;
}

.cpmx-edge-copy small {
  display:block;
  margin-top:2px;
  font-size:8px;
  opacity:.62;
}

/* PROJECT LABEL */

.cpmx-site-label {
  position:absolute;
  left:50%;
  bottom:76px;

  transform:translateX(-50%);

  padding:7px 10px;

  border-radius:7px;

  background:#101418;
  border:
    1px solid rgba(255,255,255,.24);

  box-shadow:
    0 8px 28px rgba(0,0,0,.3);

  font-size:10px;
  line-height:1;
  font-weight:900;
  letter-spacing:.12em;

  white-space:nowrap;
}

/* MOBILE */

/* (phone layout: explorer width <= 767px, class set by script) */

  .cpmx-explorer.cpmx-compact .cpmx-travel-pane{
    top:60px;
    left:12px;
    width:min(270px,calc(100% - 24px));
    max-height:180px;
  }

  .cpmx-explorer.cpmx-compact .cpmx-travel-list{
    max-height:135px;
  }

  .cpmx-explorer.cpmx-compact .cpmx-edge-copy{
    display:none;
  }

  .cpmx-explorer.cpmx-compact .cpmx-edge-arrow{
    width:28px;
    height:28px;
  }




/* =========================================================
   CPM EXPLORER 1.3.6 Core map
   MapLibre positions marker elements with an inline transform on every frame, so the
   marker roots must not transition (or set) transform or they trail behind the map.
   Hover/active emphasis moves to the inner pin instead.
========================================================= */
.cpmx-marker,
.cpmx-marker:hover,
.cpmx-marker.is-active{
  transition:opacity .25s ease;
}
.cpmx-marker-pin{
  transition:transform .2s ease;
}
.cpmx-marker:hover .cpmx-marker-pin,
.cpmx-marker.is-active .cpmx-marker-pin{
  transform:rotate(-45deg) scale(1.08);
}

/* =========================================================
   CPM EXPLORER 1.3.7 Radius bands
   Ring labels sit on the south edge of each ring. They are MapLibre markers, so only
   opacity may transition (see the 1.3.6 note on marker transforms).
========================================================= */
.cpmx-ring-label{
  pointer-events:none;
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
  line-height:1;
  color:#fff;
  background:rgba(12,15,18,.6);
  border:1px solid rgba(255,255,255,.2);
  border-radius:999px;
  padding:4px 8px;
  white-space:nowrap;
  opacity:.65;
  transition:opacity .3s ease;
}
.cpmx-ring-label.is-active{
  opacity:1;
  background:var(--cpmx-accent,#ff6a00);
  border-color:rgba(255,255,255,.55);
}
.cpmx-ring-label.is-hidden,
.cpmx-explorer.is-roads-mode .cpmx-ring-label{
  opacity:0;
}

/* =========================================================
   CPM EXPLORER 1.4.0 Marker positioning
   MapLibre positions markers absolutely at the map origin and then translates them.
   Earlier rules set position:relative on marker roots, which put every marker into
   normal flow (stacked under the previous one, hidden ones included) before the
   translate, so markers drifted further from their true location the more you zoomed
   out. Keep MapLibre's absolute positioning on every marker root.
========================================================= */
.cpmx-explorer .maplibregl-marker.cpmx-marker,
.cpmx-explorer .maplibregl-marker.cpmx-site-marker,
.cpmx-explorer .maplibregl-marker{
  position:absolute;
}

/* Places outside the selected ring that are still on screen: smaller and quieter,
   label on hover. Places inside the ring keep full emphasis. */
.cpmx-marker.is-outside{
  opacity:.72;
}
.cpmx-marker.is-outside .cpmx-marker-pin{
  transform:rotate(-45deg) scale(.78);
}
.cpmx-marker.is-outside:hover{
  opacity:1;
}
/* Edge arrows are aimed in screen space by the script (0deg = pointing right). */
.cpmx-edge-arrow{
  transform:rotate(var(--edge-bearing,0deg));
}

/* =========================================================
   CPM EXPLORER 1.4.1 Road explorer + top bar
========================================================= */
/* Places stay visible and clickable in road mode (overrides the 1.3.0 rule that hid
   every marker there). The script still hides markers it doesn't want via .is-hidden. */
.cpmx-explorer.is-roads-mode .cpmx-marker:not(.is-hidden){
  opacity:1 !important;
  pointer-events:auto !important;
}

/* Top bar: project on the left; band readout and Road mode on the right. */
.cpmx-topbar{justify-content:flex-start;gap:8px}
.cpmx-topbar .cpmx-band-indicator{margin-left:auto}

.cpmx-road-mode-btn{
  pointer-events:auto;
  appearance:none;
  display:flex;
  align-items:center;
  gap:9px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(12,15,18,.86);
  backdrop-filter:blur(15px);
  -webkit-backdrop-filter:blur(15px);
  color:#fff;
  border-radius:999px;
  padding:10px 18px 10px 12px;
  font:inherit;
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
  box-shadow:0 10px 28px rgba(0,0,0,.25);
  transition:background .25s ease,box-shadow .25s ease;
}
.cpmx-road-mode-btn:hover{background:rgba(24,29,34,.94)}
.cpmx-road-mode-icon{
  display:grid;
  place-items:center;
  width:26px;
  height:26px;
  border-radius:50%;
  background:var(--cpmx-accent,#ff6a00);
}
.cpmx-road-mode-icon svg{width:15px;height:15px}
.cpmx-road-mode-btn.is-active{
  background:var(--cpmx-accent,#ff6a00);
  border-color:rgba(255,255,255,.6);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--cpmx-accent,#ff6a00) 30%,transparent),0 10px 28px rgba(0,0,0,.35);
}
.cpmx-road-mode-btn.is-active .cpmx-road-mode-icon{background:rgba(0,0,0,.25)}

/* Edge arrow drawn as SVG (font arrow glyphs differ between platforms). */
.cpmx-edge-arrow svg{width:14px;height:14px;color:#fff;display:block}

/* (phone layout: explorer width <= 767px, class set by script) */
  .cpmx-explorer.cpmx-compact .cpmx-road-mode-btn{padding:8px 12px 8px 8px;font-size:10px}
  .cpmx-explorer.cpmx-compact .cpmx-road-mode-btn span:last-child{display:none}
  .cpmx-explorer.cpmx-compact .cpmx-topbar .cpmx-road-mode-btn{margin-left:auto}


/* =========================================================
   CPM EXPLORER 1.4.2 Cities and suburbs on the rings
   Ring destinations always show their name; cities are larger and in the accent colour.
========================================================= */
.cpmx-edge-marker.is-place .cpmx-edge-copy{
  display:block !important;
}
.cpmx-edge-marker.is-place .cpmx-edge-copy strong{
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:10px;
}
.cpmx-edge-marker.is-place .cpmx-edge-arrow{
  width:24px;
  height:24px;
  background:#fff;
  color:var(--cpmx-accent,#ff6a00);
  border-color:var(--cpmx-accent,#ff6a00);
}
.cpmx-edge-marker.is-place .cpmx-edge-arrow svg{color:var(--cpmx-accent,#ff6a00);width:12px;height:12px}
.cpmx-edge-marker.is-city .cpmx-edge-arrow{
  width:30px;
  height:30px;
  background:var(--cpmx-accent,#ff6a00);
  border-color:#fff;
}
.cpmx-edge-marker.is-city .cpmx-edge-arrow svg{color:#fff;width:14px;height:14px}
.cpmx-edge-marker.is-city .cpmx-edge-copy{
  background:var(--cpmx-accent,#ff6a00);
  border-color:rgba(255,255,255,.5);
}
.cpmx-edge-marker.is-city .cpmx-edge-copy strong{font-size:12px}

/* 1.4.4 Collapsible travel pane (collapsed by default on phones) */
.cpmx-travel-pane .cpmx-travel-head{
  appearance:none;width:100%;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.cpmx-travel-pane .cpmx-travel-head::after{
  content:'';width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);opacity:.7;margin-left:4px;transition:transform .2s ease;
}
.cpmx-travel-pane.is-collapsed .cpmx-travel-head::after{transform:rotate(-45deg)}
.cpmx-travel-pane.is-collapsed .cpmx-travel-list{display:none}
.cpmx-travel-pane.is-collapsed{width:auto;max-width:calc(100% - 24px)}

/* MapLibre writes an inline opacity on every marker element, which beats normal rules.
   The Explorer's own marker states therefore use !important, and hidden markers also
   use visibility (which MapLibre never sets). */
.cpmx-explorer .cpmx-marker.is-hidden,
.cpmx-explorer .cpmx-ring-label.is-hidden,
.cpmx-explorer.is-roads-mode .cpmx-ring-label{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
.cpmx-explorer .cpmx-marker.is-outside{opacity:.72 !important}
.cpmx-explorer .cpmx-marker.is-outside:hover{opacity:1 !important}
.cpmx-explorer .cpmx-ring-label{opacity:.65 !important}
.cpmx-explorer .cpmx-ring-label.is-active{opacity:1 !important}

/* =========================================================
   CPM EXPLORER 1.4.7 Place markers
   - The marker root is just the pin, so MapLibre's bottom anchor lands the pin's tip on
     the location. The label hangs to the right of the pin and no longer shifts it.
   - Site themes style every <button> (e.g. a pink border/background); markers are
     buttons, so reset that here.
   - Labels show whenever the script marks a marker .is-label-visible (no hover needed).
========================================================= */
.cpmx-explorer .cpmx-marker,
.cpmx-explorer .cpmx-edge-marker{
  border:0 !important;
  background:transparent !important;
  padding:0 !important;
  margin:0 !important;
  min-height:0 !important;
  box-shadow:none !important;
  color:inherit !important;
  outline:none;
}
.cpmx-explorer .cpmx-marker:hover,
.cpmx-explorer .cpmx-marker:focus,
.cpmx-explorer .cpmx-edge-marker:hover,
.cpmx-explorer .cpmx-edge-marker:focus{
  background:transparent !important;
}
.cpmx-explorer .cpmx-marker:focus-visible .cpmx-marker-pin,
.cpmx-explorer .cpmx-edge-marker:focus-visible .cpmx-edge-arrow{
  outline:2px solid #fff;
  outline-offset:2px;
}
.cpmx-explorer .cpmx-marker{
  display:block !important;
  width:34px;
  height:34px;
}
.cpmx-explorer .cpmx-marker.is-hero{width:43px;height:43px}
.cpmx-explorer .cpmx-marker .cpmx-marker-label{
  display:block !important;
  position:absolute;
  left:calc(100% + 10px);
  top:50%;
  transform:translateY(-50%) !important;
  max-width:190px;
  overflow:hidden;
  text-overflow:ellipsis;
  pointer-events:none;
}
.cpmx-explorer .cpmx-marker:not(.is-label-visible) .cpmx-marker-label{opacity:0 !important}
.cpmx-explorer .cpmx-marker.is-label-visible .cpmx-marker-label{opacity:1 !important}

/* Road name tooltip (road mode). */
.cpmx-road-tip{
  position:absolute;
  z-index:25;
  pointer-events:none;
  transform:translate(-50%,calc(-100% - 14px));
  background:rgba(8,11,14,.92);
  color:#fff;
  border:1px solid rgba(255,255,255,.2);
  border-radius:8px;
  padding:6px 10px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
  opacity:0;
  transition:opacity .15s ease;
}
.cpmx-road-tip.is-on{opacity:1}

/* Road mode button sits next to the project button, top left. */
.cpmx-topbar .cpmx-road-mode-btn{margin-left:0}
/* (phone layout: explorer width <= 767px, class set by script) */
  .cpmx-explorer.cpmx-compact .cpmx-topbar .cpmx-road-mode-btn{margin-left:0}

/* Labels hidden by the collision pass come back on hover / when the place is active. */
.cpmx-explorer .cpmx-marker.is-label-collided:not(:hover):not(.is-active) .cpmx-marker-label{opacity:0 !important}
.cpmx-explorer .cpmx-marker:hover{z-index:30 !important}
/* 1.4.9 Ring markers whose part of the ring is out of view are hidden, not clamped. */
.cpmx-explorer .cpmx-edge-marker.is-offscreen{visibility:hidden !important;pointer-events:none !important}
/* Readable distance / time lines under names. */
.cpmx-explorer .cpmx-edge-copy small{font-size:11px !important;opacity:.78 !important;margin-top:3px;font-weight:600}
.cpmx-explorer .cpmx-edge-copy strong{font-size:12px}
.cpmx-explorer .cpmx-edge-marker.is-place .cpmx-edge-copy strong{font-size:11px}
.cpmx-explorer .cpmx-edge-marker.is-city .cpmx-edge-copy strong{font-size:13px}
.cpmx-explorer .cpmx-travel-row small{font-size:11px !important;opacity:.75}

/* =========================================================
   CPM EXPLORER 1.5.0 Performance + compact ring labels
   Frosted-glass blur (backdrop-filter) over a WebGL map is re-computed every frame for
   every blurred element, and CSS filter shadows on moving markers are similarly costly.
   Use solid, slightly more opaque backgrounds and plain box-shadows instead.
========================================================= */
.cpmx-explorer,
.cpmx-explorer *{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.cpmx-explorer .cpmx-marker,
.cpmx-explorer .cpmx-edge-marker,
.cpmx-explorer .cpmx-site-marker{
  filter:none !important;
}
.cpmx-explorer .cpmx-marker-pin{box-shadow:0 4px 10px rgba(0,0,0,.35)}
.cpmx-explorer .cpmx-marker-label,
.cpmx-explorer .cpmx-edge-copy{
  background:rgba(10,13,16,.94) !important;
  box-shadow:0 4px 12px rgba(0,0,0,.3);
}
.cpmx-explorer .cpmx-travel-pane,
.cpmx-explorer .cpmx-project-home,
.cpmx-explorer .cpmx-road-mode-btn:not(.is-active),
.cpmx-explorer .cpmx-band-indicator,
.cpmx-explorer .cpmx-chip:not(.is-active),
.cpmx-explorer .cpmx-radius-btn:not(.is-active),
.cpmx-explorer .cpmx-control{
  background-color:rgba(12,15,18,.95) !important;
}

/* Ring labels: one compact line, "NAME · 63 km". */
.cpmx-explorer .cpmx-edge-marker .cpmx-edge-copy{
  display:flex !important;
  align-items:baseline;
  gap:6px;
  padding:5px 9px !important;
  white-space:nowrap;
}
.cpmx-explorer .cpmx-edge-copy strong{display:inline !important;max-width:180px}
.cpmx-explorer .cpmx-edge-copy small{display:inline !important;margin:0 !important;font-size:11px !important}
.cpmx-explorer .cpmx-edge-copy small::before{content:'· ';opacity:.6}

/* Ring markers with no free spot nearby are hidden rather than stacked. */
.cpmx-explorer .cpmx-edge-marker.is-crowded{visibility:hidden !important;pointer-events:none !important}

/* =========================================================
   CPM EXPLORER 1.5.4 Overlay stacking, travel pane, mobile
========================================================= */
/* The map (and every marker inside it) sits below the overlay controls. */
.cpmx-explorer .cpmx-map{z-index:1}
.cpmx-explorer .cpmx-topbar,
.cpmx-explorer .cpmx-category-strip,
.cpmx-explorer .cpmx-radius-strip,
.cpmx-explorer .cpmx-controls-left{z-index:20}
.cpmx-explorer .cpmx-travel-pane{z-index:19}
.cpmx-explorer .cpmx-panel{z-index:30}

/* Travel pane: compact one-line rows; no boxed scroll area unless the list really
   doesn't fit, and then only a slim scrollbar. */
.cpmx-explorer .cpmx-travel-pane{
  width:min(300px,calc(100% - 36px));
  max-height:calc(100% - 200px);
  display:flex;
  flex-direction:column;
  border-radius:12px;
  overflow:hidden;
}
.cpmx-explorer .cpmx-travel-pane .cpmx-travel-head{padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.08)}
.cpmx-explorer .cpmx-travel-pane .cpmx-travel-head small{font-size:10px;opacity:.6}
.cpmx-explorer .cpmx-travel-list{
  max-height:none !important;
  overflow-y:auto;
  flex:1 1 auto;
  min-height:0;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.25) transparent;
}
.cpmx-explorer .cpmx-travel-list::-webkit-scrollbar{width:6px}
.cpmx-explorer .cpmx-travel-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25);border-radius:3px}
.cpmx-explorer .cpmx-travel-list::-webkit-scrollbar-button{display:none}
.cpmx-explorer .cpmx-travel-row{
  padding:8px 14px !important;
  min-height:0;
  gap:10px;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.cpmx-explorer .cpmx-travel-row:last-child{border-bottom:0}
.cpmx-explorer .cpmx-travel-row span{display:flex;align-items:baseline;gap:8px;min-width:0;flex:1}
.cpmx-explorer .cpmx-travel-row strong{font-size:12px;font-weight:700;flex:0 1 auto;min-width:0}
.cpmx-explorer .cpmx-travel-row small{display:inline !important;margin:0 !important;font-size:11px !important;opacity:.55;white-space:nowrap;flex:none}
.cpmx-explorer .cpmx-travel-row>b{font-size:13px;font-weight:800}

/* ---------- Phones ---------- */
/* (phone layout: explorer width <= 767px, class set by script) */
  .cpmx-explorer.cpmx-compact .cpmx-topbar{top:10px;left:10px;right:10px;gap:6px}
  .cpmx-explorer.cpmx-compact .cpmx-project-home{max-width:calc(100% - 110px);padding:8px 12px 8px 9px;font-size:10px;overflow:hidden}
  .cpmx-explorer.cpmx-compact .cpmx-project-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cpmx-explorer.cpmx-compact .cpmx-road-mode-btn{padding:6px !important;flex:none}
  .cpmx-explorer.cpmx-compact .cpmx-road-mode-btn span:last-child{display:none}
  .cpmx-explorer.cpmx-compact .cpmx-road-mode-icon{width:28px;height:28px}

  .cpmx-explorer.cpmx-compact .cpmx-travel-pane{top:56px !important;left:10px !important;width:calc(100% - 20px);max-height:46%}
  .cpmx-explorer.cpmx-compact .cpmx-travel-pane.is-collapsed{width:auto}

  /* Bottom dock: category chips, then radius buttons; pinch replaces + / -. */
  .cpmx-explorer.cpmx-compact .cpmx-category-strip{
    bottom:56px !important;left:10px !important;right:10px !important;top:auto !important;
    transform:none !important;max-width:none !important;
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:6px;
  }
  .cpmx-explorer.cpmx-compact .cpmx-category-strip::-webkit-scrollbar{display:none}
  .cpmx-explorer.cpmx-compact .cpmx-chip{padding:7px 12px !important;font-size:11px !important;flex:none;white-space:nowrap}
  .cpmx-explorer.cpmx-compact .cpmx-radius-strip{
    bottom:10px !important;left:10px !important;right:58px !important;
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:6px;opacity:1 !important;
  }
  .cpmx-explorer.cpmx-compact .cpmx-radius-strip::-webkit-scrollbar{display:none}
  .cpmx-explorer.cpmx-compact .cpmx-radius-btn{padding:8px 10px !important;flex:1 0 auto;text-align:center}
  .cpmx-explorer.cpmx-compact .cpmx-radius-btn strong{font-size:11px}
  .cpmx-explorer.cpmx-compact .cpmx-radius-btn small{display:none}
  .cpmx-explorer.cpmx-compact .cpmx-controls-left{right:10px !important;bottom:10px !important}
  .cpmx-explorer.cpmx-compact .cpmx-control[data-action="plus"], .cpmx-explorer.cpmx-compact .cpmx-control[data-action="minus"]{display:none !important}
  .cpmx-explorer.cpmx-compact .cpmx-control{width:40px;height:40px}

  /* Lighter ring labels and place labels on small screens. */
  .cpmx-explorer.cpmx-compact .cpmx-edge-copy{padding:4px 7px !important}
  .cpmx-explorer.cpmx-compact .cpmx-edge-copy strong{font-size:10px !important;max-width:120px}
  .cpmx-explorer.cpmx-compact .cpmx-edge-copy small{font-size:10px !important}
  .cpmx-explorer.cpmx-compact .cpmx-marker .cpmx-marker-label{font-size:10px;padding:5px 7px;max-width:130px}
  .cpmx-explorer.cpmx-compact .maplibregl-ctrl-bottom-right{bottom:96px}


/* =========================================================
   CPM EXPLORER 1.6.2 Place info card
   Compact floating card in the same style as the travel-times pane, top right.
========================================================= */
.cpmx-explorer .cpmx-panel{
  top:70px !important;
  right:18px !important;
  bottom:auto !important;
  left:auto !important;
  width:min(300px,calc(100% - 36px)) !important;
  height:auto !important;
  max-height:calc(100% - 170px) !important;
  overflow-y:auto;
  padding:14px 16px 16px !important;
  background:rgba(12,15,18,.95) !important;
  color:#fff;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px !important;
  box-shadow:0 14px 36px rgba(0,0,0,.35) !important;
  transform:translateY(-8px) !important;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease,transform .25s ease !important;
  scrollbar-width:thin;
}
.cpmx-explorer .cpmx-panel.is-open{
  transform:none !important;
  opacity:1;
  pointer-events:auto;
}
.cpmx-explorer .cpmx-panel-close{
  top:10px !important;
  right:10px !important;
  width:26px !important;
  height:26px !important;
  font-size:17px !important;
  line-height:1;
  display:grid;
  place-items:center;
  padding:0 !important;
  border:1px solid rgba(255,255,255,.14) !important;
  background:rgba(255,255,255,.04) !important;
  color:#fff !important;
}
.cpmx-explorer .cpmx-panel-close:hover{background:rgba(255,255,255,.12) !important}
.cpmx-explorer .cpmx-panel-kicker{
  font-size:10px !important;
  font-weight:900 !important;
  letter-spacing:.15em !important;
  margin:0 30px 4px 0 !important;
}
.cpmx-explorer .cpmx-panel-title{
  font-size:17px !important;
  line-height:1.2 !important;
  font-weight:800 !important;
  margin:0 30px 12px 0 !important;
  color:#fff !important;
}
.cpmx-explorer .cpmx-panel-metrics{
  display:grid !important;
  grid-template-columns:1fr 1fr;
  gap:0 !important;
  margin:0 0 12px !important;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.cpmx-explorer .cpmx-metric{
  background:none !important;
  border-radius:0 !important;
  padding:9px 0 !important;
  min-width:0 !important;
}
.cpmx-explorer .cpmx-metric + .cpmx-metric{padding-left:14px !important;border-left:1px solid rgba(255,255,255,.08)}
.cpmx-explorer .cpmx-metric strong{font-size:15px !important;font-weight:800;color:var(--cpmx-accent,#ff6a00)}
.cpmx-explorer .cpmx-metric span{font-size:10px !important;letter-spacing:.1em !important;opacity:.6 !important;margin-top:2px}
.cpmx-explorer .cpmx-panel-media img{border-radius:8px !important;margin:0 0 12px !important}
.cpmx-explorer .cpmx-panel-copy{font-size:12px !important;line-height:1.55 !important;opacity:.85}
.cpmx-explorer .cpmx-panel-copy:empty{display:none}
.cpmx-explorer .cpmx-panel-actions{gap:6px !important;margin-top:4px !important}
.cpmx-explorer .cpmx-panel-action{
  padding:7px 11px !important;
  font-size:11px !important;
  font-weight:800 !important;
  border-radius:8px !important;
  border:0 !important;
}
.cpmx-explorer .cpmx-panel-action.secondary{background:rgba(255,255,255,.08) !important;color:#fff !important}
.cpmx-explorer .cpmx-panel-action.secondary:hover{background:rgba(255,255,255,.16) !important}

/* (phone layout: explorer width <= 767px, class set by script) */
  .cpmx-explorer.cpmx-compact .cpmx-panel{
    top:auto !important;
    bottom:104px !important;
    left:10px !important;
    right:10px !important;
    width:auto !important;
    max-height:38% !important;
    border-radius:12px !important;
    transform:translateY(8px) !important;
  }


/* =========================================================
   CPM EXPLORER 1.7.0 Light / dark colour modes
   Overlay UI colours come from the active mode (--cpmx-ui / --cpmx-ui-text, set by the
   script). The defaults reproduce the previous dark UI exactly.
========================================================= */
.cpmx-explorer{
  --cpmx-ui:#0c0f12;
  --cpmx-ui-text:#ffffff;
  --cpmx-ui-a:color-mix(in srgb,var(--cpmx-ui) 95%,transparent);
  --cpmx-ui-line:color-mix(in srgb,var(--cpmx-ui-text) 14%,transparent);
  --cpmx-ui-soft:color-mix(in srgb,var(--cpmx-ui-text) 8%,transparent);
}
.cpmx-explorer .cpmx-travel-pane,
.cpmx-explorer .cpmx-project-home,
.cpmx-explorer .cpmx-road-mode-btn:not(.is-active),
.cpmx-explorer .cpmx-band-indicator,
.cpmx-explorer .cpmx-chip:not(.is-active),
.cpmx-explorer .cpmx-radius-btn:not(.is-active),
.cpmx-explorer .cpmx-control,
.cpmx-explorer .cpmx-panel,
.cpmx-explorer .cpmx-marker-label,
.cpmx-explorer .cpmx-edge-marker:not(.is-city) .cpmx-edge-copy,
.cpmx-explorer .cpmx-road-tip,
.cpmx-explorer .cpmx-toast,
.cpmx-explorer .cpmx-site-label,
.cpmx-explorer .cpmx-ring-label:not(.is-active),
.cpmx-explorer .cpmx-mode-toggle{
  background-color:var(--cpmx-ui-a) !important;
  color:var(--cpmx-ui-text) !important;
  border-color:var(--cpmx-ui-line) !important;
}
.cpmx-explorer .cpmx-edge-marker:not(.is-city) .cpmx-edge-copy,
.cpmx-explorer .cpmx-edge-marker:not(.is-city) .cpmx-edge-copy strong{color:var(--cpmx-ui-text) !important}
.cpmx-explorer .cpmx-radius-btn.is-active:not(.cpmx-mseg-btn){background:var(--cpmx-ui-text) !important;color:var(--cpmx-ui) !important}
.cpmx-explorer .cpmx-panel-title,
.cpmx-explorer .cpmx-travel-row,
.cpmx-explorer .cpmx-panel-close{color:inherit !important}
.cpmx-explorer .cpmx-panel-close{border-color:var(--cpmx-ui-line) !important;background:var(--cpmx-ui-soft) !important}
.cpmx-explorer .cpmx-panel-action.secondary{background:var(--cpmx-ui-soft) !important;color:var(--cpmx-ui-text) !important}
.cpmx-explorer .cpmx-panel-metrics,
.cpmx-explorer .cpmx-metric + .cpmx-metric,
.cpmx-explorer .cpmx-travel-head,
.cpmx-explorer .cpmx-travel-pane .cpmx-travel-head,
.cpmx-explorer .cpmx-travel-row{border-color:var(--cpmx-ui-line) !important}
.cpmx-explorer .cpmx-marker-pin{background:var(--cpmx-ui-a)}
.cpmx-explorer .cpmx-marker-icon{color:var(--cpmx-ui-text)}
.cpmx-explorer .cpmx-marker.is-hero .cpmx-marker-pin{background:var(--marker-accent)}
.cpmx-explorer .cpmx-marker.is-hero .cpmx-marker-icon{color:#fff}
.cpmx-explorer.is-ui-light .cpmx-marker-pin,
.cpmx-explorer.is-ui-light .cpmx-marker-label,
.cpmx-explorer.is-ui-light .cpmx-edge-copy{box-shadow:0 3px 10px rgba(0,0,0,.22) !important}
.cpmx-explorer.is-ui-light .cpmx-travel-list{scrollbar-color:rgba(0,0,0,.25) transparent}

/* Visitor light/dark toggle (optional, next to Road mode). */
.cpmx-explorer .cpmx-mode-toggle{
  pointer-events:auto;appearance:none;flex:none;
  width:40px;height:40px;padding:0 !important;margin:0;
  display:grid;place-items:center;border:1px solid;border-radius:50%;cursor:pointer;
  box-shadow:0 8px 26px rgba(0,0,0,.18);
}
.cpmx-explorer .cpmx-mode-toggle svg{width:18px;height:18px;display:block}

/* =========================================================
   CPM EXPLORER 1.7.0 Phone layout (<=767px)
   Map + slim top bar + one bottom dock (radius segments, Times, Filter). Categories
   and travel times live in a bottom sheet; the info card is a bottom sheet too.
========================================================= */
.cpmx-explorer .cpmx-mdock,
.cpmx-explorer .cpmx-sheet{display:none}

/* (phone layout: explorer width <= 767px, class set by script) */
  .cpmx-explorer.cpmx-compact .cpmx-category-strip, .cpmx-explorer.cpmx-compact .cpmx-radius-strip, .cpmx-explorer.cpmx-compact .cpmx-travel-pane, .cpmx-explorer.cpmx-compact .cpmx-controls-left, .cpmx-explorer.cpmx-compact .cpmx-band-indicator, .cpmx-explorer.cpmx-compact .maplibregl-ctrl-top-right{display:none !important}

  /* Top bar */
  .cpmx-explorer.cpmx-compact .cpmx-topbar{top:10px;left:10px;right:10px;gap:8px}
  .cpmx-explorer.cpmx-compact .cpmx-project-home{min-height:44px;max-width:calc(100% - 112px);padding:8px 14px 8px 12px !important;font-size:11px}
  .cpmx-explorer.cpmx-compact .cpmx-road-mode-btn{width:44px;height:44px;padding:0 !important;justify-content:center;flex:none}
  .cpmx-explorer.cpmx-compact .cpmx-road-mode-icon{width:30px;height:30px}
  .cpmx-explorer.cpmx-compact .cpmx-mode-toggle{width:44px;height:44px}

  /* Bottom dock */
  .cpmx-explorer.cpmx-compact .cpmx-mdock{
    display:flex;position:absolute;z-index:21;left:10px;right:10px;bottom:10px;gap:8px;align-items:stretch;
    pointer-events:none;
  }
  .cpmx-explorer.cpmx-compact .cpmx-mdock>*{pointer-events:auto}
  .cpmx-explorer.cpmx-compact .cpmx-mseg{
    flex:1 1 auto;min-width:0;display:flex;gap:2px;padding:4px;height:50px;
    background:var(--cpmx-ui-a);border:1px solid var(--cpmx-ui-line);border-radius:14px;
    box-shadow:0 8px 24px rgba(0,0,0,.22);
  }
  .cpmx-explorer.cpmx-compact .cpmx-mseg-spacer{flex:1}
  .cpmx-explorer.cpmx-compact .cpmx-mdock .cpmx-mseg-btn, .cpmx-explorer.cpmx-compact .cpmx-mdock .cpmx-mseg-btn:not(.is-active){
    flex:1 1 0;min-width:0;height:auto;margin:0;padding:0 2px !important;
    display:flex;align-items:baseline;justify-content:center;gap:2px;align-self:stretch;
    background:transparent !important;color:var(--cpmx-ui-text) !important;
    border:0 !important;border-radius:10px;box-shadow:none !important;
    font-size:15px;font-weight:800;line-height:42px;cursor:pointer;
  }
  .cpmx-explorer.cpmx-compact .cpmx-mdock .cpmx-mseg-btn small{display:inline !important;font-size:10px;font-weight:700;opacity:.65;letter-spacing:.02em;margin:0}
  .cpmx-explorer.cpmx-compact .cpmx-mdock .cpmx-mseg-btn.is-active{background:var(--cpmx-accent,#ff6a00) !important;color:#fff !important}
  .cpmx-explorer.cpmx-compact .cpmx-mdock .cpmx-mseg-btn.is-active small{opacity:.85}
  .cpmx-explorer.cpmx-compact .cpmx-mbtn{
    position:relative;flex:none;width:56px;height:50px;padding:0 !important;margin:0;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    background:var(--cpmx-ui-a) !important;color:var(--cpmx-ui-text) !important;
    border:1px solid var(--cpmx-ui-line) !important;border-radius:14px;cursor:pointer;
    box-shadow:0 8px 24px rgba(0,0,0,.22);font:inherit;
  }
  .cpmx-explorer.cpmx-compact .cpmx-mbtn svg{width:20px;height:20px;display:block}
  .cpmx-explorer.cpmx-compact .cpmx-mbtn span{font-size:10px;font-weight:800;letter-spacing:.04em;line-height:1}
  .cpmx-explorer.cpmx-compact .cpmx-mbtn.is-active{background:var(--cpmx-accent,#ff6a00) !important;color:#fff !important;border-color:transparent !important}
  .cpmx-explorer.cpmx-compact .cpmx-mbadge{display:none;position:absolute;top:6px;right:9px;width:9px;height:9px;border-radius:50%;background:var(--cpmx-accent,#ff6a00);border:2px solid var(--cpmx-ui)}
  .cpmx-explorer.cpmx-compact .cpmx-mbtn.is-filtered .cpmx-mbadge{display:block}

  /* Bottom sheet (travel times / filters) */
  .cpmx-explorer.cpmx-compact .cpmx-sheet{
    display:flex;flex-direction:column;position:absolute;z-index:32;left:0;right:0;bottom:0;
    max-height:64%;background:var(--cpmx-ui);color:var(--cpmx-ui-text);
    border-radius:18px 18px 0 0;border-top:1px solid var(--cpmx-ui-line);
    box-shadow:0 -14px 40px rgba(0,0,0,.35);
    padding-bottom:env(safe-area-inset-bottom,0px);
    transform:translateY(105%);visibility:hidden;
    transition:transform .3s cubic-bezier(.2,.75,.25,1),visibility 0s linear .3s;
  }
  .cpmx-explorer.cpmx-compact .cpmx-sheet.is-open{transform:none;visibility:visible;transition:transform .3s cubic-bezier(.2,.75,.25,1)}
  .cpmx-explorer.cpmx-compact .cpmx-sheet::before{content:'';display:block;width:38px;height:4px;border-radius:2px;background:var(--cpmx-ui-line);margin:8px auto 0}
  .cpmx-explorer.cpmx-compact .cpmx-sheet-head{display:flex;align-items:center;gap:8px;padding:6px 10px 6px 14px;border-bottom:1px solid var(--cpmx-ui-line)}
  .cpmx-explorer.cpmx-compact .cpmx-sheet-tabs{flex:1;display:flex;gap:4px;min-width:0}
  .cpmx-explorer.cpmx-compact .cpmx-sheet-tabs button{
    appearance:none;border:0 !important;background:transparent !important;color:var(--cpmx-ui-text) !important;
    opacity:.6;padding:12px 10px !important;margin:0;font:inherit;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
    border-radius:0;box-shadow:inset 0 -2px transparent;cursor:pointer;min-height:44px;
  }
  .cpmx-explorer.cpmx-compact .cpmx-sheet-tabs button.is-active{opacity:1;box-shadow:inset 0 -2px var(--cpmx-accent,#ff6a00) !important}
  .cpmx-explorer.cpmx-compact .cpmx-sheet-close{
    appearance:none;flex:none;width:40px;height:40px;padding:0 !important;margin:0;border-radius:50%;
    border:1px solid var(--cpmx-ui-line) !important;background:var(--cpmx-ui-soft) !important;color:var(--cpmx-ui-text) !important;
    font-size:22px;line-height:1;display:grid;place-items:center;cursor:pointer;
  }
  .cpmx-explorer.cpmx-compact .cpmx-sheet-body{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:4px 0 10px}
  .cpmx-explorer.cpmx-compact .cpmx-sheet-body[hidden]{display:none}
  .cpmx-explorer.cpmx-compact .cpmx-sheet .cpmx-travel-row{
    min-height:50px;padding:10px 16px !important;display:flex;align-items:center;justify-content:space-between;gap:12px;
    width:100%;border:0 !important;border-bottom:1px solid var(--cpmx-ui-line) !important;background:transparent !important;
    color:var(--cpmx-ui-text) !important;text-align:left;cursor:pointer;margin:0;border-radius:0;
  }
  .cpmx-explorer.cpmx-compact .cpmx-sheet .cpmx-travel-row:last-child{border-bottom:0 !important}
  .cpmx-explorer.cpmx-compact .cpmx-sheet .cpmx-travel-row span{display:flex;align-items:baseline;gap:8px;min-width:0;flex:1}
  .cpmx-explorer.cpmx-compact .cpmx-sheet .cpmx-travel-row strong{font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cpmx-explorer.cpmx-compact .cpmx-sheet .cpmx-travel-row small{font-size:12px !important;opacity:.55;white-space:nowrap}
  .cpmx-explorer.cpmx-compact .cpmx-sheet .cpmx-travel-row>b{font-size:15px;font-weight:800;color:var(--cpmx-accent,#ff6a00);white-space:nowrap}
  .cpmx-explorer.cpmx-compact .cpmx-sheet-chips{display:flex;flex-wrap:wrap;gap:8px;padding:12px 14px 6px}
  .cpmx-explorer.cpmx-compact .cpmx-sheet .cpmx-chip{padding:12px 16px !important;font-size:13px !important;min-height:44px;border:1px solid var(--cpmx-ui-line) !important;transform:none !important}
  .cpmx-explorer.cpmx-compact .cpmx-sheet .cpmx-chip.is-active{background:var(--cpmx-accent,#ff6a00) !important;color:#fff !important;border-color:transparent !important}

  /* Info card as a bottom sheet */
  .cpmx-explorer.cpmx-compact .cpmx-panel{
    top:auto !important;bottom:0 !important;left:0 !important;right:0 !important;width:auto !important;
    max-height:50% !important;border-radius:18px 18px 0 0 !important;border-width:1px 0 0 !important;
    padding:20px 18px calc(18px + env(safe-area-inset-bottom,0px)) !important;
    background:var(--cpmx-ui) !important;
    transform:translateY(24px) !important;
  }
  .cpmx-explorer.cpmx-compact .cpmx-panel.is-open{transform:none !important}
  .cpmx-explorer.cpmx-compact .cpmx-panel::before{content:'';position:absolute;top:8px;left:50%;width:38px;height:4px;margin-left:-19px;border-radius:2px;background:var(--cpmx-ui-line)}
  .cpmx-explorer.cpmx-compact .cpmx-panel-close{width:40px !important;height:40px !important;top:12px !important;right:12px !important;font-size:22px !important}
  .cpmx-explorer.cpmx-compact .cpmx-panel-kicker, .cpmx-explorer.cpmx-compact .cpmx-panel-title{margin-right:48px !important}
  .cpmx-explorer.cpmx-compact .cpmx-panel-title{font-size:19px !important}
  .cpmx-explorer.cpmx-compact .cpmx-panel-action{padding:12px 16px !important;font-size:13px !important;min-height:44px;display:inline-flex;align-items:center}

  /* Quieter map: smaller ring labels, attribution above the dock. */
  .cpmx-explorer.cpmx-compact .cpmx-edge-copy small{display:none !important}
  .cpmx-explorer.cpmx-compact .cpmx-edge-copy strong{max-width:110px}
  .cpmx-explorer.cpmx-compact .maplibregl-ctrl-bottom-right, .cpmx-explorer.cpmx-compact .maplibregl-ctrl-bottom-left{bottom:62px !important}
  .cpmx-explorer.cpmx-compact .cpmx-toast{bottom:74px}


/* =========================================================
   CPM EXPLORER 1.8.0 Full interface palette
   Each UI element reads its own custom property. Unset properties fall back to the
   panel colours / accent here, so a mode works with just a background and text colour.
   The script sets (or removes) the properties for the active light/dark mode.
========================================================= */
.cpmx-explorer{
  --cpmx-ui-muted:color-mix(in srgb,var(--cpmx-ui-text) 60%,var(--cpmx-ui));
  --cpmx-ui-line:color-mix(in srgb,var(--cpmx-ui-text) 14%,transparent);
  --cpmx-btn-bg:var(--cpmx-ui);--cpmx-btn-text:var(--cpmx-ui-text);
  --cpmx-btn-hover:var(--cpmx-accent,#ff6a00);--cpmx-btn-active-bg:var(--cpmx-accent,#ff6a00);--cpmx-btn-active-text:#fff;
  --cpmx-road-bg:var(--cpmx-btn-bg);--cpmx-road-text:var(--cpmx-btn-text);--cpmx-road-active:var(--cpmx-accent,#ff6a00);
  --cpmx-chip-bg:var(--cpmx-btn-bg);--cpmx-chip-text:var(--cpmx-btn-text);--cpmx-chip-active-bg:var(--cpmx-accent,#ff6a00);--cpmx-chip-active-text:#fff;
  --cpmx-radius-bg:var(--cpmx-btn-bg);--cpmx-radius-text:var(--cpmx-btn-text);--cpmx-radius-active-bg:var(--cpmx-ui-text);--cpmx-radius-active-text:var(--cpmx-ui);
  --cpmx-travel-bg:var(--cpmx-ui);--cpmx-travel-text:var(--cpmx-ui-text);--cpmx-travel-time:var(--cpmx-accent,#ff6a00);
  --cpmx-card-bg:var(--cpmx-ui);--cpmx-card-text:var(--cpmx-ui-text);--cpmx-card-accent:var(--cpmx-accent,#ff6a00);
  --cpmx-label-bg:var(--cpmx-ui);--cpmx-label-text:var(--cpmx-ui-text);--cpmx-pin-bg:var(--cpmx-ui);--cpmx-pin-icon:var(--cpmx-ui-text);
  --cpmx-ring-bg:var(--cpmx-ui);--cpmx-ring-text:var(--cpmx-ui-text);--cpmx-ring-active-bg:var(--cpmx-accent,#ff6a00);
  --cpmx-tip-bg:var(--cpmx-ui);--cpmx-tip-text:var(--cpmx-ui-text);
  --cpmx-bar-bg:var(--cpmx-ui);--cpmx-bar-text:var(--cpmx-ui-text);--cpmx-bar-active:var(--cpmx-accent,#ff6a00);
  --cpmx-sheet-bg:var(--cpmx-ui);--cpmx-sheet-text:var(--cpmx-ui-text);
}
/* 95% opacity surfaces, as before */
.cpmx-explorer .cpmx-project-home,
.cpmx-explorer .cpmx-band-indicator,
.cpmx-explorer .cpmx-control,
.cpmx-explorer .cpmx-mode-chooser{background-color:color-mix(in srgb,var(--cpmx-btn-bg) 95%,transparent) !important;color:var(--cpmx-btn-text) !important;border-color:var(--cpmx-ui-line) !important}
.cpmx-explorer .cpmx-control:hover{background-color:var(--cpmx-btn-hover) !important;color:var(--cpmx-btn-active-text) !important}
.cpmx-explorer .cpmx-road-mode-btn:not(.is-active){background-color:color-mix(in srgb,var(--cpmx-road-bg) 95%,transparent) !important;color:var(--cpmx-road-text) !important;border-color:var(--cpmx-ui-line) !important}
.cpmx-explorer .cpmx-road-mode-btn.is-active{background:var(--cpmx-road-active) !important;color:#fff !important}
.cpmx-explorer .cpmx-road-mode-icon{background:var(--cpmx-road-active)}
.cpmx-explorer .cpmx-chip:not(.is-active){background-color:color-mix(in srgb,var(--cpmx-chip-bg) 95%,transparent) !important;color:var(--cpmx-chip-text) !important;border-color:var(--cpmx-ui-line) !important}
.cpmx-explorer .cpmx-chip.is-active,.cpmx-explorer .cpmx-chip:hover{background:var(--cpmx-chip-active-bg) !important;color:var(--cpmx-chip-active-text) !important;border-color:transparent !important}
.cpmx-explorer .cpmx-radius-btn:not(.is-active):not(.cpmx-mseg-btn){background-color:color-mix(in srgb,var(--cpmx-radius-bg) 95%,transparent) !important;color:var(--cpmx-radius-text) !important;border-color:var(--cpmx-ui-line) !important}
.cpmx-explorer .cpmx-radius-btn.is-active:not(.cpmx-mseg-btn){background:var(--cpmx-radius-active-bg) !important;color:var(--cpmx-radius-active-text) !important}
.cpmx-explorer .cpmx-travel-pane{background-color:color-mix(in srgb,var(--cpmx-travel-bg) 95%,transparent) !important;color:var(--cpmx-travel-text) !important;border-color:var(--cpmx-ui-line) !important}
.cpmx-explorer .cpmx-travel-row>b{color:var(--cpmx-travel-time) !important}
.cpmx-explorer .cpmx-travel-row small,.cpmx-explorer .cpmx-travel-head small{color:var(--cpmx-ui-muted) !important;opacity:1 !important}
.cpmx-explorer .cpmx-panel{background-color:color-mix(in srgb,var(--cpmx-card-bg) 95%,transparent) !important;color:var(--cpmx-card-text) !important;border-color:var(--cpmx-ui-line) !important}
.cpmx-explorer .cpmx-metric strong{color:var(--cpmx-card-accent) !important}
.cpmx-explorer .cpmx-metric span,.cpmx-explorer .cpmx-panel-copy{color:var(--cpmx-ui-muted) !important;opacity:1 !important}
.cpmx-explorer .cpmx-panel-kicker{color:var(--cpmx-card-accent) !important}
.cpmx-explorer .cpmx-marker-label{background-color:color-mix(in srgb,var(--cpmx-label-bg) 95%,transparent) !important;color:var(--cpmx-label-text) !important;border-color:var(--cpmx-ui-line) !important}
.cpmx-explorer .cpmx-marker-pin{background:color-mix(in srgb,var(--cpmx-pin-bg) 95%,transparent)}
.cpmx-explorer .cpmx-marker-icon{color:var(--cpmx-pin-icon)}
.cpmx-explorer .cpmx-edge-marker:not(.is-city) .cpmx-edge-copy,
.cpmx-explorer .cpmx-edge-marker:not(.is-city) .cpmx-edge-copy strong,
.cpmx-explorer .cpmx-edge-marker.is-city .cpmx-edge-copy,
.cpmx-explorer .cpmx-edge-marker.is-city .cpmx-edge-copy strong{background-color:color-mix(in srgb,var(--cpmx-label-bg) 95%,transparent) !important;color:var(--cpmx-label-text) !important;border-color:var(--cpmx-ui-line) !important}
.cpmx-explorer .cpmx-edge-copy strong{background:none !important}
.cpmx-explorer .cpmx-ring-label:not(.is-active){background-color:color-mix(in srgb,var(--cpmx-ring-bg) 95%,transparent) !important;color:var(--cpmx-ring-text) !important;border-color:var(--cpmx-ui-line) !important}
.cpmx-explorer .cpmx-ring-label.is-active{background:var(--cpmx-ring-active-bg) !important;color:#fff !important}
.cpmx-explorer .cpmx-road-tip{background-color:color-mix(in srgb,var(--cpmx-tip-bg) 95%,transparent) !important;color:var(--cpmx-tip-text) !important}
.cpmx-explorer .cpmx-toast,.cpmx-explorer .cpmx-site-label{background-color:color-mix(in srgb,var(--cpmx-ui) 95%,transparent) !important;color:var(--cpmx-ui-text) !important}

/* Visitor Light / Dark chooser */
.cpmx-explorer .cpmx-mode-chooser{pointer-events:auto;display:flex;gap:2px;padding:3px;border:1px solid;border-radius:999px;box-shadow:0 8px 26px rgba(0,0,0,.18);flex:none}
.cpmx-explorer .cpmx-mode-chooser button{appearance:none;display:flex;align-items:center;gap:6px;border:0 !important;margin:0;padding:6px 11px !important;border-radius:999px;background:transparent !important;color:inherit !important;font:inherit;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;box-shadow:none !important;line-height:1}
.cpmx-explorer .cpmx-mode-chooser button svg{width:15px;height:15px;display:block}
.cpmx-explorer .cpmx-mode-chooser button.is-active{background:var(--cpmx-btn-active-bg) !important;color:var(--cpmx-btn-active-text) !important}
.cpmx-explorer .cpmx-topbar .cpmx-band-indicator{margin-left:auto}
.cpmx-explorer .cpmx-topbar .cpmx-mode-chooser{margin-left:0}
.cpmx-explorer.cpmx-compact .cpmx-topbar .cpmx-mode-chooser{margin-left:auto}

/* =========================================================
   CPM EXPLORER 1.8.0 Reserved control slots (desktop layout)
   Top bar across the top; category chips in the gap or on a second row; compass on top
   of the zoom stack bottom-right; attribution in the corner below that stack. Nothing
   shares a slot, at any explorer width.
========================================================= */
.cpmx-explorer .cpmx-topbar{top:18px;left:18px;right:18px;gap:8px;flex-wrap:nowrap}
.cpmx-explorer .cpmx-project-home{min-width:0;flex:0 1 auto;overflow:hidden}
.cpmx-explorer .cpmx-project-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cpmx-explorer .cpmx-band-indicator{flex:none;white-space:nowrap}
.cpmx-explorer:not(.cpmx-compact) .cpmx-category-strip{top:18px;transform:translateX(-50%)}
.cpmx-explorer.cpmx-chips-row2:not(.cpmx-compact) .cpmx-category-strip{top:66px;left:auto !important;right:18px;transform:none;justify-content:flex-end}
.cpmx-explorer:not(.cpmx-compact) .cpmx-controls-left{right:18px;bottom:46px;gap:7px}
.cpmx-explorer:not(.cpmx-compact) .maplibregl-ctrl-top-right{top:auto;bottom:193px;right:8px;z-index:20}
.cpmx-explorer:not(.cpmx-compact) .maplibregl-ctrl-top-right .maplibregl-ctrl{margin:0 10px 0 0}
.cpmx-explorer .maplibregl-ctrl-top-right .maplibregl-ctrl-group{border-radius:11px;overflow:hidden;background:color-mix(in srgb,var(--cpmx-btn-bg) 95%,transparent);border:1px solid var(--cpmx-ui-line);box-shadow:none}
.cpmx-explorer .maplibregl-ctrl-top-right .maplibregl-ctrl-group button{width:42px;height:42px;background:transparent}
.cpmx-explorer:not(.is-ui-light) .maplibregl-ctrl-top-right .maplibregl-ctrl-icon{filter:invert(1)}
.cpmx-explorer:not(.cpmx-compact) .maplibregl-ctrl-bottom-right{bottom:0 !important;right:0}
.cpmx-explorer:not(.cpmx-compact) .maplibregl-ctrl-bottom-left{bottom:0 !important}
.cpmx-explorer:not(.cpmx-compact) .cpmx-radius-strip{bottom:18px}
/* The info card stays above the right-hand control stack. */
.cpmx-explorer:not(.cpmx-compact) .cpmx-panel{max-height:max(200px,calc(100% - 320px)) !important}
.cpmx-explorer.cpmx-chips-row2:not(.cpmx-compact) .cpmx-panel{top:116px !important;max-height:max(200px,calc(100% - 366px)) !important}
/* Travel pane leaves room for the radius strip at the bottom. */
.cpmx-explorer:not(.cpmx-compact) .cpmx-travel-pane{max-height:calc(100% - 160px)}
/* Mid widths: smaller radius buttons so the bottom row never meets the zoom stack. */
.cpmx-explorer:not(.cpmx-compact) .cpmx-radius-strip{right:80px;flex-wrap:wrap}

/* Phone layout (explorer <= 767px): chooser is icon-only; the bar and sheet use their palette. */
.cpmx-explorer.cpmx-compact .cpmx-mode-chooser{margin-left:auto;padding:3px;height:44px;align-items:center}
.cpmx-explorer.cpmx-compact .cpmx-mode-chooser button{width:36px;height:36px;padding:0 !important;justify-content:center}
.cpmx-explorer.cpmx-compact .cpmx-mode-chooser button span{display:none}
.cpmx-explorer.cpmx-compact .cpmx-project-home{max-width:none}
.cpmx-explorer.cpmx-compact .cpmx-mseg,
.cpmx-explorer.cpmx-compact .cpmx-mbtn:not(.is-active){background-color:color-mix(in srgb,var(--cpmx-bar-bg) 95%,transparent) !important;color:var(--cpmx-bar-text) !important}
.cpmx-explorer.cpmx-compact .cpmx-mdock .cpmx-mseg-btn,
.cpmx-explorer.cpmx-compact .cpmx-mdock .cpmx-mseg-btn:not(.is-active){color:var(--cpmx-bar-text) !important}
.cpmx-explorer.cpmx-compact .cpmx-mdock .cpmx-mseg-btn.is-active,
.cpmx-explorer.cpmx-compact .cpmx-mbtn.is-active{background:var(--cpmx-bar-active) !important;color:#fff !important}
.cpmx-explorer.cpmx-compact .cpmx-sheet{background:var(--cpmx-sheet-bg);color:var(--cpmx-sheet-text)}
.cpmx-explorer.cpmx-compact .cpmx-sheet-tabs button,.cpmx-explorer.cpmx-compact .cpmx-sheet .cpmx-travel-row,.cpmx-explorer.cpmx-compact .cpmx-sheet-close{color:var(--cpmx-sheet-text) !important}
.cpmx-explorer.cpmx-compact .cpmx-sheet .cpmx-travel-row>b{color:var(--cpmx-travel-time) !important}
.cpmx-explorer.cpmx-compact .cpmx-sheet .cpmx-chip:not(.is-active){background:transparent !important;color:var(--cpmx-sheet-text) !important}
.cpmx-explorer.cpmx-compact .cpmx-panel{background:var(--cpmx-card-bg) !important}

/* =========================================================
   CPM EXPLORER 1.9.0 Performance
   No CSS animation runs while the explorer is off screen, the tab is hidden or the
   camera is moving (the beacon pulse would otherwise repaint every frame).
========================================================= */
.cpmx-explorer.is-offscreen *,.cpmx-explorer.is-tab-hidden *,
.cpmx-explorer.is-moving .cpmx-site-beacon,.cpmx-explorer.is-moving .cpmx-sm *{animation-play-state:paused !important}
.cpmx-explorer .cpmx-fps{position:absolute;z-index:40;left:50%;top:4px;transform:translateX(-50%);background:rgba(0,0,0,.75);color:#9ee5a7;font:11px/1.4 ui-monospace,Menlo,monospace;padding:3px 8px;border-radius:6px;pointer-events:none;white-space:nowrap}

/* =========================================================
   CPM EXPLORER 1.9.0 Typography + ring labels
   Each role applies only when a value is chosen (has-* classes from the script), so
   explorers without typography settings keep their designed type.
========================================================= */
.cpmx-explorer.has-font-body,
.cpmx-explorer.has-font-body button,
.cpmx-explorer.has-font-body .cpmx-chip,.cpmx-explorer.has-font-body .cpmx-radius-btn,.cpmx-explorer.has-font-body .cpmx-travel-row,
.cpmx-explorer.has-font-body .cpmx-panel,.cpmx-explorer.has-font-body .cpmx-panel-action,.cpmx-explorer.has-font-body .cpmx-band-indicator,
.cpmx-explorer.has-font-body .cpmx-toast,.cpmx-explorer.has-font-body .cpmx-mbtn,.cpmx-explorer.has-font-body .cpmx-mseg-btn,
.cpmx-explorer.has-font-body .cpmx-sheet{font-family:var(--cpmx-font-body) !important}
.cpmx-explorer.has-fw-body :is(.cpmx-chip,.cpmx-radius-btn,.cpmx-travel-row strong,.cpmx-panel-action,.cpmx-band-indicator,.cpmx-road-mode-btn,.cpmx-mbtn span,.cpmx-mseg-btn,.cpmx-mode-chooser button,.cpmx-metric span){font-weight:var(--cpmx-fw-body) !important}
.cpmx-explorer.has-tt-body :is(.cpmx-chip,.cpmx-radius-btn,.cpmx-panel-action,.cpmx-band-indicator,.cpmx-road-mode-btn,.cpmx-mbtn span,.cpmx-mode-chooser button){text-transform:var(--cpmx-tt-body) !important}
.cpmx-explorer.has-ls-body :is(.cpmx-chip,.cpmx-radius-btn,.cpmx-travel-row,.cpmx-panel-action,.cpmx-band-indicator,.cpmx-road-mode-btn,.cpmx-mbtn span,.cpmx-mode-chooser button,.cpmx-panel-copy){letter-spacing:var(--cpmx-ls-body) !important}

.cpmx-explorer.has-font-heading :is(.cpmx-panel-title,.cpmx-panel-kicker,.cpmx-travel-head span,.cpmx-project-label,.cpmx-sheet-tabs button){font-family:var(--cpmx-font-heading) !important}
.cpmx-explorer.has-fw-heading :is(.cpmx-panel-title,.cpmx-travel-head span,.cpmx-project-label,.cpmx-sheet-tabs button){font-weight:var(--cpmx-fw-heading) !important}
.cpmx-explorer.has-tt-heading :is(.cpmx-panel-title,.cpmx-travel-head span,.cpmx-project-label,.cpmx-sheet-tabs button){text-transform:var(--cpmx-tt-heading) !important}
.cpmx-explorer.has-ls-heading :is(.cpmx-panel-title,.cpmx-travel-head span,.cpmx-project-label,.cpmx-sheet-tabs button){letter-spacing:var(--cpmx-ls-heading) !important}

.cpmx-explorer.has-font-label :is(.cpmx-marker-label,.cpmx-edge-copy,.cpmx-edge-copy strong,.cpmx-edge-copy small,.cpmx-road-tip){font-family:var(--cpmx-font-label) !important}
.cpmx-explorer.has-fw-label :is(.cpmx-marker-label,.cpmx-edge-copy strong,.cpmx-road-tip){font-weight:var(--cpmx-fw-label) !important}
.cpmx-explorer.has-tt-label :is(.cpmx-marker-label,.cpmx-edge-copy strong,.cpmx-road-tip){text-transform:var(--cpmx-tt-label) !important}
.cpmx-explorer.has-ls-label :is(.cpmx-marker-label,.cpmx-edge-copy strong,.cpmx-road-tip){letter-spacing:var(--cpmx-ls-label) !important}

/* Global text size: overlays scale as a whole; marker labels scale inside their marker. */
.cpmx-explorer.has-text-scale :is(.cpmx-topbar,.cpmx-category-strip,.cpmx-radius-strip,.cpmx-travel-pane,.cpmx-panel,.cpmx-mdock,.cpmx-sheet,.cpmx-marker-label,.cpmx-edge-copy,.cpmx-sm-label){zoom:var(--cpmx-text-scale)}

/* Ring labels: size/weight/font from Style > Radius rings; colours from the rings group. */
.cpmx-explorer .cpmx-ring-label{font-size:var(--cpmx-ring-size,10px) !important;font-weight:var(--cpmx-ring-weight,800) !important;font-family:var(--cpmx-ring-font,inherit) !important}
.cpmx-explorer.has-text-scale .cpmx-ring-label{font-size:calc(var(--cpmx-ring-size,10px) * var(--cpmx-text-scale)) !important}
.cpmx-explorer .cpmx-ring-label:not(.is-active){border-color:var(--cpmx-ring-border,var(--cpmx-ui-line)) !important}
.cpmx-explorer.no-ring-labels .cpmx-ring-label{display:none !important}

/* 1.9.8 Travel-time footnote ("Approximate drive times in typical traffic") */
.cpmx-explorer .cpmx-travel-note{padding:8px 14px 10px;font-size:10.5px;line-height:1.35;color:var(--cpmx-ui-muted);border-top:1px solid var(--cpmx-ui-line)}
.cpmx-explorer .cpmx-travel-pane.is-collapsed .cpmx-travel-note{display:none}
.cpmx-explorer .cpmx-sheet .cpmx-travel-note{padding:10px 16px;font-size:12px}
.cpmx-welcome .cpmx-travel-note{font-size:11px;color:var(--cpmx-ui-muted,rgba(255,255,255,.6));padding-top:8px}