/* Routes map chrome only. Catalogue layout and the mobile sheet own sizing. */
.cr-map-pane,
.cr-routes-map {
  --cr-map-navy: #0a1628;
  --cr-map-gold: #c9a96e;
  --cr-map-shadow: inset 0 1px 0 #ffffffdf, 0 2px 5px #0a16280b, 0 14px 32px -13px #0a16284d;
}
.cr-routes-map {
  isolation: isolate;
  background: #b9dce4;
  color: var(--cr-map-navy);
  font: 400 13px/1.4 'DM Sans', sans-serif;
}
.cr-routes-map .cr-map-canvas {
  position: absolute;
  inset: 0;
  height: var(--cr-map-canvas-height, 100%);
  z-index: 0;
  isolation: isolate;
  background: #b9dce4;
}
.cr-routes-map button,
.cr-routes-map summary {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  min-width: 0;
  min-height: 0;
  border: 0;
  appearance: none;
  font-family: 'DM Sans', sans-serif;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.cr-routes-map [hidden] { display: none !important; }
.cr-routes-map button:focus-visible,
.cr-routes-map summary:focus-visible,
.cr-routes-map a:focus-visible {
  outline: 3px solid var(--cr-map-gold);
  outline-offset: 3px;
}
.cr-routes-map button:active { filter: brightness(.94); transition: none; }
.cr-routes-map svg { display: block; flex: none; }

.cr-routes-map .cr-map-controls {
  position: absolute;
  top: var(--cr-map-controls-top, 18px);
  right: 18px;
  display: flex;
  flex-direction: column;
  width: 44px;
  z-index: 4;
}
.cr-routes-map .cr-map-controls::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 44px;
  height: 88px;
  border-radius: 25px;
  background: #fffffff2;
  box-shadow: var(--cr-map-shadow);
  pointer-events: none;
}
.cr-routes-map .cr-map-controls button {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: transparent;
  font: 600 13px/1 'Outfit', sans-serif;
  transition: background .15s, color .15s;
}
.cr-routes-map .cr-map-zoom-in { border-radius: 25px 25px 0 0; }
.cr-routes-map .cr-map-zoom-out { border-radius: 0 0 25px 25px; }
.cr-map-route-controls {
  position:absolute; top:var(--cr-map-controls-top,18px); right:76px; z-index:4;
  display:flex; gap:2px; padding:0; border-radius:26px; background:#fffffff2;
  box-shadow:var(--cr-map-shadow);
}
.cr-map-route-controls[hidden] { display:none!important; }
.cr-map-route-controls button {
  display:grid; place-items:center; min-width:44px; height:44px; padding:0 10px;
  box-sizing:border-box; margin:0; border:0; appearance:none; cursor:pointer;
  border-radius:26px; color:var(--cr-map-navy); background:transparent;
  letter-spacing:0; text-transform:none; text-decoration:none; white-space:nowrap;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  font:500 12px/1 'DM Sans',sans-serif;
}
.cr-map-route-controls button::after { display:none; }
.cr-map-route-controls button:focus-visible { outline:3px solid var(--cr-map-gold); outline-offset:3px; }
.cr-map-route-controls button[aria-pressed='true'] { color:#fff; background:var(--cr-map-navy); }
.cr-map-route-controls button:disabled { opacity:.45; cursor:default; }
.cr-map-route-controls .cr-map-whole-route { width:44px; padding:0; }
.cr-map-route-controls svg { display:block; flex:none; }
.cr-routes-map .cr-map-controls .cr-map-view-toggle {
  margin-top: 10px;
  border-radius: 50%;
  background: #fffffff2;
  box-shadow: var(--cr-map-shadow);
}
.cr-routes-map .cr-map-view-toggle[data-view='3d'] { background: var(--cr-map-navy); color: #fff; }

.cr-routes-map .cr-map-status,
.cr-routes-map .cr-map-feedback {
  position: absolute;
  z-index: 3;
  padding: 12px 17px;
  border-radius: 22px;
  background: #fffffff2;
  box-shadow: var(--cr-map-shadow);
  font: 400 12px/1.5 'DM Sans', sans-serif;
  text-align: center;
  overflow-wrap: anywhere;
}
.cr-routes-map .cr-map-status {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
  max-width: calc(100% - 48px);
}
.cr-routes-map .cr-map-feedback {
  top: var(--cr-map-feedback-top, 75px);
  left: 20px;
  right: 76px;
}
.cr-routes-map .cr-map-feedback:empty { display: none; }

.cr-routes-map .cr-map-pin {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 2px solid var(--cr-map-navy);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 3px 8px #0a16282b;
  font: 600 13px/1 'Outfit', sans-serif;
  user-select: none;
}
.cr-routes-map .cr-map-pin::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; }
.cr-routes-map .cr-map-pin.start { background: #fff; color: var(--cr-map-navy); border-color: #c9a96e; }
.cr-routes-map .cr-marina-pin { background: #fff; color: var(--cr-map-navy); border-color: #c9a96e; }
.cr-routes-map .cr-map-pin svg { width: 20px; height: 20px; }
.cr-routes-map .cr-marina-dot { position: relative; width: 40px; height: 40px; border: 0; background: transparent; box-shadow: none; color: var(--cr-map-navy); }
.cr-routes-map .cr-marina-dot.maplibregl-marker { position: absolute; }
.cr-routes-map .cr-marina-dot::before { content: ''; position: absolute; inset: 7px; border: 1px solid #c9a96e; border-radius: 50%; background: #fffffff2; box-shadow: 0 2px 7px #0a16282b; }
.cr-routes-map .cr-marina-dot svg { position: relative; width: 15px; height: 15px; }
.cr-routes-map .cr-marina-dot:focus-visible { outline: 2px solid var(--cr-map-navy); outline-offset: -1px; }
.cr-routes-map .leaflet-marker-icon.cr-map-marker-host:has(> .cr-marina-dot) { z-index: 100 !important; }
.cr-routes-map .leaflet-marker-icon.cr-map-marker-host:not(:has(> .cr-marina-dot)) { z-index: 101 !important; }
.cr-routes-map .cr-marina-marker { width: 40px; height: 40px; user-select: none; }
.cr-routes-map .cr-marina-marker .cr-marina-pin { position: relative; width: 40px; height: 40px; }
.cr-routes-map .cr-marina-step {
  position: absolute;
  top: -4px;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
}
/* Compact 32px circles keep comfortable 48px touch targets. */
.cr-routes-map .cr-marina-step::before{content:'';position:absolute;inset:8px;border-radius:50%;background:#fffffff0;box-shadow:var(--cr-map-shadow)}
.cr-routes-map .cr-marina-step.previous { right: calc(100% + 2px); }
.cr-routes-map .cr-marina-step.next { left: calc(100% + 2px); }
.cr-routes-map .cr-marina-step svg { position:relative;width:16px;height:16px; }
.cr-routes-map .cr-marina-step:focus-visible{outline:2px solid var(--cr-map-navy);outline-offset:1px}
.cr-routes-map .cr-marina-caption {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: max-content;
  max-width: 240px;
}
.cr-routes-map .cr-marina-name {
  min-height: 32px;
  max-width: 100%;
  padding: 7px 12px;
  border-radius: 28px;
  background: #fffffff0;
  box-shadow: var(--cr-map-shadow);
  font: 500 12px/1.3 'DM Sans', sans-serif;
  text-align: center;
  overflow-wrap: anywhere;
}
.cr-routes-map .cr-marina-position {
  font: 500 12px/1.3 'Outfit', sans-serif;
  font-variant-numeric: tabular-nums;
  color: #29434d;
  text-shadow: 0 1px 2px #ffffffed;
}
/* Leaflet positions a zero-size wrapper; MapLibre positions the element itself. */
.cr-routes-map .leaflet-marker-icon.cr-map-marker-host > .cr-marina-marker,
.cr-routes-map .leaflet-marker-icon.cr-map-marker-host > .cr-waypoint-marker,
.cr-routes-map .leaflet-marker-icon.cr-map-marker-host > .cr-map-pin {
  position: absolute;
  transform: translate(-50%, -50%);
}

/* The preview belongs to its geographic marker, not to a fixed map toolbar. */
.cr-routes-map .cr-waypoint-marker { width:34px; height:34px; }
.cr-routes-map .cr-waypoint-marker .cr-map-pin { position:relative; }
.cr-routes-map .cr-waypoint-marker.is-open { z-index:6; }
.cr-routes-map .cr-waypoint-marker.is-coincident {
  width:44px; height:44px; margin-left:var(--cr-stop-offset,0px);
}
.cr-routes-map .cr-waypoint-marker.is-coincident .cr-map-pin { width:44px; height:44px; }
.cr-routes-map .cr-waypoint-marker.is-coincident .cr-map-pin::after { inset:0; }
.cr-routes-map .cr-waypoint-marker.is-stop-obscured { visibility:hidden; pointer-events:none; }
.cr-routes-map .cr-waypoint-marker.is-open .cr-map-pin { background:var(--cr-map-navy); color:#fff; border-color:var(--cr-map-navy); }
/* Keyboard focus remains distinct without adding a second gold circle. */
.cr-routes-map .cr-waypoint-marker .cr-map-pin:focus-visible { outline:0; background:var(--cr-map-navy); color:#fff; border-color:var(--cr-map-navy); text-decoration:underline; text-underline-offset:3px; }
/* One navigator belongs to the active geographic point, like marina browsing. */
.cr-routes-map .cr-stop-navigation { position:absolute; inset:0; pointer-events:none; }
.cr-routes-map .cr-stop-step { position:absolute; top:50%; transform:translateY(-50%); display:grid; place-items:center; width:44px; height:44px; background:transparent; border-radius:50%; pointer-events:auto; }
.cr-routes-map .cr-stop-step.previous { right:calc(100% + 8px); }
.cr-routes-map .cr-stop-step.next { left:calc(100% + 8px); }
.cr-routes-map .cr-stop-step::before { content:''; position:absolute; inset:10px; border-radius:50%; background:#fff; box-shadow:0 2px 5px #0a162818; }
.cr-routes-map .cr-stop-step svg { position:relative; width:14px; height:14px; }
.cr-routes-map .cr-stop-step:focus-visible { outline:2px solid var(--cr-map-navy); outline-offset:-2px; }
.cr-routes-map .cr-stop-position { position:absolute; top:calc(100% + 9px); left:50%; transform:translateX(-50%); width:max-content; color:#29434d; font:500 11px/1.3 'Outfit',sans-serif; font-variant-numeric:tabular-nums; text-shadow:0 1px 2px #ffffffed; }
.cr-routes-map .cr-stop-preview {
  position:absolute; bottom:calc(100% + 13px); left:50%; transform:translateX(-50%);
  width:304px; box-sizing:border-box; padding:8px; border-radius:22px;
  color:var(--cr-map-navy); background:#fffffff7; text-align:left;
  box-shadow:inset 0 1px 0 #fff,0 2px 6px #0a162815,0 20px 44px -12px #0a16284d;
  white-space:normal; cursor:default;
}
.cr-routes-map .cr-stop-preview::after {
  content:''; position:absolute; left:50%; top:calc(100% - 1px); transform:translateX(-50%);
  border-left:8px solid transparent; border-right:8px solid transparent; border-top:9px solid #fff;
}
.cr-routes-map .cr-stop-body { max-height:var(--cr-stop-body-max-height,none); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; }
.cr-routes-map .cr-stop-media { position:relative; height:120px; overflow:hidden; border-radius:15px; background:#edf2f2; }
.cr-routes-map .cr-stop-photo { display:block; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .18s ease; }
.cr-routes-map .cr-stop-media[data-state='ready'] .cr-stop-photo { opacity:1; }
.cr-routes-map .cr-stop-media-status { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:8px; color:#52656b; font:400 12px/1.4 'DM Sans',sans-serif; }
.cr-routes-map .cr-stop-media[data-state='ready'] .cr-stop-media-status { display:none; }
.cr-routes-map .cr-stop-media[data-state='error'] { height:48px; }
.cr-routes-map .cr-stop-spinner { display:inline-block; flex:none; width:15px; height:15px; border:2px solid #9badb536; border-top-color:#527280; border-radius:50%; animation:cr-stop-spin .8s linear infinite; }
.cr-routes-map .cr-stop-title { margin:13px 10px 6px; color:inherit; font:600 20px/1.16 'Outfit',sans-serif; letter-spacing:-.3px; overflow-wrap:anywhere; }
.cr-routes-map .cr-stop-body:not(:has(.cr-stop-media)) .cr-stop-title { margin-right:44px; }
.cr-routes-map .cr-stop-subtitle { margin:0 10px 10px; color:var(--cr-map-navy); font:500 13px/1.4 'DM Sans',sans-serif; }
.cr-routes-map .cr-stop-route-context { margin:10px 10px 0; padding-top:10px; border-top:1px solid #0a162810; }
.cr-routes-map .cr-stop-context-label { margin:0 0 5px; color:#76848b; font:400 10px/1.3 'DM Sans',sans-serif; }
.cr-routes-map .cr-stop-route-summary { margin:0 0 8px; color:#344652; font:500 12px/1.4 'DM Sans',sans-serif; }
.cr-routes-map .cr-stop-route-context .cr-stop-meta,.cr-routes-map .cr-stop-route-context .cr-stop-choice,.cr-routes-map .cr-stop-route-context .cr-stop-highlights { margin-left:0; margin-right:0; }
.cr-routes-map .cr-stop-meta { display:flex; align-items:center; flex-wrap:wrap; gap:5px 12px; margin:0 10px 10px; color:#5c6470; font:400 11px/1.4 'DM Sans',sans-serif; }
.cr-routes-map .cr-stop-meta span { display:inline-flex; align-items:center; gap:4px; }
.cr-routes-map .cr-stop-meta svg { width:13px; height:13px; }
.cr-routes-map .cr-stop-meta .cr-stop-time-copy { display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
.cr-routes-map .cr-stop-time-label { font:400 10px/1.3 'DM Sans',sans-serif; color:#667780; }
.cr-routes-map .cr-stop-time-value { font:600 17px/1.2 'Outfit','DM Sans',sans-serif; color:var(--cr-map-navy); }
.cr-routes-map .cr-stop-route-context .cr-stop-time-value { font-size:12px; font-weight:500; color:#5c6470; }
.cr-routes-map .cr-stop-brief { margin:0 10px 10px; color:#52616b; font:400 12px/1.5 'DM Sans',sans-serif; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.cr-routes-map .cr-stop-highlights { display:flex; flex-wrap:wrap; gap:5px; margin:0 10px 10px; padding:0; list-style:none; }
.cr-routes-map .cr-stop-highlight { padding:5px 7px; border-radius:7px; background:#edf2f1; color:#40595e; font:400 11px/1.25 'DM Sans',sans-serif; }
.cr-routes-map .cr-stop-choice { margin:0 10px 8px; color:#667780; font:400 11px/1.4 'DM Sans',sans-serif; }
.cr-routes-map .cr-stop-link { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:38px; margin:0 10px 2px; color:var(--cr-map-navy); font:600 12px/1.3 'DM Sans',sans-serif; text-decoration:none; border-top:1px solid #0a162810; }
.cr-routes-map .cr-stop-link svg { width:16px; height:16px; }
.cr-routes-map .cr-stop-close { position:absolute; top:13px; right:13px; display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:#fffffff2; color:var(--cr-map-navy); box-shadow:0 2px 8px #0a16281a; }
.cr-routes-map .cr-stop-close svg { width:15px; height:15px; }
.cr-routes-map .cr-stop-loading { display:grid; gap:12px; min-height:310px; margin:0; padding:0 0 10px; color:#52656b; font:400 12px/1.4 'DM Sans',sans-serif; }
.cr-routes-map .cr-stop-loading-media { height:120px; border-radius:15px; background:#e8eeed; animation:cr-stop-pulse 1.3s ease-in-out infinite alternate; }
.cr-routes-map .cr-stop-loading-line { display:block; height:12px; margin:0 10px; width:68%; border-radius:4px; background:#edf1f1; }
.cr-routes-map .cr-stop-loading-label { display:flex; align-items:center; justify-content:center; gap:8px; margin:4px 10px; }
@keyframes cr-stop-spin { to { transform:rotate(360deg); } }
@keyframes cr-stop-pulse { to { opacity:.5; } }
@media(prefers-reduced-motion:reduce) { .cr-routes-map .cr-stop-spinner,.cr-routes-map .cr-stop-loading-media { animation:none; } .cr-routes-map .cr-stop-photo { transition:none; } }
.cr-routes-map .leaflet-marker-icon.cr-map-marker-host:has(> .cr-waypoint-marker.is-open) { z-index:110 !important; }
@media(max-width:767px) {
  .cr-routes-map[data-stop-preview-open='true'] .cr-map-route-controls,
  .cr-map-pane:has(.cr-routes-map[data-stop-preview-open='true']) .cr-map-route-controls { visibility:hidden; pointer-events:none; }
  .cr-routes-map[data-stop-preview-open='true'] .cr-map-controls,
  .cr-map-pane:has(> .cr-routes-map[data-stop-preview-open='true']) > .cr-map-yachts { opacity:0; visibility:hidden; pointer-events:none; }
  .cr-routes-map .cr-stop-preview { width:var(--cr-stop-width,min(306px,calc(100vw - 32px))); border-radius:20px; background:#fff; }
  .cr-routes-map .cr-stop-body { max-height:none; overflow:visible; }
  .cr-routes-map .cr-stop-title { margin:8px 8px 5px; font-size:18px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .cr-routes-map .cr-stop-subtitle { margin:0 8px 6px; font-size:12px; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .cr-routes-map .cr-stop-brief { margin:0 8px 8px; -webkit-line-clamp:2; }
  .cr-routes-map .cr-stop-meta { margin:0 8px 7px; }
  .cr-routes-map .cr-stop-highlights { margin:0 8px 7px; }
  .cr-routes-map .cr-stop-highlight { max-width:100%; overflow-wrap:anywhere; }
  .cr-routes-map .cr-stop-highlight:nth-child(n+3) { display:none; }
  .cr-routes-map .cr-stop-body[data-stop-summary='true'] > .cr-stop-route-context { display:none; }
  .cr-routes-map .cr-stop-route-context { margin:8px 8px 0; padding-top:8px; }
  .cr-routes-map .cr-stop-route-summary { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .cr-routes-map .cr-stop-media,.cr-routes-map .cr-stop-loading-media { height:var(--cr-stop-media-height,126px); }
  .cr-routes-map .cr-stop-media[data-state='error'] { height:48px; }
  .cr-routes-map .cr-stop-loading { min-height:0; gap:10px; }
  .cr-routes-map .cr-stop-link { min-height:40px; margin:0 8px; }
  .cr-routes-map .cr-stop-preview:is([data-compact='1'],[data-compact='2'],[data-compact='3'],[data-compact='4']) .cr-stop-body:has(> .cr-stop-subtitle) > .cr-stop-brief,
  .cr-routes-map .cr-stop-preview:is([data-compact='1'],[data-compact='2'],[data-compact='3'],[data-compact='4']) .cr-stop-highlight:nth-child(n+2) { display:none; }
  .cr-routes-map .cr-stop-preview:is([data-compact='2'],[data-compact='3'],[data-compact='4']) .cr-stop-media,
  .cr-routes-map .cr-stop-preview:is([data-compact='2'],[data-compact='3'],[data-compact='4']) .cr-stop-loading-media { height:96px; }
  .cr-routes-map .cr-stop-preview:is([data-compact='2'],[data-compact='3'],[data-compact='4']) :is(.cr-stop-subtitle,.cr-stop-brief,.cr-stop-route-summary) { -webkit-line-clamp:1; }
  .cr-routes-map .cr-stop-preview:is([data-compact='2'],[data-compact='3'],[data-compact='4']) .cr-stop-route-context :is(.cr-stop-choice,.cr-stop-highlights) { display:none; }
  .cr-routes-map .cr-stop-preview:is([data-compact='3'],[data-compact='4']) :is(.cr-stop-media,.cr-stop-loading-media,.cr-stop-highlights) { display:none; }
  .cr-routes-map .cr-stop-preview:is([data-compact='3'],[data-compact='4']) .cr-stop-title { margin-right:44px; }
  .cr-routes-map .cr-stop-preview[data-compact='4'] :is(.cr-stop-meta,.cr-stop-route-context) { display:none; }
  .cr-routes-map .cr-stop-preview[data-compact='4'] .cr-stop-title { -webkit-line-clamp:1; }
  .cr-routes-map .cr-waypoint-marker,.cr-routes-map .cr-waypoint-marker .cr-map-pin { width:28px; height:28px; }
  .cr-routes-map .cr-waypoint-marker .cr-map-pin { font-size:12px; }
  .cr-routes-map .cr-waypoint-marker .cr-map-pin::after { inset:-10px; }
}

.cr-routes-map .cr-map-credits {
  position: absolute;
  right: 20px;
  bottom: var(--cr-map-bottom, 47px);
  transform: translateY(50%);
  margin: 0;
  padding: 0;
  min-width: 38px;
  height: 38px;
  max-width: calc(100% - 195px);
  border: 0;
  border-radius: 28px;
  color: #193945;
  z-index: 5;
}
.cr-routes-map .cr-map-credits {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  width: max-content;
  background: #fffffff2;
  box-shadow: var(--cr-map-shadow);
}
.cr-routes-map .cr-map-credits-toggle {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  box-shadow: none;
  cursor: pointer;
  user-select: none;
}
.cr-routes-map .cr-map-credits-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.cr-routes-map .cr-map-credits-toggle::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; }
.cr-routes-map .cr-map-credit-links {
  min-width: 0;
  max-width: 0;
  padding: 0;
  opacity: 0;
  transform: translateX(6px);
  overflow: hidden;
  white-space: nowrap;
  scrollbar-width: thin;
  font: 400 10px/1.4 'DM Sans', sans-serif;
  transition: max-width .3s cubic-bezier(.22, 1, .36, 1), padding .3s cubic-bezier(.22, 1, .36, 1), opacity .18s ease, transform .3s cubic-bezier(.22, 1, .36, 1);
}
.cr-routes-map .cr-map-credits.is-expanded .cr-map-credit-links { max-width: 360px; padding: 0 7px 0 12px; opacity: 1; transform: none; overflow-x: auto; }
.cr-routes-map .cr-map-credit-links a { color: #193945; text-decoration: none; }
.cr-routes-map .cr-map-credit-links a:hover { text-decoration: underline; }

@media (hover: hover) {
  .cr-routes-map .cr-map-controls button:hover,
  .cr-routes-map .cr-marina-name:hover { background: #edf3f0; }
  .cr-routes-map .cr-marina-step:hover::before { background: #edf3f0; }
  .cr-routes-map .cr-map-view-toggle[data-view='3d']:hover { background: #20354d; }
}
@media (max-width: 767px) {
  /* Center in the exposed map below the header, not in the sheet-covered map.
   * Both variables exist before map/runtime loading and follow sheet gestures. */
  .cr-routes .cr-map-status {
    top: calc((100% - var(--cr-sheet, 48vh) + var(--cr-map-controls-top, 100px)) / 2);
    transition: top .3s cubic-bezier(.22, 1, .36, 1);
  }
  .cr-routes[data-dragging] .cr-map-status { transition: none; }
  .cr-routes[data-place-covered='true'] .cr-map-status { visibility: hidden; }
  .cr-routes-map .cr-map-controls { right: max(16px,env(safe-area-inset-right,0px)); }
  .cr-map-route-controls { right:calc(max(16px,env(safe-area-inset-right,0px)) + 54px); flex-direction:column; width:88px; border-radius:16px; }
  .cr-map-route-controls button { width:100%; min-height:44px; height:auto; padding:10px 6px; border-radius:14px; line-height:1.25; white-space:normal; overflow-wrap:anywhere; }
  .cr-map-route-controls .cr-map-whole-route { width:100%; }
  .cr-routes-map .cr-map-view-toggle { display: none !important; }
  .cr-routes-map .cr-map-feedback { left: 16px; right: 74px; font-size: 11px; }
  .cr-routes-map .cr-marina-caption { max-width: 220px; }
  .cr-routes-map .cr-map-credits { right: 16px; height: 26px; min-width: 26px; max-width: calc(100% - 198px); }
  .cr-routes-map .cr-map-credits-toggle { flex-basis: 26px; width: 26px; height: 26px; box-shadow: none; }
  .cr-routes-map .cr-map-credits-toggle::after { inset: -9px; }
  .cr-routes-map .cr-map-credits-toggle svg { width: 16px; height: 16px; }
  .cr-routes-map .cr-map-credit-links { display: flex; flex-direction: column; font-size: 9px; line-height: 12px; }
  .cr-routes-map .cr-map-credits.is-expanded .cr-map-credit-links { padding-left: 10px; }
  .cr-routes-map .cr-map-credit-separator { display: none; }
  .cr-routes .cr-map-credits { opacity: var(--cr-place-opacity, 1); transition: bottom .3s cubic-bezier(.22, 1, .36, 1), opacity .18s ease, visibility 0s; }
  .cr-routes[data-place-covered='true'] .cr-map-credits { visibility: hidden; pointer-events: none; transition-delay: 0s, 0s, .18s; }
  .cr-routes[data-dragging] .cr-map-credits { transition: none; }
}
/* Follow exposed map height as the existing results sheet moves. */
@container cr-map-chrome (max-height:216px) {
  .cr-map-route-controls { display:grid; grid-template-columns:88px 44px; grid-template-rows:44px 44px; width:134px; }
  .cr-map-route-controls .cr-map-whole-route { grid-column:2; grid-row:1 / 3; align-self:center; height:44px; }
}
@container cr-map-chrome (max-height:170px) {
  .cr-map-route-controls { display:flex; flex-direction:row; width:auto; }
  .cr-map-topbar .cr-map-route-controls { max-width:calc(100% - 54px); }
  .cr-map-route-controls button { width:auto; }
  .cr-map-route-controls .cr-map-whole-route { width:44px; flex:none; }
}
@media (prefers-reduced-motion: reduce) {
  .cr-routes-map .cr-map-controls button,
  .cr-routes-map .cr-map-credit-links,
  .cr-routes .cr-map-credits,
  .cr-routes .cr-map-status { transition: none; }
}