/* Local hand-feel experiment. Desktop layout and API behaviour stay unchanged. */
.mobile-sheet-handle, .mobile-peek, .mobile-close-filters,
.mobile-reach-scrubber, .mobile-journey-strip { display: none; }
.range-control { display: contents; }
.range-step { display: none; }
.feel-lab-badge {
  position: fixed; z-index: 52; top: 61px; left: 50%; transform: translateX(-50%);
  padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px;
  color: var(--t3); background: color-mix(in srgb, var(--w) 92%, transparent);
  box-shadow: var(--shadow-sm); font-size: 10px; white-space: nowrap; pointer-events: none;
}

@media (max-width: 860px) {
  :root { --mobile-tabs-h: calc(50px + env(safe-area-inset-bottom, 0px)); --mobile-action-h: 101px; }
  body[data-mobile-mode="journey"] { --mobile-action-h: 76px; }
  .topbar { z-index: 60; height: 54px; padding: 0 12px; background: var(--w); }
  .brand strong { font-size: 17px; }
  .topbar > .theme-toggle, .topbar > .about-button { min-width: 44px; height: 44px; padding: 0 7px; text-align: center; }
  .topbar > .theme-toggle { margin-left: auto; }
  .mode-switch {
    position: fixed; z-index: 55; inset: auto 0 0; width: 100%; height: var(--mobile-tabs-h);
    display: flex; gap: 0; margin: 0; padding: 0 0 env(safe-area-inset-bottom, 0px);
    border-top: 1px solid var(--line); border-radius: 0; background: var(--w);
  }
  .mode-switch button { flex: 1; height: 50px; border-radius: 0; font-size: 14px; text-align: center; }
  .mode-switch button.active { background: none; box-shadow: inset 0 -2px 0 var(--ink); font-weight: 600; }
  .map-stage { padding-top: 54px; }
  .map-canvas {
    top: 54px; transform: translate3d(0, var(--mobile-map-shift, 0), 0) scale(var(--mobile-map-scale, 1));
    transform-origin: 50% 42%; transition: transform .42s cubic-bezier(.22, 1, .36, 1); will-change: transform;
  }
  body.mobile-sheet-dragging .map-canvas { transition: none; }
  .map-status { top: 64px; bottom: auto; max-width: 56vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .map-tools { top: 12px; right: 12px; bottom: auto; grid-auto-flow: row; }
  .map-tools #zoomIn, .map-tools #zoomOut { display: none; }
  .map-tools #resetMap { width: 44px; height: 44px; border: 0; }
  .view-switch { top: 12px; left: 12px; right: auto; bottom: auto; }
  .view-switch button { min-width: 54px; height: 38px; font-size: 12px; }
  .map-legend { display: none; }
  .spread-panel { display: none; }

  .left-column {
    position: absolute; z-index: 40; top: auto; left: 0; right: 0; bottom: var(--mobile-tabs-h);
    width: auto; height: min(84dvh, calc(100dvh - var(--mobile-tabs-h) - 32px)); max-height: none;
    display: block; pointer-events: none;
    transform: translateY(calc(100% + var(--mobile-tabs-h) + 12px)); transition: transform .28s cubic-bezier(.22,.72,.28,1);
  }
  .left-column.mobile-open { transform: translateY(0); pointer-events: auto; }
  .query-panel, .query-panel.open {
    position: relative; width: 100%; height: 100%; max-height: none; overflow-y: auto;
    border-radius: 14px 14px 0 0; transform: none; box-shadow: 0 -12px 32px rgba(0,0,0,.22);
    overscroll-behavior: contain;
  }
  .query-panel h1 { padding-right: 92px; font-size: 19px; }
  .mobile-close-filters {
    position: absolute; z-index: 2; top: 3px; right: 11px; display: grid; place-items: center;
    min-width: 58px; height: 44px; border-radius: 8px; color: var(--ac); font-size: 14px; font-weight: 600;
  }
  .query-panel .field { padding: 13px 18px; }
  .query-panel .field > span, .query-panel .field legend { font-size: 12px; }
  .query-panel .select-trigger { min-height: 44px; font-size: 16px; }
  .query-panel .field input:not([type="range"]), .query-panel .field select { min-height: 40px; font-size: 16px; }
  .query-panel .select-option { min-height: 44px; font-size: 14px; }
  .query-panel .chip { width: 44px; height: 44px; font-size: 14px; }
  .query-panel .filter-chip { min-height: 44px; padding: 10px 13px; font-size: 12px; }
  .query-panel .search-button { min-height: 52px; font-size: 16px; }
  .query-panel .range-field input[type="range"] { min-height: 44px; margin: 0; }

  .range-control { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 10px; width: 100%; }
  .range-step {
    display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 12px;
    color: var(--ink); background: var(--wash); font-size: 23px; line-height: 1; touch-action: manipulation;
  }
  .range-step:active { color: var(--w); background: var(--ac); transform: scale(.96); }
  .range-control input[type="range"], #mobileReachHours {
    -webkit-appearance: none; appearance: none; min-width: 0; height: 44px; margin: 0; background: transparent;
  }
  .range-control input[type="range"]::-webkit-slider-runnable-track,
  #mobileReachHours::-webkit-slider-runnable-track {
    height: 7px; border-radius: 999px;
    background: linear-gradient(90deg, var(--ac) 0 var(--range-progress, 50%), var(--line) var(--range-progress, 50%) 100%);
  }
  .range-control input[type="range"]::-webkit-slider-thumb,
  #mobileReachHours::-webkit-slider-thumb {
    -webkit-appearance: none; width: 22px; height: 22px; margin-top: -7.5px; border: 3px solid var(--w); border-radius: 50%;
    background: var(--ac); box-shadow: 0 0 0 1px var(--line), 0 2px 7px rgba(0,0,0,.24);
  }
  .range-control input[type="range"]::-moz-range-track,
  #mobileReachHours::-moz-range-track { height: 7px; border-radius: 999px; background: var(--line); }
  .range-control input[type="range"]::-moz-range-progress,
  #mobileReachHours::-moz-range-progress { height: 7px; border-radius: 999px; background: var(--ac); }
  .range-control input[type="range"]::-moz-range-thumb,
  #mobileReachHours::-moz-range-thumb { width: 18px; height: 18px; border: 3px solid var(--w); background: var(--ac); }

  .result-panel {
    top: auto; left: 0; right: 0; bottom: calc(var(--mobile-tabs-h) + var(--mobile-action-h));
    width: 100%; height: var(--mobile-sheet-full-height, 600px); max-height: none;
    border-radius: 14px 14px 0 0; border-bottom: 0; z-index: 20;
    box-shadow: 0 -8px 30px rgba(0,0,0,.24); overflow: hidden;
    transform: translate3d(0, var(--mobile-sheet-offset, 342px), 0);
    transition: transform .42s cubic-bezier(.22, 1, .36, 1); will-change: transform;
    touch-action: pan-y;
  }
  .result-panel.mobile-dragging { transition: none; }
  .result-panel > section { flex: 1 1 auto; min-height: 0; }
  .mobile-sheet-handle {
    flex: 0 0 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    width: 100%; min-height: 58px; height: 58px; padding: 0; color: var(--t4); font-size: 10px; touch-action: none; cursor: grab;
  }
  .mobile-sheet-handle span { width: 36px; height: 4px; border-radius: 4px; background: var(--line); }
  .mobile-sheet-handle::after { content: attr(data-hint); line-height: 1; }
  .mobile-sheet-handle:active { cursor: grabbing; }
  .mobile-peek { display: block; padding: 0 16px 12px; overflow: hidden; touch-action: pan-x; }
  .mobile-peek p { margin: 4px 0 12px; font-size: 16px; line-height: 1.45; color: var(--ink); }
  .mobile-peek p strong { font-weight: 700; }
  .mobile-nearby { display: flex; overflow-x: auto; padding: 0 0 7px; scrollbar-width: none; scroll-snap-type: x mandatory; scroll-padding-left: 0; }
  .mobile-nearby::-webkit-scrollbar { display: none; }
  .mobile-nearby button { flex: 0 0 auto; min-width: 68px; min-height: 54px; padding: 5px 12px; border-left: 1px solid var(--line); scroll-snap-align: start; }
  .mobile-nearby button:first-child { padding-left: 0; border-left: 0; }
  .mobile-nearby button strong, .mobile-nearby button small { display: block; white-space: nowrap; }
  .mobile-nearby button strong { font-size: 15px; }
  .mobile-nearby button small { margin-top: 3px; color: var(--t3); font-size: 12px; }
  .mobile-peek-actions { display: flex; align-items: center; gap: 12px; margin-top: 4px; padding-top: 7px; border-top: 1px solid var(--line2); }
  .mobile-origin-label { display: flex; flex: 1 1 auto; align-items: center; gap: 9px; min-width: 0; min-height: 48px; color: var(--t3); font-size: 12px; }
  .mobile-origin-caption { flex: 0 0 auto; }
  .mobile-origin-button {
    flex: 1 1 auto; min-width: 0; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 0 12px; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); background: var(--wash); text-align: left;
  }
  .mobile-origin-button strong { overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-origin-button span { color: var(--t3); font-size: 12px; white-space: nowrap; }
  #mobileOpenFilters {
    flex: 0 0 auto; min-height: 48px; padding: 0 13px; border: 1px solid var(--line); border-radius: 11px;
    color: var(--ink); background: var(--wash); font-size: 13px; font-weight: 600;
  }
  #mobileOpenFilters:active { background: var(--line2); transform: scale(.98); }
  .result-panel[data-mobile-detent="mini"] .mobile-peek,
  .result-panel[data-mobile-detent="mini"] > section { display: none; }
  .result-panel[data-mobile-detent="peek"] > section { display: none; }
  .result-panel[data-mobile-detent="full"] .mobile-peek { display: none; }
  .result-panel[data-mobile-detent="full"] .route-list,
  .result-panel[data-mobile-detent="full"] .journey-list { min-height: 80px; }
  .result-panel[data-mobile-detent="full"] .selected-card { max-height: 44%; overflow-y: auto; }
  .result-panel .route-item, .result-panel .candidate-main, .result-panel .train-card { min-height: 60px; }
  .result-panel .candidate-action, .result-panel .choose-train, .result-panel .price-button,
  .result-panel .direct-price-button, .result-panel .plan-here, .result-panel .copy-button { min-height: 44px; }
  .result-panel .result-heading button, .result-panel #journeyBack { min-height: 44px; padding: 0 8px; font-size: 13px; }
  .result-panel .result-heading { min-height: 58px; touch-action: none; }
  .result-panel .route-item strong, .result-panel .candidate-copy strong { font-size: 17px; }
  .result-panel .route-item > span:last-child { font-size: 17px; }
  body[data-mobile-mode="journey"] .mobile-nearby, body[data-mobile-mode="journey"] .mobile-origin-label { display: none; }
  body[data-mobile-mode="journey"] .mobile-peek-actions { justify-content: flex-end; }

  .mobile-reach-scrubber, .mobile-journey-strip {
    position: absolute; z-index: 25; left: 0; right: 0; bottom: var(--mobile-tabs-h);
    background: var(--w); border-top: 1px solid var(--line); box-shadow: 0 -1px 0 var(--line);
  }
  body[data-mobile-mode="reach"] .mobile-reach-scrubber { display: block; height: 101px; padding: 12px 18px 6px; }
  .mobile-scrub-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 14px; }
  .mobile-scrub-heading strong { margin-left: 5px; font-size: 17px; }
  .mobile-scrub-heading small { color: var(--t3); font-size: 12px; }
  #mobileReachHours { display: block; width: 100%; }
  .mobile-scrub-scale { display: flex; justify-content: space-between; color: var(--t4); font-size: 11px; }
  body[data-mobile-mode="journey"] .mobile-journey-strip { display: flex; align-items: stretch; height: 76px; padding: 6px 12px; }
  .mobile-journey-strip button { flex: 1; min-width: 0; min-height: 60px; padding: 4px; text-align: center; }
  .mobile-journey-strip button small, .mobile-journey-strip button strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-journey-strip button small { margin-bottom: 5px; color: var(--t3); font-size: 11px; }
  .mobile-journey-strip button strong { font-size: 16px; }
  .mobile-strip-arrow { align-self: center; color: var(--t4); font-size: 16px; }
  .timeline-panel {
    position: relative; left: auto; right: auto; bottom: auto; z-index: 1;
    flex: 0 0 auto; min-height: 0; max-height: 36%; overflow-y: auto;
    padding: 9px 13px; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none;
  }
  .timeline-track { overflow-x: auto; }
  .timeline-track .day-cell { min-width: 86px; }
  .timeline-cost small { display: block; grid-column: 1 / -1; max-width: 132px; line-height: 1.35; }
  .candidate-price-compare { margin-left: 32px; }
  .mobile-sheet-toggle { display: none; }

  .mobile-origin-picker { position: fixed; z-index: 95; inset: 0; display: grid; align-items: end; pointer-events: none; }
  .mobile-origin-picker[hidden] { display: none !important; }
  .mobile-picker-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; background: rgba(4, 10, 16, .52); opacity: 0; transition: opacity .24s ease; }
  .mobile-origin-picker > section {
    position: relative; width: 100%; max-height: min(72dvh, 620px); display: flex; flex-direction: column;
    padding: 6px 16px calc(18px + env(safe-area-inset-bottom, 0px)); border-radius: 18px 18px 0 0;
    color: var(--ink); background: var(--w); box-shadow: 0 -18px 48px rgba(0,0,0,.32);
    transform: translate3d(0, 100%, 0); transition: transform .34s cubic-bezier(.22, 1, .36, 1);
  }
  .mobile-origin-picker.open { pointer-events: auto; }
  .mobile-origin-picker.open .mobile-picker-backdrop { opacity: 1; }
  .mobile-origin-picker.open > section { transform: translate3d(0, 0, 0); }
  .mobile-origin-picker header { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line2); }
  .mobile-origin-picker header small, .mobile-origin-picker header strong { display: block; }
  .mobile-origin-picker header small { color: var(--t3); font-size: 11px; }
  .mobile-origin-picker header strong { margin-top: 2px; font-size: 18px; }
  .mobile-picker-close { min-width: 58px; min-height: 44px; color: var(--ac); font-weight: 600; }
  .mobile-city-search { min-height: 50px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; margin: 12px 0; padding: 0 13px; border-radius: 12px; background: var(--wash); }
  .mobile-city-search span { color: var(--t3); font-size: 12px; }
  .mobile-city-search input { min-width: 0; height: 46px; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 16px; }
  .mobile-city-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; overflow-y: auto; overscroll-behavior: contain; }
  .mobile-city-list button { min-height: 60px; padding: 9px 12px; border: 1px solid var(--line2); border-radius: 12px; background: var(--wash); text-align: left; }
  .mobile-city-list button.active { border-color: var(--ac); background: var(--ac-tint); }
  .mobile-city-list strong, .mobile-city-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-city-list strong { font-size: 15px; }
  .mobile-city-list small { margin-top: 4px; color: var(--t3); font-size: 11px; }
}

@media (max-width: 520px) {
  .result-panel { left: 0; right: 0; width: 100%; max-height: none; }
  .query-panel { max-height: none; }
}

@media (prefers-reduced-motion: reduce) {
  .result-panel, .left-column { transition: none; }
}