* {
  box-sizing: border-box;
}

:root {
  --ctm-ui-h: 200;
  --ctm-radius-sm: 2px;
  --ctm-radius-md: 5px;
  --ctm-control-size: 36px;
  --ctm-control-gap: 8px;
  --ctm-control-menu-offset: 44px;
  --ctm-transition-fast: 140ms ease;

  --ctm-page-text: hsl(var(--ctm-ui-h), 15%, 18%);
  --ctm-map-dark-background: hsl(var(--ctm-ui-h), 14%, 14%);
  --ctm-surface-0: hsl(var(--ctm-ui-h), 12%, 99%);
  --ctm-surface-1: hsl(var(--ctm-ui-h), 10%, 96%);
  --ctm-surface-2: hsl(var(--ctm-ui-h), 9%, 91%);
  --ctm-surface-3: hsl(var(--ctm-ui-h), 8%, 82%);
  --ctm-surface-active: hsl(var(--ctm-ui-h), 8%, 88%);
  --ctm-surface-hover: hsl(var(--ctm-ui-h), 10%, 93%);
  --ctm-panel-background: var(--ctm-surface-0);
  --ctm-border: hsla(var(--ctm-ui-h), 20%, 24%, 0.12);
  --ctm-scrollbar-thumb: hsl(var(--ctm-ui-h), 7%, 70%);
  --ctm-shadow-control: 0 1px 5px rgba(0, 0, 0, 0.4);
  --ctm-shadow-panel: 0 8px 22px rgba(18, 33, 45, 0.16);
  --ctm-icon-filter: none;
}

body.ctm-dark {
  --ctm-page-text: hsl(var(--ctm-ui-h), 24%, 92%);
  --ctm-surface-0: hsl(var(--ctm-ui-h), 16%, 20%);
  --ctm-surface-1: hsl(var(--ctm-ui-h), 16%, 16%);
  --ctm-surface-2: hsl(var(--ctm-ui-h), 14%, 24%);
  --ctm-surface-3: hsl(var(--ctm-ui-h), 12%, 34%);
  --ctm-surface-active: hsl(var(--ctm-ui-h), 12%, 36%);
  --ctm-surface-hover: hsl(var(--ctm-ui-h), 13%, 29%);
  --ctm-panel-background: hsl(var(--ctm-ui-h), 18%, 18%);
  --ctm-border: hsla(var(--ctm-ui-h), 36%, 80%, 0.16);
  --ctm-scrollbar-thumb: hsl(var(--ctm-ui-h), 10%, 62%);
  --ctm-shadow-control: 0 2px 8px rgba(0, 0, 0, 0.55);
  --ctm-shadow-panel: 0 12px 28px rgba(0, 0, 0, 0.42);
  --ctm-icon-filter: invert(1);
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  color: var(--ctm-page-text);
}

body.ctm-dark {
  color: var(--ctm-page-text);
}

#map {
  width: 100%;
  height: 100%;
  background-color: var(--map-background);
}

body.ctm-dark #map {
  background-color: var(--ctm-map-dark-background);
}

.track.occupied {
  stroke: var(--track-occupied);
}
.track.reserved {
  stroke: var(--track-reserved);
}
.track {
  stroke: var(--track-free);
}

.train-name,
.station-name {
  font-family: var(--ui-font);
  font-weight: bold;
  font-size: 15px;
}
.station-name .track-number,
.train-name .car-number {
  display: inline-block;
  width: 1.4em;
  text-align: center;
  border-radius: 0.7em;
  background-color: #444;
  color: white;
}
.train-tooltip-meta {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  opacity: 0.82;
}

.station-icon .fill {
  fill: var(--station-color);
}
.station-icon .outline {
  fill: var(--station-outline);
}

.portal-icon .fill {
  fill: var(--portal-color);
}
.portal-icon .outline {
  fill: var(--portal-outline);
}

