.kb-map.kb-hero-frame {
  --kb-map-control-size: 2.75rem;
  --kb-map-control-offset-top: clamp(2.45rem, 4.2vw, 3.9rem);
  --kb-map-control-offset-inline: var(--kb-hero-edge);
  width: 100%;
  margin: 0;
  overflow: visible;
  background: var(--kb-map-map-bg);
}

.kb-map .kb-map__stage.kb-hero {
  position: relative;
  width: 100%;
  height: var(--kb-hero-height);
  background: var(--kb-map-stage-veil),
    var(--kb-map-map-bg);
  overflow: hidden;
  isolation: isolate;
}

.kb-map .kb-map__canvas.kb-hero-iframe {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  background: var(--kb-map-map-bg);
}

.kb-map:is(:fullscreen, :-webkit-full-screen, [data-kb-osm-fullscreen-active="1"]) {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
  display: block !important;
  box-sizing: border-box !important;
  width: 100vw !important;
  max-width: none !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: var(--kb-map-map-bg);
  --kb-map-control-offset-top: clamp(1rem, 2vw, 1.45rem);
  --kb-map-control-offset-inline: clamp(1rem, 2vw, 1.45rem);
  --kb-map-nav-bottom: var(--kb-map-control-offset-top);
}

@media (width <= 760px) {
  .kb-map:is(:fullscreen, :-webkit-full-screen, [data-kb-osm-fullscreen-active="1"]) {
    --kb-map-nav-bottom: calc(var(--kb-map-control-offset-top) + var(--kb-type-fine) * 1.3 + var(--kb-space-8));
  }
}

html[data-kb-map-fullscreen],
html[data-kb-map-fullscreen] body {
  overflow: hidden !important;
  overscroll-behavior: none;
}

body[data-kb-map-fullscreen] #wrapper {
  transform: none !important;
}

.kb-map[data-kb-osm-fullscreen-active="1"] * {
  box-sizing: border-box;
}

.kb-map:is(:fullscreen, :-webkit-full-screen, [data-kb-osm-fullscreen-active="1"]) .kb-map__stage.kb-hero,
.kb-map:is(:fullscreen, :-webkit-full-screen, [data-kb-osm-fullscreen-active="1"]) .kb-map__canvas.kb-hero-iframe,
.kb-map:is(:fullscreen, :-webkit-full-screen, [data-kb-osm-fullscreen-active="1"]) .leaflet-container {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  margin: 0 !important;
}

.kb-map[data-kb-osm-fixed-height] .kb-map__stage.kb-hero {
  height: var(--kb-map-fixed-height);
}

.kb-map__noscript {
  margin: 0;
  padding: var(--kb-space-16);
  background: var(--kb-surface-raised);
  color: var(--kb-text-primary);
}

.kb-map__frame {
  min-height: 100%;
}

html:has(.kb-map-page),
.kb-map-page {
  --kb-hero-rim: calc(var(--kb-space-12) + var(--kb-pagehead-line));
  width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--kb-map-map-bg);
}

.kb-map-page .kb-map,
.kb-map-page .kb-map__stage,
.kb-map-page .kb-map__canvas {
  width: 100%;
  height: 100%;
}

.kb-map-page .kb-map.kb-hero-frame {
  overflow: hidden;
}

.kb-map-page .kb-map.kb-hero-frame:not([data-kb-osm-fullscreen-active="1"]) {
  --kb-map-control-offset-top: calc(var(--kb-header-height) * 1.4 + var(--kb-space-24));
}

.kb-map-page .kb-map .kb-map__stage.kb-hero {
  height: 100vh;
  height: 100dvh;
}

.kb-map-marker {
  background: transparent;
  border: 0;
}

.kb-map-marker svg,
.kb-map-marker__bicycle-sign {
  display: block;
  overflow: visible;
}

.kb-map-marker__svg {
  width: 38px;
  height: 52px;
}

.kb-map-marker__post {
  fill: var(--kb-map-marker-post);
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: scale 0.2s ease;
}

.kb-map-marker__sign {
  transition: translate 0.2s ease;
}

.kb-map-marker__svg--venue {
  width: 32px;
  height: 46px;
}

