/* Final UI overrides: reduced-motion rules, loader keyframes, secondary-button
   treatment and the line-view action stack. Loaded after ui-mobile.css. */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}











.filters-col-routes #lineList {
  max-height: min(48vh, 430px);
}

.filters-col {
  scrollbar-width: thin;
  scrollbar-color: rgba(130, 134, 138, 0.5) transparent;
}

.filters-col::-webkit-scrollbar {
  width: 10px;
}

.filters-col::-webkit-scrollbar-track {
  background: transparent;
}

.filters-col::-webkit-scrollbar-thumb {
  background: rgba(130, 134, 138, 0.5);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.sheet-handle {
  justify-self: center;
  align-self: center;
}

.line-view-sheet-handle {
  display: block;
  margin: 2px auto 2px;
}

.map-loading-badge {
  min-width: 0;
  padding: 6px;
  border-radius: 10px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  box-shadow: var(--elev-1);
}

.map-loading-logo {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  animation: loading-pulse 1.2s ease-in-out infinite;
}

@keyframes loading-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.72;
    transform: scale(0.94);
  }
}

@media (prefers-reduced-motion: reduce) {
  .map-loading-logo {
    animation: none;
  }
}

.layers-options .map-mode-btn::before {
  background-image: var(--preview-default, linear-gradient(160deg, #dfe6ea 0%, #c3d2da 100%));
  background-size: cover;
  background-position: center;
}

.layers-options #satelliteModeBtn::before {
  background-image: var(--preview-satellite, linear-gradient(160deg, #22303a 0%, #0d1418 100%));
}

.line-view-actions .btn {
  min-width: 72px;
  justify-content: center;
}

.line-view-progress-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* One consistent secondary-button treatment across line view controls: a
   slightly stronger fill than the panel so the controls read as buttons. */
.line-view-nav,
.line-view-ordering-btn,
.line-view-reverse-btn,
.line-visibility-btn,
.show-stops-btn,
.line-view-clear-btn {
  background: var(--control-bg);
  border: 1px solid var(--line);
  color: var(--ink);
}

.line-view-nav:hover,
.line-view-ordering-btn:hover,
.line-view-reverse-btn:hover,
.line-visibility-btn:hover,
.show-stops-btn:hover,
.line-view-clear-btn:hover {
  background: var(--control-hover);
}

/* Action stack: the close/back control stays neutral, Zoom is the accent. */
.line-view-actions #lineViewReturnBtn {
  order: 1;
}

.line-view-actions #lineViewMapBtn {
  order: 2;
  background: var(--accent);
  border-color: transparent;
  color: var(--on-accent);
}

.line-view-actions #lineViewMapBtn:hover {
  background: var(--accent-strong);
  border-color: transparent;
}

.line-view-clear-btn {
  height: 24px;
  padding: 0 8px;
  font-size: 11px;
  color: var(--muted);
}

/* Hinged / dual-segment viewports (foldables with a crease, dual-screen
   devices): keep task UI inside a single segment instead of spanning the fold,
   and never centre it on the crease. These blocks only apply where the browser
   reports viewport segments, so every other viewport is unaffected. */
@media (horizontal-viewport-segments: 2) {
  /* Transient notices centre in the primary (first) segment, not on the fold. */
  .map-notice {
    left: calc(env(viewport-segment-width 0 0, 50vw) / 2);
  }

  /* Map mode stack sits just inside the fold on the leading segment. */
  .map-overlay-controls,
  body.line-view-open .map-overlay-controls {
    right: auto;
    left: env(viewport-segment-width 0 0, 50vw);
    transform: translateX(calc(-100% - 14px));
  }

  /* Filters / cities / progress panels stay within the leading segment. */
  .filters-panel,
  #progressOverlay .filters-panel {
    width: min(460px, calc(env(viewport-segment-width 0 0, 50vw) - 20px));
  }
}

/* Wide-short compact layout on a hinged viewport: the control stack moves to
   the inner edge of the leading segment. */
@media (horizontal-viewport-segments: 2) and (max-width: 960px) and (orientation: landscape) {
  .tabbar {
    right: auto;
    left: env(viewport-segment-width 0 0, 50vw);
    transform: translate(-100%, -50%);
  }
}

/* Book-style fold (segments stacked): keep the notice in the top segment. */
@media (vertical-viewport-segments: 2) {
  .map-notice {
    top: calc(env(viewport-segment-height 0 0, 50vh) / 2);
  }
}