.signal-icon.green .light {
  fill: var(--signal-green);
}
.signal-icon.yellow .light {
  fill: var(--signal-yellow);
}
.signal-icon.red .light {
  fill: var(--signal-red);
}
.signal-icon .frame {
  fill: var(--signal-outline);
}

.train {
  stroke: var(--train-color);
}
.train.lead-car {
  stroke: var(--lead-car-color);
}
.selected-train-frame {
  stroke: rgba(16, 22, 26, 0.92);
}
.train.selected-train {
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.8));
}
.head-icon path {
  fill: var(--lead-car-color);
}

.coords-control {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  isolation: isolate;
  box-sizing: border-box;
  width: 100vw;
  max-width: none;
  overflow: hidden;
  white-space: nowrap;
  display: grid;
  grid-template-columns: minmax(140px, 1fr) auto minmax(140px, 1fr);
  align-items: center;
  gap: 24px;
  font-family: var(--ui-font);
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  min-height: 72px;

  color: rgba(255, 255, 255, 0.92);
  background: transparent;
  border-radius: 0;
  padding: 26px clamp(16px, 4vw, 48px) 12px;
}

.coords-backdrop {
  --ctm-hud-backdrop-height: 96px;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 990;
  height: var(--ctm-hud-backdrop-height);
  pointer-events: none;
  background:
    linear-gradient(
      to top,
      rgba(10, 16, 22, 0.28) 0%,
      rgba(10, 16, 22, 0.22) 36%,
      rgba(10, 16, 22, 0.12) 68%,
      transparent 100%
    );
  backdrop-filter: blur(30px) saturate(1.08);
  -webkit-backdrop-filter: blur(30px) saturate(1.08);
  mask-image: linear-gradient(
    to top,
    black 0%,
    rgba(0, 0, 0, 0.96) 42%,
    rgba(0, 0, 0, 0.48) 76%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to top,
    black 0%,
    rgba(0, 0, 0, 0.96) 42%,
    rgba(0, 0, 0, 0.48) 76%,
    transparent 100%
  );
}

.leaflet-bottom.leaflet-left {
  left: 0;
  right: 0;
  transform: none;
}

.coords-title {
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

.coords-footer {
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
}

.coords-control a,
.coords-control a:visited {
  color: inherit;
  text-decoration: none;
}

.coords-control a:hover,
.coords-control a:focus,
.coords-mobile-rotator a:hover,
.coords-mobile-rotator a:focus {
  text-decoration: underline;
}

.coords-values {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-width: max-content;
  transition:
    opacity 220ms ease,
    transform 220ms ease;
  will-change: opacity, transform;
}

.coords-values-idle {
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
}

.coords-mobile-rotator {
  display: none;
}

.cursor-coords,
.center-coords {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: max-content;
}

.coords-control .icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  line-height: 24px;
  flex: 0 0 16px;
  transform: translateY(1px);
}

.coords-control .icon {
  filter: invert(1) brightness(1.25);
}

.coords-control .center-x,
.coords-control .center-z,
.coords-control .cursor-x,
.coords-control .cursor-z {
  display: inline-flex;
  justify-content: center;
  overflow: hidden;
  padding: 0 3px;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  transition: width 80ms ease;
  will-change: width;
}

.coords-digit {
  position: relative;
  display: inline-block;
  min-width: 0.62em;
  height: 1.2em;
  overflow: hidden;
  text-align: center;
  vertical-align: -0.16em;
}

.coords-digit-rolling .coords-digit-old,
.coords-digit-rolling .coords-digit-new {
  position: absolute;
  left: 0;
  right: 0;
  display: block;
  height: 1.2em;
  animation-duration: 180ms;
  animation-timing-function: cubic-bezier(0.2, 0.72, 0.26, 1);
  animation-fill-mode: both;
}

.coords-digit-rolling .coords-digit-old {
  top: 0;
  animation-name: ctm-coords-digit-old;
}