.kb-map-marker__venue-shape {
  fill: var(--kb-map-marker-venue);
}

.kb-map-marker__venue-dot {
  fill: var(--kb-map-marker-paper);
}

.kb-map-marker__parking-text,
.kb-map-marker__info-text {
  fill: var(--kb-map-marker-paper);
}

.kb-map-marker__parking-shape,
.kb-map-marker__info-shape {
  fill: var(--kb-map-marker-ink);
}

.kb-map-marker__parking-text,
.kb-map-marker__stop-text {
  font-family: var(--kb-font-body);
  font-weight: var(--kb-weight-label);
  text-anchor: middle;
}

.kb-map-marker__parking-text {
  font-size: var(--kb-type-h3);
}

.kb-map-marker__stop-shape,
.kb-map-marker__info-dot {
  fill: var(--kb-map-marker-stop);
}

.kb-map-marker__stop-text {
  fill: var(--kb-map-marker-ink);
  font-size: var(--kb-type-h3);
}

.kb-map-marker__info-text {
  font-family: Georgia, serif;
  font-size: var(--kb-type-h4);
  font-style: italic;
  font-weight: var(--kb-weight-heading);
  text-anchor: middle;
}

.kb-map-marker__bicycle-sign {
  position: relative;
}

.kb-map-marker__bicycle-shape {
  fill: var(--kb-map-marker-ink);
}

.kb-map-marker__bicycle-sign img {
  position: absolute;
  top: 18px;
  left: 19px;
  width: 14px;
  height: 14px;
  object-fit: contain;
  transform: translate(-50%, -50%);
  filter: brightness(0) invert(1);
}

.kb-map__canvas > :is(.leaflet-map-pane, .leaflet-control-container) {
  transition: opacity 0.4s ease;
}

.kb-map__canvas[data-kb-osm-state="loading"] > :is(.leaflet-map-pane, .leaflet-control-container) {
  opacity: 0;
}

.kb-map-marker > * {
  transform-origin: 50% 100%;
  transition: opacity 0.25s ease, scale 0.25s ease, translate 0.2s ease;
}

.kb-map__canvas[data-kb-osm-state="entering"] .kb-map-marker > * {
  animation: kb-marker-pop 0.35s cubic-bezier(0.2, 0.8, 0.3, 1.3) calc(0.4s + var(--kb-marker-order, 1) * 60ms) backwards;
}

.kb-map__canvas[data-kb-osm-state="entering"] .kb-map-marker--venue > * {
  animation: kb-marker-drop 0.45s cubic-bezier(0.3, 1.4, 0.5, 1) 0.25s backwards;
}

.kb-map__canvas[data-kb-osm-selected] .kb-map-marker:not([data-kb-selected], .kb-map-marker--venue) > * {
  opacity: 0.4;
}

.kb-map-marker[data-kb-selected] > * {
  scale: 1.15;
}

