.urbanlink-map-page {
  min-height: calc(100vh - 13rem);
  background: var(--urbanlink-surface, #fffdf8);
  color: var(--urbanlink-ink, #2b2118);
}

.urbanlink-map-intro {
  border-bottom: 1px solid var(--urbanlink-border, #e7d7c5);
  background: linear-gradient(135deg, #fff9ed 0%, #fffdf8 70%);
}

.urbanlink-map-intro-inner {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 2rem .75rem 1.5rem;
}

.urbanlink-map-intro h1 {
  max-width: 44rem;
  margin: .35rem 0 .65rem;
  color: var(--urbanlink-navy-dark, #3a2117);
  font-size: clamp(1.7rem, 4vw, 3rem);
  line-height: 1.13;
}

.urbanlink-map-intro p {
  max-width: 47rem;
  margin: 0;
  color: var(--urbanlink-muted, #725f50);
  line-height: 1.65;
}

.urbanlink-map-back {
  flex: 0 0 auto;
  white-space: nowrap;
}

.urbanlink-map-workspace {
  padding-top: .75rem;
  padding-bottom: 2.5rem;
}

.urbanlink-map-toolbar-label {
  display: block;
  margin-bottom: .4rem;
  color: var(--urbanlink-muted, #725f50);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.urbanlink-map-sidebar-mode {
  padding: 0 1rem .65rem;
}

.urbanlink-map-sidebar-area {
  display: grid;
  gap: .25rem;
  padding: 0 1rem .65rem;
}

.urbanlink-map-area-chips {
  display: flex;
  max-height: 5.6rem;
  flex-wrap: wrap;
  gap: .28rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: .05rem .05rem .12rem;
}

.urbanlink-map-area-chip {
  min-height: 1.7rem;
  max-width: 100%;
  padding: .25rem .52rem;
  border: 1px solid var(--urbanlink-border, #e7d7c5);
  border-radius: 999px;
  background: #fff;
  color: var(--urbanlink-muted, #725f50);
  font: inherit;
  font-size: .65rem;
  font-weight: 750;
  line-height: 1.1;
  text-align: left;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}

.urbanlink-map-area-chip:hover,
.urbanlink-map-area-chip.is-active {
  border-color: var(--urbanlink-focus, #8a3a10);
  background: var(--urbanlink-teal-soft, #fff0dc);
  color: var(--urbanlink-focus, #8a3a10);
}

.urbanlink-map-area-chip.is-active {
  box-shadow: 0 0 0 .14rem rgba(138, 58, 16, .12);
  transform: translateY(-1px);
}

.urbanlink-map-area-chip:focus-visible,
.urbanlink-map-mode-chip:focus-visible,
.urbanlink-map-result-button:focus-visible,
.urbanlink-map-clear:focus-visible,
#map-retry-button:focus-visible {
  border-color: var(--urbanlink-focus, #8a3a10);
  outline: 3px solid rgba(138, 58, 16, .28);
  outline-offset: 1px;
}

.urbanlink-map-mode-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.urbanlink-map-mode-chip {
  display: inline-flex;
  min-height: 2.35rem;
  align-items: center;
  gap: .35rem;
  padding: .35rem .65rem;
  border: 1px solid color-mix(in srgb, var(--mode-color, #64748b) 45%, #e7d7c5);
  border-radius: 999px;
  background: #fff;
  color: var(--mode-color, #64748b);
  font: inherit;
  font-size: .78rem;
  font-weight: 850;
  transition: box-shadow .15s ease, background-color .15s ease, color .15s ease, transform .15s ease;
}

.urbanlink-map-mode-chip:hover,
.urbanlink-map-mode-chip.is-active {
  border-color: var(--mode-color, #64748b);
  background: var(--mode-color, #64748b);
  color: #fff;
}

.urbanlink-map-mode-chip.is-active {
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--mode-color, #64748b) 22%, transparent), 0 0 .9rem color-mix(in srgb, var(--mode-color, #64748b) 38%, transparent);
  transform: translateY(-1px);
}

.urbanlink-map-mode-chip-dot {
  width: .55rem;
  height: .55rem;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: currentColor;
}

.urbanlink-map-mode-chip.is-active .urbanlink-map-mode-chip-dot {
  border-color: #fff;
  background: #fff;
}

.urbanlink-map-status {
  min-height: 1.4rem;
  margin: .8rem .15rem .65rem;
  color: var(--urbanlink-muted, #725f50);
  font-size: .8rem;
}

.urbanlink-map-status.is-ready { color: #176b45; }
.urbanlink-map-status.is-error { color: var(--urbanlink-danger, #b42318); }
.urbanlink-map-status.is-empty { color: var(--urbanlink-muted, #725f50); }

.urbanlink-map-alert {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin: .75rem 0;
  padding: .8rem .9rem;
  border: 1px solid #e7b4ae;
  border-radius: .8rem;
  background: #fff1ef;
  color: #7b271f;
  font-size: .82rem;
}

.urbanlink-map-alert span { flex: 1 1 auto; }

.urbanlink-map-layout {
  display: grid;
  grid-template-columns: minmax(17rem, 22rem) minmax(0, 1fr);
  min-height: 42rem;
  overflow: hidden;
  border: 1px solid var(--urbanlink-border, #e7d7c5);
  border-radius: 1.15rem;
  background: #fff;
  box-shadow: 0 12px 30px rgba(58, 33, 23, .09);
}

.urbanlink-map-panel {
  min-width: 0;
  overflow: hidden;
  border-right: 1px solid var(--urbanlink-border, #e7d7c5);
  background: #fffdf8;
}

.urbanlink-map-panel-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: .75rem;
  padding: 1.05rem 1rem .35rem;
}

.urbanlink-map-panel h2 {
  margin: .25rem 0 0;
  color: var(--urbanlink-navy-dark, #3a2117);
  font-size: 1rem;
}

.urbanlink-map-count {
  display: inline-grid;
  min-width: 2rem;
  min-height: 2rem;
  place-items: center;
  border-radius: 999px;
  background: var(--urbanlink-teal-soft, #fff0dc);
  color: var(--urbanlink-teal, #c2410c);
  font-size: .75rem;
  font-weight: 800;
}

.urbanlink-map-summary {
  margin: 0;
  padding: 0 1rem .8rem;
  color: var(--urbanlink-muted, #725f50);
  font-size: .75rem;
  line-height: 1.45;
}

.urbanlink-map-selection {
  position: relative;
  display: grid;
  gap: .25rem;
  margin: 0 .75rem .55rem;
  padding: .7rem 2.4rem .7rem .75rem;
  border-left: 3px solid var(--urbanlink-teal, #c2410c);
  border-radius: .55rem;
  background: var(--urbanlink-teal-soft, #fff0dc);
}

.urbanlink-map-selection-label {
  color: var(--urbanlink-teal, #c2410c);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.urbanlink-map-selection strong {
  overflow-wrap: anywhere;
  font-size: .8rem;
  line-height: 1.35;
}

.urbanlink-map-clear {
  position: absolute;
  top: .55rem;
  right: .55rem;
  display: grid;
  width: 1.65rem;
  height: 1.65rem;
  place-items: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--urbanlink-focus, #8a3a10) 35%, transparent);
  border-radius: 50%;
  background: #fff;
  color: var(--urbanlink-focus, #8a3a10);
  font: inherit;
  font-size: .75rem;
  font-weight: 800;
}

.urbanlink-map-clear:hover {
  background: var(--urbanlink-focus, #8a3a10);
  color: #fff;
}

.urbanlink-map-detail {
  display: grid;
  gap: .25rem;
  margin: 0 .75rem .7rem;
  padding: .7rem .75rem;
  border: 1px solid var(--urbanlink-border, #e7d7c5);
  border-radius: .65rem;
  background: #fff;
}

.urbanlink-map-detail-kicker {
  color: var(--urbanlink-muted, #725f50);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.urbanlink-map-detail h3 {
  margin: 0;
  font-size: .85rem;
  line-height: 1.3;
}

.urbanlink-map-detail-meta,
.urbanlink-map-detail-description {
  margin: 0;
  color: var(--urbanlink-muted, #725f50);
  font-size: .7rem;
  line-height: 1.45;
}

.urbanlink-map-detail-description {
  max-height: 4.2rem;
  overflow-y: auto;
  color: var(--urbanlink-ink, #2b2118);
}

.urbanlink-map-detail-link {
  color: var(--urbanlink-focus, #8a3a10);
  font-size: .7rem;
  font-weight: 800;
}

.urbanlink-map-popup-content {
  display: grid;
  gap: .28rem;
  color: var(--urbanlink-ink, #2b2118);
}

.urbanlink-map-popup-title {
  font-size: .9rem;
  line-height: 1.25;
}

.urbanlink-map-popup-canonical,
.urbanlink-map-popup-alias,
.urbanlink-map-popup-description {
  color: var(--urbanlink-muted, #725f50);
  line-height: 1.35;
}

.urbanlink-map-popup-alias {
  font-style: italic;
}

.urbanlink-map-popup-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .12rem .3rem;
  line-height: 1.35;
}

.urbanlink-map-popup-link {
  color: var(--urbanlink-focus, #8a3a10);
  font-size: .75rem;
  font-weight: 800;
}

.urbanlink-map-result-swatch,
.urbanlink-map-stop-dot {
  flex: 0 0 auto;
  border-radius: 999px;
}

.urbanlink-map-list-section {
  border-top: 1px solid var(--urbanlink-border, #e7d7c5);
}

.urbanlink-map-list-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  padding: .55rem .8rem .3rem;
}

.urbanlink-map-list-heading h3 {
  margin: 0;
  color: var(--urbanlink-navy-dark, #3a2117);
  font-size: .76rem;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.urbanlink-map-list-heading span {
  color: var(--urbanlink-muted, #725f50);
  font-size: .68rem;
}

.urbanlink-map-list {
  max-height: 11.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 .55rem .65rem;
}

.urbanlink-map-line-list {
  max-height: 8rem;
}

.urbanlink-map-route-list {
  max-height: 11.5rem;
}

.urbanlink-map-stop-list {
  max-height: 12.5rem;
}

.urbanlink-map-list-item {
  margin: .08rem 0;
}

.urbanlink-map-result-button {
  display: flex;
  width: 100%;
  align-items: center;
  gap: .5rem;
  padding: .38rem .4rem;
  border: 1px solid transparent;
  border-radius: .65rem;
  background: transparent;
  color: var(--urbanlink-ink, #2b2118);
  font: inherit;
  text-align: left;
  transition: background-color .15s ease, border-color .15s ease;
}

.urbanlink-map-result-button:hover,
.urbanlink-map-result-button.is-active {
  border-color: var(--urbanlink-border, #e7d7c5);
  background: #fff;
}

.urbanlink-map-result-button.is-active {
  box-shadow: inset 3px 0 0 var(--urbanlink-teal, #c2410c);
}

.urbanlink-map-line-button {
  --item-color: #64748b;
  border-left: 3px solid var(--item-color);
  background: color-mix(in srgb, var(--item-color) 7%, #fffdf8);
}

.urbanlink-map-line-button:hover,
.urbanlink-map-line-button.is-active {
  border-color: color-mix(in srgb, var(--item-color) 58%, #e7d7c5);
  background: color-mix(in srgb, var(--item-color) 13%, #fff);
}

.urbanlink-map-line-button .urbanlink-map-result-swatch {
  width: 1.15rem;
  min-height: .3rem;
  height: .3rem;
  align-self: center;
  border-radius: 999px;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--item-color) 18%, transparent);
}

.urbanlink-map-route-button {
  --item-color: #64748b;
  border-color: color-mix(in srgb, var(--item-color) 22%, transparent);
  background: #fff;
}

.urbanlink-map-route-button:hover,
.urbanlink-map-route-button.is-active {
  border-color: color-mix(in srgb, var(--item-color) 55%, #e7d7c5);
  background: color-mix(in srgb, var(--item-color) 6%, #fff);
}

.urbanlink-map-route-button.is-active {
  box-shadow: inset 3px 0 0 var(--item-color);
}

.urbanlink-map-route-marker {
  display: grid;
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 1.15rem;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--item-color) 48%, #e7d7c5);
  border-radius: .35rem;
  background: color-mix(in srgb, var(--item-color) 8%, #fff);
  color: var(--item-color);
  font-size: .82rem;
  font-weight: 850;
  line-height: 1;
}

.urbanlink-map-result-swatch {
  width: .22rem;
  min-height: 1.5rem;
  align-self: stretch;
}

.urbanlink-map-stop-dot {
  width: .6rem;
  height: .6rem;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--urbanlink-border, #e7d7c5);
}

.urbanlink-map-result-copy {
  display: grid;
  min-width: 0;
  gap: .08rem;
}

.urbanlink-map-result-copy strong,
.urbanlink-map-result-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.urbanlink-map-result-copy strong {
  font-size: .75rem;
  line-height: 1.2;
}

.urbanlink-map-result-copy small {
  color: var(--urbanlink-muted, #725f50);
  font-size: .66rem;
  line-height: 1.3;
}

.urbanlink-map-result-copy .urbanlink-map-alias-label {
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
  color: var(--urbanlink-muted, #725f50);
  font-style: italic;
}

.urbanlink-map-result-copy .urbanlink-map-result-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .12rem .3rem;
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.urbanlink-map-meta-separator {
  color: var(--urbanlink-border, #e7d7c5);
}

.urbanlink-map-line-label {
  color: var(--urbanlink-teal, #c2410c);
  font-style: italic;
  font-weight: 700;
}

.urbanlink-map-area-label {
  color: var(--urbanlink-muted, #725f50);
  font-weight: 700;
}

.urbanlink-map-empty {
  margin: 0;
  padding: .2rem .8rem .65rem;
  color: var(--urbanlink-muted, #725f50);
  font-size: .75rem;
}

.urbanlink-map-canvas-wrap {
  position: relative;
  min-width: 0;
  min-height: 42rem;
  background: #e8e3d8;
}

.urbanlink-map-canvas {
  position: absolute;
  inset: 0;
  min-height: 20rem;
  outline: none;
}

.urbanlink-map-canvas.is-svg-fallback,
.urbanlink-map-canvas.is-leaflet-fallback {
  overflow: hidden;
  background: #eef3f4;
}

.urbanlink-map-canvas.is-svg-fallback {
  touch-action: none;
}

.urbanlink-map-canvas.is-leaflet-fallback .leaflet-container {
  width: 100%;
  height: 100%;
  background: #eef3f4;
  font: inherit;
}

.urbanlink-map-fallback-svg {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  user-select: none;
}

.urbanlink-map-fallback-svg:active {
  cursor: grabbing;
}

.urbanlink-map-fallback-route,
.urbanlink-map-fallback-stop {
  cursor: pointer;
  vector-effect: non-scaling-stroke;
}

.urbanlink-map-fallback-banner {
  position: absolute;
  z-index: 1100;
  top: .75rem;
  left: .75rem;
  max-width: min(31rem, calc(100% - 1.5rem));
  padding: .5rem .7rem;
  border: 1px solid #c7d8dc;
  border-radius: .65rem;
  background: rgba(255, 253, 248, .94);
  box-shadow: 0 .35rem 1rem rgba(43, 33, 24, .12);
  color: #40545b;
  font-size: .72rem;
  line-height: 1.35;
  pointer-events: none;
}

.urbanlink-map-hover-card {
  position: absolute;
  z-index: 4;
  display: grid;
  width: max-content;
  max-width: min(19rem, calc(100% - 1rem));
  gap: .25rem;
  padding: .65rem .75rem;
  border: 1px solid var(--urbanlink-border, #e7d7c5);
  border-radius: .75rem;
  background: rgba(255, 253, 248, .98);
  box-shadow: 0 .7rem 1.8rem rgba(43, 33, 24, .2), 0 0 0 1px rgba(255, 255, 255, .8);
  color: var(--urbanlink-ink, #2b2118);
  pointer-events: none;
  backdrop-filter: blur(8px);
}

.urbanlink-map-sidebar-hover-card {
  position: fixed;
  z-index: 30;
  max-width: min(20rem, calc(100vw - 1rem));
}

.urbanlink-map-hover-kicker {
  color: var(--urbanlink-muted, #725f50);
  font-size: .6rem;
  font-weight: 850;
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.urbanlink-map-hover-title {
  font-size: .78rem;
  font-weight: 850;
  line-height: 1.25;
}

.urbanlink-map-hover-meta,
.urbanlink-map-hover-description {
  color: var(--urbanlink-muted, #725f50);
  font-size: .66rem;
  line-height: 1.35;
}

.urbanlink-map-hover-description {
  color: var(--urbanlink-ink, #2b2118);
}

.urbanlink-map-canvas-wrap .maplibregl-popup-content {
  min-width: 13rem;
  padding: .85rem;
  border: 1px solid var(--urbanlink-border, #e7d7c5);
  border-radius: .8rem;
  background: rgba(255, 253, 248, .97);
  box-shadow: 0 .8rem 2rem rgba(43, 33, 24, .2);
  color: var(--urbanlink-ink, #2b2118);
}

.urbanlink-map-canvas-wrap .maplibregl-popup-close-button {
  top: .25rem;
  right: .35rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  color: var(--urbanlink-muted, #725f50);
  font-size: 1.1rem;
}

.urbanlink-map-canvas-wrap .maplibregl-popup-close-button:hover {
  background: var(--urbanlink-teal-soft, #fff0dc);
  color: var(--urbanlink-focus, #8a3a10);
}

.urbanlink-map-canvas:focus-visible {
  box-shadow: inset 0 0 0 4px rgba(138, 58, 16, .58);
}

@media (max-width: 767.98px) {
  .urbanlink-map-intro-inner {
    align-items: start;
    flex-direction: column;
    padding-top: 1.25rem;
  }

  .urbanlink-map-back {
    width: 100%;
  }

  .urbanlink-map-layout {
    display: flex;
    min-height: 0;
    flex-direction: column-reverse;
  }

  .urbanlink-map-canvas-wrap {
    min-height: 58vh;
  }

  .urbanlink-map-canvas {
    position: relative;
    min-height: 58vh;
  }

  .urbanlink-map-panel {
    border-top: 1px solid var(--urbanlink-border, #e7d7c5);
    border-right: 0;
  }

  .urbanlink-map-list,
  .urbanlink-map-line-list,
  .urbanlink-map-route-list,
  .urbanlink-map-stop-list {
    max-height: 10.5rem;
  }
}

@media (max-width: 390px) {
  .urbanlink-map-mode-chips {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .urbanlink-map-mode-chip {
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .urbanlink-map-result-button { transition: none; }
}

@media (prefers-contrast: more) {
  .urbanlink-map-layout,
  .urbanlink-map-result-button {
    border-color: #332116;
  }
}