/* ==========================================================================
   Oddech — map view: full-bleed MapLibre canvas + floating glass panels.
   Desktop: controls top-left, legend+timeline bottom-left, station drawer right (.sheet).
   Phone:   chips bar on top, compact legend+timeline at the bottom, station bottom sheet.
   ========================================================================== */

.mapview { position: relative; height: calc(100dvh - var(--appbar-h)); min-height: 520px; overflow: hidden; background: var(--map-water); }
/* index.html links vendor/maplibre-gl.css AFTER the design CSS, and it declares
   `.maplibregl-map { position: relative }` for the container MapLibre was handed; the two selectors have the
   same specificity, so the vendor one would win and the canvas would collapse to height 0 (a map that answers
   queries but paints nothing). The descendant selector is what keeps `inset: 0` in charge. */
.mapview .mapview__canvas { position: absolute; inset: 0; }
@media (max-width: 1023.98px) {
  .mapview { height: calc(100dvh - var(--appbar-h) - var(--tabbar-h) - env(safe-area-inset-bottom)); }
}
.mini-map { position: relative; height: 340px; border-radius: var(--r-lg); overflow: hidden; background: var(--map-water); }

.map-panel {
  position: absolute; z-index: 5;
  background: var(--surface-glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--border-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
}
.map-panel--controls { top: var(--s-4); left: var(--s-4); width: 340px; padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); }
.map-panel--bottom { left: var(--s-4); bottom: var(--s-4); width: min(560px, calc(100% - 32px)); padding: var(--s-4) var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); }
.map-panel--zoom { right: var(--s-4); bottom: var(--s-4); display: flex; flex-direction: column; padding: 4px; border-radius: var(--r-md); }
.map-panel__title { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.map-panel__title h1 { font-size: var(--fs-lg); letter-spacing: -0.02em; }
.map-panel--controls .chips { flex-wrap: wrap; }
/* The four measure names are real words and cannot fit one row in a 340 px panel, so on desktop the
   track lays out as two columns; the phone bar below keeps one sideways-scrolling row. */
@media (min-width: 1024px) {
  .map-panel--controls .seg {
    display: grid; grid-template-columns: repeat(2, auto); justify-content: start; overflow: visible;
  }
}
.map-disclaimer { font-size: var(--fs-2xs); color: var(--text-faint); line-height: 1.4; }

@media (max-width: 1023.98px) {
  .map-panel--controls { top: var(--s-3); left: var(--s-3); right: var(--s-3); width: auto; padding: var(--s-2); border-radius: var(--r-pill); flex-direction: row; align-items: center; overflow-x: auto; scrollbar-width: none; }
  .map-panel--controls::-webkit-scrollbar { display: none; }
  .map-panel--controls .chips { flex-wrap: nowrap; }
  .map-panel--controls > * { flex-shrink: 0; }   /* the pill bar scrolls sideways; never squash a select */
  /* the pill bar has no room for the heading, but the count of drawn dots stays: it is the honest
     counterpart of the legend */
  .map-panel--controls .map-panel__title h1, .map-panel--controls .field__label, .map-panel--controls .map-disclaimer { display: none; }
  .map-panel--bottom { left: var(--s-3); right: var(--s-3); bottom: var(--s-3); width: auto; padding: var(--s-3) var(--s-4); }
  .map-panel--zoom { display: none; }
}

/* city labels: HTML markers (no glyph server needed) */
.city-label {
  font-size: 11px; font-weight: 600; letter-spacing: .01em; color: var(--text-muted); white-space: nowrap; pointer-events: none;
  text-shadow: 0 0 3px var(--map-land), 0 0 6px var(--map-land), 0 0 1px var(--map-land);
  /* no CSS transform here: MapLibre positions markers with an inline transform (use the Marker offset) */
}
.city-label--capital { font-size: 12.5px; font-weight: 700; color: var(--text-2); }

/* MapLibre chrome overrides */
.maplibregl-ctrl-attrib { font-size: 10px; background: var(--surface-glass) !important; color: var(--text-faint); border-radius: var(--r-xs) 0 0 0; }
.maplibregl-ctrl-attrib a { color: var(--text-muted) !important; }
.maplibregl-canvas:focus-visible { box-shadow: inset 0 0 0 3px var(--accent-ring); }
.maplibregl-popup-content { background: var(--surface-glass-strong) !important; -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); color: var(--text); border-radius: var(--r-md) !important; border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg) !important; padding: 10px 12px !important; font-family: var(--font-sans); }
.maplibregl-popup-tip { display: none; }

/* hover card for a station (rendered into a MapLibre popup) */
.map-tip { min-width: 180px; }
.map-tip__name { font-weight: 650; font-size: var(--fs-sm); line-height: 1.3; }
.map-tip__sub { font-size: var(--fs-xs); color: var(--text-muted); }
.map-tip__value { display: flex; align-items: baseline; gap: 4px; margin-top: 6px; font-size: var(--fs-xl); font-weight: 650; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.map-tip__value small { font-size: var(--fs-xs); font-weight: 550; color: var(--text-faint); letter-spacing: 0; }