@media (hover: hover) {
  .kb-map-marker--venue:hover > * {
    translate: 0 -2px;
  }

  .kb-map-marker:hover .kb-map-marker__sign {
    translate: 0 -2px;
  }

  .kb-map-marker:hover .kb-map-marker__post {
    scale: 1 1.12;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kb-map-marker > * {
    transition: opacity 0.25s ease;
  }

  .kb-map__canvas[data-kb-osm-state] .kb-map-marker > * {
    animation: none;
    translate: none;
  }

  .kb-map-marker__post,
  .kb-map-marker__sign {
    transition: none;
  }
}

@keyframes kb-marker-pop {
  from {
    opacity: 0;
    scale: 0.6;
  }
}

@keyframes kb-marker-drop {
  from {
    opacity: 0;
    translate: 0 -12px;
  }
}

.kb-map__sitegraphic {
  display: block;
  max-width: none;
  max-height: none;
  overflow: visible !important;
  filter: none;
  pointer-events: none;
}

.kb-map__sitegraphic image {
  pointer-events: none;
}

.kb-map .leaflet-container {
  width: 100%;
  height: 100%;
  font: inherit;
  background: var(--kb-map-map-bg);
}

.kb-map .kb-map-area-label span {
  position: absolute;
  translate: -50% -50%;
  color: var(--kb-map-label-area);
  font-size: calc(var(--kb-type-h3) * var(--kb-map-area-scale, 1));
  font-style: italic;
  font-weight: var(--kb-weight-heading);
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-shadow: 0 0 2px var(--kb-map-label-halo), 0 0 4px var(--kb-map-label-halo);
  pointer-events: none;
}

.kb-map .leaflet-zoom-anim .kb-map-area-label span {
  transition: font-size 0.25s cubic-bezier(0, 0, 0.25, 1);
}

.kb-map .leaflet-top.leaflet-left,
.kb-map .leaflet-bottom.leaflet-left {
  left: var(--kb-map-control-offset-inline);
}

.kb-map .leaflet-top.leaflet-left {
  top: var(--kb-map-control-offset-top);
}

.kb-map .leaflet-bottom.leaflet-left {
  bottom: clamp(0.75rem, 1.8vw, 1.2rem);
}

.kb-map .leaflet-top.leaflet-right,
.kb-map .leaflet-bottom.leaflet-right {
  right: var(--kb-map-control-offset-inline);
}

.kb-map .leaflet-top.leaflet-right {
  top: var(--kb-map-control-offset-top);
}

.kb-map .leaflet-bottom.leaflet-right {
  bottom: clamp(0.75rem, 1.8vw, 1.2rem);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  column-gap: 0.75em;
  width: auto;
  max-width: calc(100% - (2 * var(--kb-map-control-offset-inline)));
  pointer-events: none;
}

.kb-map .leaflet-left .leaflet-control {
  margin-left: 0;
}

.kb-map .leaflet-right .leaflet-control {
  float: none;
  width: auto;
  max-width: 100%;
  margin: 0;
  text-align: right;
  pointer-events: auto;
}

.kb-map .leaflet-top .leaflet-control {
  margin-top: 0;
}

.kb-map-nav.leaflet-bar {
  display: grid;
  gap: 1px;
  border: 0;
  background: var(--kb-map-control-frame);
  box-shadow: var(--kb-shadow-sm);
}

.kb-map-nav__spacer {
  width: var(--kb-map-control-size);
  height: 0.34rem;
  pointer-events: none;
}

.kb-map .kb-map-nav.leaflet-bar .kb-map-nav__button {
  --kb-focus-ring-offset: var(--kb-focus-ring-inset-offset);
  --kb-focus-ring-shadow: var(--kb-focus-ring-inset-shadow);
  display: grid;
  place-items: center;
  width: var(--kb-map-control-size);
  min-width: var(--kb-map-control-size);
  height: var(--kb-map-control-size);
  min-height: var(--kb-map-control-size);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--kb-map-control-surface);
  color: var(--kb-text-structure);
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  font-size: var(--kb-type-h3);
  font-weight: var(--kb-weight-label);
  line-height: var(--kb-leading-control);
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  box-shadow: none;
  transition: background-color var(--kb-duration-soft) ease,
    color var(--kb-duration-soft) ease;
}

.kb-map .kb-map-nav.leaflet-bar a.kb-map-nav__button {
  display: grid;
  width: var(--kb-map-control-size);
  height: var(--kb-map-control-size);
  line-height: var(--kb-leading-control);
}

.kb-map .kb-map-nav.leaflet-bar a.kb-map-nav__button:first-child,
.kb-map .kb-map-nav.leaflet-bar a.kb-map-nav__button:last-child {
  border-radius: 0;
}

.kb-map .kb-map-nav.leaflet-bar .kb-map-nav__button:visited {
  color: var(--kb-text-structure);
}

.kb-map .kb-map-nav.leaflet-bar .kb-map-nav__button:hover,
.kb-map .kb-map-nav.leaflet-bar .kb-map-nav__button:focus-visible {
  background: var(--kb-surface-action-hover);
  color: var(--kb-text-on-action-hover);
  text-decoration: none;
}

.kb-map .kb-map-nav.leaflet-bar .kb-map-nav__button:active {
  background: var(--kb-surface-selected);
  color: var(--kb-text-on-selected);
}