.coords-digit-rolling .coords-digit-new {
  top: 0;
  animation-name: ctm-coords-digit-new;
}

@keyframes ctm-coords-digit-old {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-100%);
    opacity: 0;
  }
}

@keyframes ctm-coords-digit-new {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@media (max-width: 720px) {
  .coords-control {
    grid-template-columns: 1fr;
    gap: 4px;
    text-align: center;
    min-height: 62px;
    padding: 22px 14px 10px;
  }

  .coords-title,
  .coords-footer {
    display: none;
  }

  .coords-values {
    grid-area: 1 / 1;
  }

  .coords-mobile-rotator {
    grid-area: 1 / 1;
    display: block;
    max-width: 92vw;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transform: translateY(6px);
    transition:
      opacity 220ms ease,
      transform 220ms ease;
  }

  .coords-mobile-rotator-active .coords-mobile-rotator {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .coords-mobile-rotator-active .coords-values {
    pointer-events: none;
  }

  .coords-mobile-rotator-changing {
    animation: ctm-mobile-rotator-slide 240ms ease;
  }
}

@keyframes ctm-mobile-rotator-slide {
  0% {
    opacity: 0;
    transform: translateY(6px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.leaflet-control-toggle,
.leaflet-control-layers-toggle {
  --ctm-button-icon-filter: var(--ctm-icon-filter);
  display: block;
  width: 36px;
  height: 36px;
  background-position: 50% 50%;
  background-size: 32px 32px;
  border-radius: var(--ctm-radius-md);
  transition:
    background-color var(--ctm-transition-fast),
    filter var(--ctm-transition-fast);
}
.leaflet-control-toggle::before,
.leaflet-control-layers-toggle::before {
  display: block;
  width: var(--ctm-control-size);
  height: var(--ctm-control-size);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 32px 32px;
  border-radius: var(--ctm-radius-md);
  content: "";
  filter: var(--ctm-button-icon-filter);
  transition: filter var(--ctm-transition-fast);
}
.leaflet-control-toggle[aria-pressed="true"],
.leaflet-control-layers-expanded > .leaflet-control-layers-toggle,
.leaflet-control-theme-toggle[aria-pressed="true"] {
  background-color: var(--ctm-surface-active);
}
.leaflet-control-expanded,
.leaflet-control-layers-expanded {
  background-color: var(--ctm-surface-1);
  border: 1px solid var(--ctm-border);
}
.leaflet-control-toggle:hover,
.leaflet-control-layers-toggle:hover {
  background-color: var(--ctm-surface-hover);
}
.leaflet-control-zoom,
.leaflet-control-zoom.leaflet-bar {
  border: 0;
  box-shadow: var(--ctm-shadow-control);
  background: var(--ctm-panel-background);
  border-radius: var(--ctm-radius-md);
  overflow: hidden;
}
.leaflet-control-zoom a {
  width: var(--ctm-control-size);
  height: var(--ctm-control-size);
  line-height: var(--ctm-control-size);
  background-color: var(--ctm-panel-background);
  color: var(--ctm-page-text);
  border-bottom: 1px solid var(--ctm-border);
  transition: background-color var(--ctm-transition-fast);
}
.leaflet-control-zoom a:hover,
.leaflet-control-zoom a:focus {
  background-color: var(--ctm-surface-hover);
}
.leaflet-control-zoom a.leaflet-disabled {
  background-color: var(--ctm-surface-2);
  color: var(--ctm-surface-3);
}
.leaflet-control-zoom a:first-child {
  border-top-left-radius: var(--ctm-radius-md);
  border-top-right-radius: var(--ctm-radius-md);
}
.leaflet-control-zoom a:last-child {
  border-bottom-left-radius: var(--ctm-radius-md);
  border-bottom-right-radius: var(--ctm-radius-md);
  border-bottom: 0;
}
.leaflet-control-ctm,
.leaflet-control-theme,
.leaflet-control-layers {
  position: relative;
  width: var(--ctm-control-size);
  height: var(--ctm-control-size);
  padding: 0 !important;
  margin-top: var(--ctm-control-gap);
  box-shadow: var(--ctm-shadow-control);
  background: var(--ctm-panel-background);
  background-clip: border-box;
  border: 0 !important;
  border-radius: var(--ctm-radius-md);
  overflow: visible;
}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-control-layers-toggle {
  width: var(--ctm-control-size);
  height: var(--ctm-control-size);
}
.leaflet-control-layers > .leaflet-control-layers-toggle {
  position: absolute;
  inset: 0;
  border-radius: var(--ctm-radius-md);
  z-index: 2;
}
.leaflet-control-body,
.leaflet-control-layers-list {
  position: absolute;
  z-index: 1;
  top: 0;
  right: var(--ctm-control-menu-offset);
  min-width: 180px;
  max-width: min(280px, calc(100vw - 76px));
  max-height: calc(100vh - 104px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px;
  background: var(--ctm-panel-background);
  border: 1px solid var(--ctm-border);
  box-shadow: var(--ctm-shadow-panel);
  border-radius: var(--ctm-radius-md);
  opacity: 0;
  pointer-events: none;
  transform: translateX(8px) scale(0.98);
  transform-origin: top right;
  visibility: hidden;
  transition:
    opacity var(--ctm-transition-fast),
    transform var(--ctm-transition-fast),
    visibility 0s linear 140ms;
}
.leaflet-control-expanded .leaflet-control-body,
.leaflet-control-layers-expanded .leaflet-control-layers-list {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) scale(1);
  visibility: visible;
  transition:
    opacity var(--ctm-transition-fast),
    transform var(--ctm-transition-fast);
}
.leaflet-control-layers-separator {
  margin-top: 5px;
  margin-bottom: 5px;
  border-top-color: var(--ctm-border);
}
.leaflet-control-layers-toggle {
  background-image: none !important;
}
.leaflet-control-layers-toggle::before {
  background-image: url(../icons/layers.svg);
}
.leaflet-control-ctm label,
.leaflet-control-layers label {
  font-family: var(--ui-font);
  font-size: 14px;
  color: var(--ctm-page-text);
}
.leaflet-control-layers input[type="radio"],
.leaflet-control-layers input[type="checkbox"] {
  display: none;
}
.leaflet-control-layers input[type="radio"] + span,
.leaflet-control-layers input[type="checkbox"] + span {
  display: inline-block;
  width: 100%;
  border-radius: var(--ctm-radius-sm);
  padding: 0 5px;
  margin-top: 2px;
}
.leaflet-control-layers-overlays label input + span {
  border-radius: var(--ctm-radius-sm);
}
.leaflet-control-layers-overlays label:first-child input + span {
  border-top-left-radius: var(--ctm-radius-sm);
  border-top-right-radius: var(--ctm-radius-sm);
}
.leaflet-control-layers-overlays label:last-child input + span {
  border-bottom-left-radius: var(--ctm-radius-sm);
  border-bottom-right-radius: var(--ctm-radius-sm);
}
.leaflet-control-layers input[type="radio"] + span:hover,
.leaflet-control-layers input[type="checkbox"] + span:hover {
  cursor: pointer;
  background-color: var(--ctm-surface-hover);
}
.leaflet-control-layers input[type="radio"]:checked + span,
.leaflet-control-layers input[type="checkbox"]:checked + span {
  background-color: var(--ctm-surface-active);
  color: var(--ctm-page-text);
  font-weight: bold;
}

.leaflet-control-train-list-toggle {
  background-image: none;
}
.leaflet-control-train-list-toggle::before {
  background-image: url(../icons/trains.svg);
}
.leaflet-control-station-list-toggle {
  background-image: none;
}
.leaflet-control-station-list-toggle::before {
  background-image: url(../icons/stations.svg);
}
.leaflet-control-theme-toggle::before {
  display: block;
  width: var(--ctm-control-size);
  height: var(--ctm-control-size);
  color: var(--ctm-page-text);
  font-family: sans-serif;
  font-size: 24px;
  line-height: var(--ctm-control-size);
  text-align: center;
  background: none;
  content: "A";
  filter: none;
}
.leaflet-control-theme-toggle[data-theme="light"]::before {
  content: "☼";
}
.leaflet-control-theme-toggle[data-theme="dark"]::before {
  content: "☾";
}

.leaflet-control-scrollbar {
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 5px;
}
.ctm-list-filter {
  display: flex;
  margin-bottom: 6px;
}
.ctm-list-filter input {
  width: 100%;
  height: 28px;
  padding: 0 8px;
  font-family: var(--ui-font);
  font-size: 13px;
  color: var(--ctm-page-text);
  background-color: var(--ctm-surface-1);
  border: 1px solid var(--ctm-border);
  border-radius: var(--ctm-radius-sm);
  outline: none;
  transition: border-color var(--ctm-transition-fast),
    background-color var(--ctm-transition-fast);
}
.ctm-list-filter input::placeholder {
  color: var(--ctm-surface-3);
}
.ctm-list-filter input:focus {
  border-color: var(--ctm-surface-3);
  background-color: var(--ctm-surface-0);
}
.leaflet-control-body,
.leaflet-control-layers-list {
  scrollbar-color: var(--ctm-scrollbar-thumb) transparent;
  scrollbar-width: thin;
}
.leaflet-control-body::-webkit-scrollbar,
.leaflet-control-layers-list::-webkit-scrollbar {
  width: 8px;
}
.leaflet-control-body::-webkit-scrollbar-track,
.leaflet-control-layers-list::-webkit-scrollbar-track {
  background: transparent;
}
.leaflet-control-body::-webkit-scrollbar-thumb,
.leaflet-control-layers-list::-webkit-scrollbar-thumb {
  background-color: var(--ctm-scrollbar-thumb);
  background-clip: content-box;
  border: 2px solid transparent;
  border-radius: 8px;
}

.leaflet-right .leaflet-control {
  float: right;
}
.ctm-station-list .station,
.ctm-train-list .train {
  font-family: var(--ui-font);
  font-size: 14px;
  display: block;
  overflow: hidden;
  border-radius: var(--ctm-radius-sm);
  padding: 0 5px;
  margin-top: 2px;
  text-overflow: ellipsis;
  transition:
    background-color var(--ctm-transition-fast),
    padding var(--ctm-transition-fast);
}
.ctm-list-item-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ctm-list-item-details {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding-top: 0;
  font-size: 12px;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
  color: var(--ctm-page-text);
  transition:
    max-height 220ms ease,
    opacity 160ms ease,
    padding-top 220ms ease;
}
.ctm-train-list .train.ctm-list-item-expanded {
  padding-top: 3px;
  padding-bottom: 5px;
}
.ctm-train-list .train.ctm-list-item-expanded .ctm-list-item-details {
  max-height: 120px;
  opacity: 1;
  padding-top: 4px;
}
.ctm-station-list .station:hover,
.ctm-train-list .train:hover {
  cursor: pointer;
  background-color: var(--ctm-surface-hover);
}
.ctm-station-list .station.ctm-list-item-active,
.ctm-train-list .train.ctm-list-item-active {
  background-color: var(--ctm-surface-active);
}

.leaflet-top {
  top: 12px;
}
.leaflet-bottom {
  bottom: 12px;
}
.leaflet-left {
  left: 12px;
}
.leaflet-right {
  right: 12px;
}

@media (max-width: 520px) {
  .leaflet-control-body,
  .leaflet-control-layers-list {
    right: 42px;
    min-width: min(220px, calc(100vw - 72px));
    max-width: calc(100vw - 72px);
  }
}