.kb-map .kb-map-nav.leaflet-bar .kb-map-nav__button svg {
  display: block;
  width: 1.15rem;
  height: 1.15rem;
}

.kb-map-nav__icon--fill {
  fill: currentColor;
}

.kb-map-nav__icon--stroke {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: square;
}

.kb-map .leaflet-control-scale {
  margin: 0;
}

.kb-map .leaflet-control-scale-line {
  border-color: var(--kb-text-structure);
  background: var(--kb-map-scale-surface);
  color: var(--kb-text-structure);
  font: inherit;
  font-size: var(--kb-type-status);
}

.kb-map :is(.leaflet-control-attribution, .kb-map__notice) {
  width: auto;
  max-width: 100%;
  margin: 0;
  padding: 0;
  background: none;
  color: var(--kb-text-primary);
  font: inherit;
  font-size: var(--kb-type-fine);
  font-weight: var(--kb-weight-emphasis);
  line-height: 1.3;
  text-align: right;
  text-shadow: var(--kb-text-halo-light);
  white-space: normal;
  pointer-events: auto;
}

.kb-map .leaflet-control-attribution a {
  color: inherit;
}

.kb-map-page .kb-map:not([data-kb-osm-fullscreen-active="1"]) :is(.leaflet-bottom.leaflet-right, .leaflet-bottom.leaflet-left) {
  bottom: var(--kb-hero-rim);
  max-width: var(--kb-hero-side);
}

.kb-map-page .kb-map .leaflet-top.leaflet-left {
  top: auto;
  bottom: calc(var(--kb-pagehead-strip) + var(--kb-space-12));
  left: 50%;
  translate: -50% 0;
}

.kb-map-page .kb-map[data-kb-osm-fullscreen-active="1"] .leaflet-top.leaflet-left {
  bottom: var(--kb-map-nav-bottom);
}

.kb-map-page .kb-map .kb-map-nav.leaflet-bar {
  grid-auto-flow: column;
}

.kb-map-page .kb-map .kb-map-nav__spacer {
  width: 0.34rem;
  height: var(--kb-map-control-size);
}

@media (width <= 64rem) {
  .kb-map-page .kb-map:not([data-kb-osm-fullscreen-active="1"]) .leaflet-bottom.leaflet-left {
    bottom: calc(var(--kb-pagehead-strip) + var(--kb-space-12));
    max-width: none;
  }

  .kb-map-page .kb-map:not([data-kb-osm-fullscreen-active="1"]) .leaflet-bottom.leaflet-right {
    right: var(--kb-container-padding-inline);
    bottom: var(--kb-hero-rim);
    justify-content: flex-start;
    row-gap: var(--kb-space-4);
    max-width: none;
    max-height: calc(100% - var(--kb-space-12) - var(--kb-map-control-offset-top) - var(--kb-space-48));
    writing-mode: vertical-rl;
    rotate: 180deg;
  }

  .kb-map-page .kb-map:not([data-kb-osm-fullscreen-active="1"]) .leaflet-right .leaflet-control {
    text-align: start;
  }
}

:root[data-kb-osm-compact] .kb-map-page .kb-map.kb-hero-frame:not([data-kb-osm-fullscreen-active="1"]) {
  --kb-map-control-offset-top: var(--kb-space-12);
  --kb-map-control-offset-inline: var(--kb-space-12);
}

:root[data-kb-osm-compact] .kb-map-page .kb-map:not([data-kb-osm-fullscreen-active="1"]) .leaflet-top.leaflet-left {
  top: var(--kb-map-control-offset-top);
  bottom: auto;
  left: var(--kb-map-control-offset-inline);
  translate: none;
}

:root[data-kb-osm-compact] .kb-map-page .kb-map:not([data-kb-osm-fullscreen-active="1"]) .kb-map-nav.leaflet-bar {
  grid-auto-flow: row;
}

:root[data-kb-osm-compact] .kb-map-page .kb-map:not([data-kb-osm-fullscreen-active="1"]) .kb-map-nav__spacer {
  width: var(--kb-map-control-size);
  height: 0.34rem;
}

:root[data-kb-osm-compact] .kb-map-page .kb-map :is(.leaflet-bottom.leaflet-right, .leaflet-bottom.leaflet-left) {
  right: var(--kb-map-control-offset-inline);
  bottom: var(--kb-space-8);
  justify-content: flex-end;
  max-width: calc(100% - 2 * var(--kb-map-control-offset-inline));
  max-height: none;
  writing-mode: horizontal-tb;
  rotate: none;
}

:root[data-kb-osm-compact] .kb-map-page .kb-map .leaflet-right .leaflet-control {
  text-align: right;
}

.kb-map .leaflet-popup-content-wrapper {
  border-radius: 0;
  background: var(--kb-surface-raised);
  color: var(--kb-text-primary);
  box-shadow: var(--kb-shadow-md);
}

.kb-map .leaflet-popup-content {
  margin: var(--kb-space-16) var(--kb-space-16);
  font-size: var(--kb-type-meta);
  line-height: var(--kb-leading-lead);
}

.kb-map .leaflet-popup-content p {
  margin: 0;
}

.kb-map .leaflet-popup-tip {
  background: var(--kb-surface-raised);
}

.kb-map .leaflet-popup[data-kb-popup-side="bottom"] .leaflet-popup-tip-container {
  top: -19px;
  margin-top: 0;
  rotate: 180deg;
}

.kb-map .leaflet-popup:is([data-kb-popup-side="left"], [data-kb-popup-side="right"]) .leaflet-popup-tip-container {
  top: calc(50% - 10px);
  margin: 0;
}

.kb-map .leaflet-popup[data-kb-popup-side="left"] .leaflet-popup-tip-container {
  left: calc(100% - 11px);
  rotate: -90deg;
}

.kb-map .leaflet-popup[data-kb-popup-side="right"] .leaflet-popup-tip-container {
  left: -29px;
  rotate: 90deg;
}

.kb-map-route {
  stroke-linecap: round;
  stroke-linejoin: round;
  paint-order: stroke;
}

@media (width <= 760px) {
  .kb-map.kb-hero-frame:not([data-kb-osm-fullscreen-active="1"]) {
    --kb-map-control-offset-top: 1.85rem;
  }

  .kb-map .kb-map__stage.kb-hero {
    height: min(78vh, 34rem);
  }
}

.kb-map-marker__train {
  fill: var(--kb-map-marker-ink);
}

.kb-map-marker__train-window {
  fill: var(--kb-map-marker-stop);
}

.kb-map .kb-map-point-label span {
  position: absolute;
  translate: -50% var(--kb-space-8);
  padding: var(--kb-space-2) var(--kb-space-6);
  background: var(--kb-surface-action);
  color: var(--kb-text-on-dark);
  font-size: var(--kb-type-status);
  font-weight: var(--kb-weight-label);
  line-height: var(--kb-leading-snug);
  white-space: nowrap;
  pointer-events: none;
}

.kb-map__live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.kb-map__hint {
  position: absolute;
  bottom: calc(var(--kb-pagehead-strip) + var(--kb-space-12) + var(--kb-map-control-size) + var(--kb-space-12));
  left: 50%;
  z-index: 2;
  margin: 0;
  padding: var(--kb-space-8) var(--kb-space-12);
  translate: -50% 0;
  background: var(--kb-surface-content);
  color: var(--kb-text-primary);
  font-size: var(--kb-type-meta);
  font-weight: var(--kb-weight-emphasis);
  line-height: var(--kb-leading-snug);
  white-space: nowrap;
  animation: kb-map-hint 3.2s ease both;
  pointer-events: none;
}

.kb-map[data-kb-osm-fullscreen-active="1"] .kb-map__hint {
  bottom: calc(var(--kb-map-nav-bottom) + var(--kb-map-control-size) + var(--kb-space-12));
}

:root[data-kb-osm-compact] .kb-map:not([data-kb-osm-fullscreen-active="1"]) .kb-map__hint {
  bottom: auto;
  top: var(--kb-space-12);
  left: calc(var(--kb-space-12) + var(--kb-map-control-size) + var(--kb-space-12));
  translate: none;
}

@keyframes kb-map-hint {
  0%, 100% {
    opacity: 0;
  }

  12%, 85% {
    opacity: 1;
  }
}