
:root{
  --bg:#f6f8fc; --card:#ffffff; --text:#172033; --muted:#697386; --line:#e4e8f0;
  --accent:#2f6fed; --accent2:#1f55c7; --soft:#eef4ff; --good:#16835d;
  --warn:#c9771a; --bad:#c23b35; --night:#6558c8; --visit:#f28b2d;
  --map-sea:#eef7fb; --map-land:#fff6e9; --map-border:#ffffff;
  --shadow:0 10px 28px rgba(30,52,87,.08);
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}
.app{max-width:980px;margin:0 auto;padding:14px 18px 112px}
h1{font-size:25px;line-height:1.05;margin:0}
.site-header{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:10px 3px 18px}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.brand-mark{width:42px;height:42px;border-radius:13px;background:var(--accent);display:grid;place-items:center;box-shadow:0 6px 16px rgba(47,111,237,.18);flex:0 0 auto}
.brand-mark svg{width:27px;height:27px}
.brand-copy{min-width:0}
.brand-kicker{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:800;margin-bottom:2px}
.header-tagline{font-size:13px;color:var(--muted);margin-top:4px}
@media(max-width:620px){.site-header{padding:6px 1px 14px}.brand-mark{width:38px;height:38px;border-radius:12px}.header-tagline{font-size:12px}}
.sub{color:var(--muted);font-size:13px;margin-bottom:15px}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:14px;margin-bottom:14px}
.section-title{font-size:15px;font-weight:800;margin-bottom:11px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.full{grid-column:1/-1}
label{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:5px}
input,select{width:100%;min-height:44px;border:1px solid #d5dae4;background:#fff;color:var(--text);border-radius:12px;padding:9px 10px;font-size:16px}
.stepper{display:grid;grid-template-columns:minmax(0,1fr) 34px;gap:5px;align-items:stretch}
.city-count-range{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mini-range-label{font-size:10px;font-weight:800;color:var(--muted);margin:0 0 4px 2px}
.stepper input{min-width:0;text-align:center;font-variant-numeric:tabular-nums}
.stepper-buttons{display:grid;grid-template-rows:1fr 1fr;gap:0;border:1px solid #d9dee7;border-radius:9px;overflow:hidden;background:#f5f7fa}
.stepper-btn{min-height:20px;height:21px;border-radius:0;background:#f5f7fa;color:#536174;font-size:11px;line-height:1;padding:0}
.stepper-btn:first-child{border-bottom:1px solid #d9dee7}
.stepper-btn:hover{background:#edf2f8;color:var(--accent2)}
.stepper-btn:active{background:#e3eaf3}
.time-field.invalid{border-color:var(--bad);outline:2px solid #fee4e2}
.stepper .mini-unit{position:absolute;right:42px;top:50%;transform:translateY(-50%);font-size:10px;color:var(--muted);pointer-events:none}
input:focus,select:focus{outline:2px solid #bfd2ff;border-color:var(--accent)}
.inline{display:flex;gap:7px}
.inline>*{flex:1;min-width:0}
.hint{font-size:11px;color:var(--muted);margin-top:6px;line-height:1.35}
.row{display:grid;grid-template-columns:minmax(0,1fr) 84px 84px 40px;gap:7px;align-items:start;margin-bottom:8px}
.transfer-row{display:grid;grid-template-columns:minmax(0,1fr) 40px;gap:7px;align-items:start;margin-bottom:8px}
button{border:0;border-radius:13px;font-size:15px;font-weight:800;min-height:46px;cursor:pointer;-webkit-tap-highlight-color:transparent}
button.secondary{width:100%;background:var(--soft);color:var(--accent)}
button.remove{width:40px;background:#f1f3f6;color:#667085;padding:0;font-size:21px}
button.primary{width:100%;background:var(--accent);color:#fff;transition:background .12s ease,transform .08s ease,box-shadow .12s ease}
button.primary:active{background:#1f55c7;transform:scale(.985)}
button.primary:focus-visible{outline:3px solid #a9c3ff}
button.primary.loading{background:#527fe0}
button.primary.success{background:var(--good)}
button.primary:disabled{background:#98a2b3;cursor:not-allowed}
.toggle{display:flex;align-items:center;gap:9px;min-height:44px;font-size:14px}
.toggle input{width:22px;height:22px;min-height:auto}
.ac-wrap{position:relative}
.ac-menu{display:none;position:absolute;z-index:60;left:0;right:0;top:calc(100% + 3px);max-height:280px;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}
.ac-item{padding:10px 11px;border-bottom:1px solid var(--line);cursor:pointer}
.ac-item.active{background:var(--soft);outline:1px solid #bfd2ff}
.ac-item:last-child{border-bottom:0}
.ac-item:active{background:var(--soft)}
.ac-item strong{display:block;font-size:14px}
.ac-item span{display:block;color:var(--muted);font-size:11px;margin-top:2px;line-height:1.25}
.ac-kind{display:inline-block;border-radius:999px;padding:2px 6px;background:#f2f4f7;color:#475467;font-size:10px;font-weight:800;margin-right:5px}
.status{font-size:11px;margin-top:4px;color:var(--muted);min-height:15px}
.ok{color:var(--good)} .bad{color:var(--bad)}
.error-box{display:none;background:#fff1f0;border:1px solid #fecaca;color:#912018;border-radius:12px;padding:10px 11px;font-size:13px;margin-top:9px;line-height:1.35}
.notice{background:#fff7e9;border:1px solid #efd5a4;color:#81571f;border-radius:12px;padding:9px 10px;font-size:12px;line-height:1.35;margin-top:9px}
.result-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.badge{display:inline-block;padding:5px 8px;border-radius:999px;background:#ecfdf3;color:var(--good);font-size:11px;font-weight:800;white-space:nowrap}
.empty{text-align:center;color:var(--muted);font-size:13px;padding:20px 8px;line-height:1.45}
.route{border-top:1px solid var(--line);padding:14px 0}
.route:first-child{border-top:0;padding-top:4px}
.route-title{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;margin-bottom:7px}
.route-title strong{font-size:16px}
.route-meta{font-size:11px;color:var(--muted);margin-top:2px}
.chips{display:flex;flex-wrap:wrap;gap:5px;margin:7px 0 8px}
.chip{font-size:10px;font-weight:800;padding:4px 7px;border-radius:999px;background:#f2f4f7;color:#475467}
.chip.night{background:#f1efff;color:var(--night)}
.chip.visit{background:#fff2e7;color:var(--visit)}
.step{display:grid;grid-template-columns:72px 17px minmax(0,1fr);gap:5px;align-items:start;padding:5px 0}
.time{font-size:11px;font-weight:800;line-height:1.25}
.rail{position:relative;min-height:35px}
.rail:before{content:"";position:absolute;left:7px;top:5px;bottom:-10px;width:2px;background:#d5dae4}
.dot{position:absolute;left:3px;top:4px;width:10px;height:10px;border-radius:50%;background:var(--accent)}
.what{font-size:13px;line-height:1.25;min-width:0}
.meta{font-size:11px;color:var(--muted);margin-top:2px;overflow-wrap:anywhere}
.night-text{color:var(--night);font-weight:800}
.visit-text{color:var(--visit);font-weight:800}
.transfer-text{color:var(--warn);font-weight:800}
.sticky{position:fixed;z-index:80;left:0;right:0;bottom:0;background:rgba(245,247,251,.94);backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:9px 14px max(9px,env(safe-area-inset-bottom))}
.sticky-inner{max-width:980px;margin:0 auto}
.mini{text-align:center;font-size:10px;color:var(--muted);margin-top:5px}
.footer{font-size:10px;color:var(--muted);line-height:1.4;padding:2px 4px 10px}
.footer a{color:var(--accent);text-decoration:none}
@media(max-width:520px){
  .app{padding-top:8px}.grid{grid-template-columns:1fr 1fr}.row{grid-template-columns:minmax(0,1fr) 78px 78px 38px}.step{grid-template-columns:68px 16px minmax(0,1fr)}
}

.date-time-block{grid-column:1/-1}
.window-card{border:1px solid var(--line);border-radius:14px;padding:11px;background:#fafbfc}
.window-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}
.date-btn{background:#fff;border:1px solid #d5dae4;color:var(--text);min-height:40px;padding:7px 10px;border-radius:10px;font-size:13px;width:auto}
.range-value{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.dual-range{position:relative;height:38px;touch-action:none;margin:2px 6px 0}
.dual-track{position:absolute;left:0;right:0;top:17px;height:5px;border-radius:999px;background:#dfe4ec}
.dual-fill{position:absolute;top:17px;height:5px;border-radius:999px;background:var(--accent)}
.dual-handle{position:absolute;top:7px;width:25px;height:25px;min-height:25px;max-height:25px;padding:0;aspect-ratio:1/1;border-radius:50%;background:#fff;border:3px solid var(--accent);box-shadow:0 2px 7px rgba(16,24,40,.18);transform:translateX(-50%);touch-action:none}
.dual-handle:active{background:var(--soft);transform:translateX(-50%) scale(1.08)}
.range-ends{display:flex;justify-content:space-between;color:var(--muted);font-size:10px;margin-top:0}
.duration-range{margin-top:6px}
.calendar-sheet{display:none;position:fixed;z-index:200;inset:0;background:rgba(16,24,40,.35);align-items:flex-end;justify-content:center}
.calendar-sheet.open{display:flex}
.calendar-card{width:min(100%,520px);background:#fff;border-radius:20px 20px 0 0;padding:14px 14px max(18px,env(safe-area-inset-bottom));box-shadow:0 -8px 30px rgba(16,24,40,.18)}
.cal-head{display:grid;grid-template-columns:42px 1fr 42px;align-items:center;margin-bottom:8px}
.cal-nav{min-height:38px;background:#f2f4f7;color:#344054;font-size:18px}
.cal-title{text-align:center;font-size:15px;font-weight:800}
.cal-week,.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-week div{text-align:center;color:var(--muted);font-size:10px;font-weight:800;padding:4px 0}
.cal-day{min-height:42px;border-radius:10px;background:#fff;color:var(--text);font-size:13px;font-weight:700}
.cal-day.other{color:#98a2b3}
.cal-day.today{border:1px solid #bfd2ff}
.cal-day.selected{background:var(--accent);color:#fff}
.cal-close{margin-top:10px;width:100%;background:#f2f4f7;color:#344054}


.journey{margin-top:8px}
.j-node{display:grid;grid-template-columns:92px 18px minmax(0,1fr);gap:7px;align-items:center;min-height:44px}
.j-time{font-size:11px;font-weight:800;line-height:1.25;font-variant-numeric:tabular-nums}
.j-axis{position:relative;height:100%;min-height:44px}
.j-dot{position:absolute;left:3px;top:50%;transform:translateY(-50%);width:12px;height:12px;border-radius:50%;background:#fff;border:3px solid var(--accent)}
.j-station{font-size:13px;font-weight:800;line-height:1.2}
.j-station.visit-station{color:var(--visit)}
.visit-stations{font-size:10px;color:var(--muted);margin-top:2px;line-height:1.3}
.visit-inline{font-size:10px;color:var(--visit);font-weight:900;margin-top:3px}
.visit-inline a{color:var(--accent);text-decoration:none;margin-left:7px;font-weight:800}
.j-sub{font-size:10px;color:var(--muted);margin-top:2px;line-height:1.25}
.j-train{display:grid;grid-template-columns:92px 18px minmax(0,1fr);gap:7px;min-height:40px}
.j-train .j-axis:before{content:"";position:absolute;left:8px;top:-8px;bottom:-8px;width:2px;background:var(--accent)}
.j-train-label{align-self:center;font-size:11px;color:#475467}
.j-train-label.night-text{color:var(--night)}
.j-transfer{display:grid;grid-template-columns:92px 18px minmax(0,1fr);gap:7px;align-items:center;padding:2px 0}
.j-transfer .j-axis:before{content:"";position:absolute;left:8px;top:-10px;bottom:-10px;width:2px;background:#b8c0cc}
.j-transfer-box{font-size:10px;color:#5f6878;font-weight:800;padding:5px 7px;border-radius:8px;background:#f3f5f8;width:max-content;max-width:100%}
.visit-break{margin:8px 0 10px 99px;border:1px solid #ffd2aa;background:#fff8f1;border-radius:14px;padding:10px 11px}
.visit-title{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:900}
.visit-icon{font-size:20px}
.visit-details{font-size:11px;color:var(--visit);font-weight:800;margin-top:3px}
.auto-visit-note{font-size:10px;color:var(--muted);margin-top:2px}
.visit-link{display:inline-block;margin-top:5px;font-size:11px;font-weight:800;color:var(--accent);text-decoration:none}
.more-wrap{padding-top:10px;border-top:1px solid var(--line);margin-top:4px}
.more-btn{width:100%;background:#f2f4f7;color:#344054}
.more-btn:active{background:#e4e7ec}
.sleep-warning{color:#a76014}


.route-content{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:14px;align-items:start}
.route-map-wrap{position:sticky;top:10px;width:100%;aspect-ratio:1/1;border:1px solid #e2e8f0;background:var(--map-sea);border-radius:15px;padding:4px;overflow:hidden}
.route-map-title{display:none}
.route-map{width:100%;height:auto;aspect-ratio:1/1;display:block;overflow:hidden}
.map-country{fill:var(--map-land);stroke:var(--map-border);stroke-width:1.05;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.map-route{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.map-dot{fill:#fff;stroke:var(--accent);stroke-width:2.4}
.map-dot.endpoint{fill:var(--accent);stroke:var(--accent)}
.map-dot.visit{fill:var(--visit);stroke:var(--visit)}
.map-label{font-size:8.5px;fill:var(--text);font-weight:800}
.map-label.visit{fill:#c96d1f}
.map-label.endpoint{fill:var(--accent2)}
.map-halo{paint-order:stroke;stroke:rgba(255,255,255,.92);stroke-width:3px;stroke-linejoin:round}
@media(max-width:620px){
  .route-content{grid-template-columns:minmax(0,1fr) 39%;gap:8px}
  .route-map-wrap{padding:4px}
  .route-map-title{font-size:8px}
  .map-label{font-size:7.5px}
  .j-node{grid-template-columns:76px 17px minmax(0,1fr)}
  .j-train{grid-template-columns:76px 17px minmax(0,1fr)}
  .j-time{font-size:10px}
}


.transfer-controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(160px,220px);gap:10px;align-items:end}
.transfer-toggle{display:flex;align-items:center;gap:9px;min-height:44px;font-size:14px;font-weight:600;color:var(--text);margin:0}
.transfer-toggle input{width:22px;height:22px;min-height:auto}
.layover-limit{min-width:0}
.layover-stepper{display:grid;grid-template-columns:minmax(0,1fr) 34px;gap:5px}
.layover-timebox{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:44px;border:1px solid #d5dae4;background:#fff;border-radius:12px;overflow:hidden}
.layover-timebox:focus-within{outline:2px solid #bfd2ff;border-color:var(--accent)}
.layover-timebox input{border:0;outline:0;min-height:42px;height:42px;padding:7px 4px;text-align:center;font-variant-numeric:tabular-nums;font-size:16px;min-width:0}
.layover-colon{font-size:17px;font-weight:900;color:var(--muted);pointer-events:none}
.transfer-controls.off .layover-limit{display:none}
@media(max-width:520px){
  .transfer-controls{grid-template-columns:1fr 1fr;gap:8px}
}


.trip-places{display:grid;grid-template-columns:minmax(0,1fr) 46px minmax(0,1fr);gap:0;align-items:end}
.switch-wrap{display:flex;align-items:center;justify-content:center;padding-bottom:7px}
.trip-places>div:first-child .place-input{border-radius:12px 0 0 12px;border-right:0}
.trip-places>div:last-child .place-input{border-radius:0 12px 12px 0;border-left:0}
.swap-btn{width:46px;height:44px;min-height:44px;border:1px solid #d5dae4;border-radius:0;background:#fff;color:var(--accent);font-size:20px;font-weight:900;cursor:pointer;box-shadow:none;padding:0}
.swap-btn:hover{background:var(--soft)}
.swap-btn:active{background:#e4edff;transform:none}
.trip-places .ac-wrap:focus-within{z-index:80}
.status:empty{display:none}
.next-day-btn{background:var(--accent);color:#fff;border-color:var(--accent)}
.next-day-btn:hover{background:var(--accent2);border-color:var(--accent2)}
.train-pill{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:999px;background:var(--soft);color:var(--accent2);font-size:10px;font-weight:800;margin-right:6px;vertical-align:middle}
.train-pill.night-brand{background:#f1efff;color:var(--night)}
.train-moon{margin-right:4px}
@media(max-width:620px){
  .trip-places{grid-template-columns:minmax(0,1fr) 42px minmax(0,1fr);gap:0}
  .swap-btn{width:42px;height:44px;font-size:18px}
}


.quick-day-pair{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.quick-day-pair .date-btn{min-width:78px;text-align:center;padding-left:9px;padding-right:9px}

/* Inline route-search animation */
.route-search-loader{padding:18px 14px 20px;text-align:center}
.route-search-loader h3{margin:0 0 4px;font-size:14px;font-weight:750;color:var(--ink)}
.route-search-loader p{margin:0 0 15px;color:var(--muted);font-size:11px}
.inline-rail-scene{position:relative;height:70px;overflow:hidden;border-radius:13px;background:#fbfcfe;border:1px solid #edf0f4}
.inline-track{position:absolute;left:-2%;right:-2%;top:50px;height:1px;background:#b8c1ce}
.inline-track:after{content:"";position:absolute;left:0;right:0;top:6px;height:1px;background:#d9dee6}
.inline-train{position:absolute;left:0;top:27px;height:24px;display:flex;align-items:flex-end;gap:1px;color:#8fb1f5;opacity:.72;transform:translateX(-650px);animation:singleRailRun 10.8s linear infinite}
.inline-train.t2{animation-delay:2.7s}.inline-train.t3{animation-delay:5.4s}.inline-train.t4{animation-delay:8.1s}
.train-car{position:relative;background:currentColor}
.train-car:after{content:"";position:absolute;background:#fbfcfe;opacity:.78}
.car-bullet{height:12px;width:42px;border-radius:7px 3px 2px 2px}
.car-bullet:after{left:7px;right:7px;top:3px;height:3px;border-radius:3px}
.car-normal{height:14px;width:35px;border-radius:3px 3px 1px 1px}
.car-normal:after{left:5px;right:5px;top:3px;height:4px;border-radius:1px}
.car-industrial{height:12px;width:29px;border-radius:1px}
.car-industrial:after{left:4px;right:4px;top:4px;height:2px}
.car-steam{height:13px;width:31px;border-radius:2px 2px 1px 1px}
.car-steam:after{left:5px;right:5px;top:3px;height:3px;border-radius:1px}
.loco-bullet{height:15px;width:58px;background:currentColor;clip-path:polygon(0 12%,58% 12%,82% 27%,100% 58%,91% 100%,0 100%);border-radius:2px}
.loco-normal{height:17px;width:43px;background:currentColor;clip-path:polygon(0 8%,72% 8%,100% 34%,100% 100%,0 100%);border-radius:2px}
.loco-industrial{height:18px;width:42px;background:currentColor;clip-path:polygon(0 20%,60% 20%,60% 0,82% 0,82% 25%,100% 38%,100% 100%,0 100%);border-radius:1px}
.loco-steam{height:17px;width:47px;background:currentColor;border-radius:9px 3px 2px 2px;position:relative}
.loco-steam:before{content:"";position:absolute;width:7px;height:11px;background:currentColor;right:7px;top:-9px;border-radius:1px}
.loco-steam:after{content:"";position:absolute;width:10px;height:10px;border:2px solid currentColor;border-radius:50%;right:10px;top:10px;background:#fbfcfe}
@keyframes singleRailRun{0%{transform:translateX(-650px)}100%{transform:translateX(calc(100vw + 620px))}}
@media(max-width:620px){.inline-rail-scene{height:68px}.inline-track{top:49px}}

.finish-label-row,.rule-label-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.roundtrip-toggle,.rule-toggle{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);font-weight:700;white-space:nowrap}
.roundtrip-toggle input,.rule-toggle input{accent-color:var(--primary)}
.ac-wrap.roundtrip-disabled{opacity:.48;pointer-events:none}
.ac-wrap.roundtrip-disabled input{background:#f2f4f7}
.window-card.rule-disabled{opacity:.42;pointer-events:none}
.price-chip{font-weight:800;color:var(--primary)}
.rail-tie{position:absolute;top:-4px;width:1px;height:10px;background:#e2e7ee}
.inline-track{background:#d5dce6!important;height:2px!important}
.inline-track:after{top:7px!important;background:#d5dce6!important;height:2px!important}
.inline-track:before{content:"";position:absolute;left:0;right:0;top:-4px;height:14px;background:repeating-linear-gradient(90deg,transparent 0 14px,#e5e9ef 14px 16px,transparent 16px 28px);opacity:.9}

.route-heading{display:flex;align-items:baseline;gap:12px}.route-price{font-size:19px;font-weight:850;color:var(--primary);letter-spacing:-.02em}
.rule-label-inline{display:flex;align-items:center;gap:7px}.rule-label-inline input{margin:0;accent-color:var(--primary)}
.departure-date-actions{display:flex;gap:5px;align-items:center}.departure-date-actions .date-btn{width:78px;text-align:center;padding-left:8px;padding-right:8px}
@media(max-width:620px){.departure-date-actions .date-btn{width:70px;font-size:10px}}
/* compact, consistent checkboxes */
.roundtrip-toggle input,.rule-label-inline input,.transfer-toggle input{width:14px!important;height:14px!important;min-width:14px!important;margin:0!important;accent-color:var(--primary);vertical-align:middle}
.roundtrip-toggle,.rule-label-inline,.transfer-toggle{align-items:center}
/* matching date controls */
.date-action-row{display:flex;align-items:center;gap:6px;min-width:0}
.date-action-row .date-main{width:138px;min-width:138px;height:34px;background:#fff!important;color:var(--ink)!important;border:1px solid var(--line)!important;padding:0 11px!important;text-align:center}
.date-action-row .date-shortcut{width:auto;min-width:70px;height:34px;padding:0 10px!important;background:var(--primary)!important;color:#fff!important;border-color:var(--primary)!important;text-align:center}
@media(max-width:620px){.date-action-row{gap:5px}.date-action-row .date-main{width:124px;min-width:124px;font-size:10px}.date-action-row .date-shortcut{min-width:64px;font-size:10px}}

.date-action-row .date-shortcut,
.date-action-row .date-shortcut:hover,
.date-action-row .date-shortcut:focus{
  background:#2F6FED!important;
  background-color:#2F6FED!important;
  color:#fff!important;
  border:1px solid #2F6FED!important;
  box-shadow:none!important;
}
.date-action-row .date-shortcut:active{background:#1F55C7!important;border-color:#1F55C7!important}

/* Autocomplete must overlay the form without changing the field/card geometry. */
.trip-places{align-items:end}
.trip-places>div{min-width:0}
.trip-places .ac-wrap{position:relative;z-index:1}
.trip-places .ac-wrap:focus-within{z-index:80}
.trip-places .ac-menu{position:absolute;top:calc(100% + 4px);left:0;right:0}
.trip-places .status{position:absolute;left:2px;top:calc(100% + 3px);margin:0;white-space:nowrap}
.trip-places .status:empty{display:none}

/* Stable start/switch/finish alignment, matching the earlier working layout */
.trip-places{align-items:end!important}
.trip-places>div:not(.switch-wrap){display:flex;flex-direction:column;min-width:0}
.trip-places>div:not(.switch-wrap)>label,
.trip-places .finish-label-row{min-height:18px;margin-bottom:6px}
.trip-places .finish-label-row>label{margin-bottom:0}
.trip-places .ac-wrap{width:100%}
.switch-wrap{align-self:end;height:44px;padding-bottom:7px!important}

.switch-wrap{padding-bottom:0!important;transform:translateY(3px)}
.ext-next{color:#d94848;font-weight:850;margin-left:3px}
.relax-chip{background:#fff0f0!important;color:#b42318!important;border:1px solid #ffd0d0!important}
.relaxed-route{border-color:#f3b6b6!important}
.relax-note{margin:8px 0 2px;padding:8px 10px;border-radius:10px;background:#fff5f5;color:#a33;font-size:11px;line-height:1.4}

/* Exact switch/input alignment: no accumulated offsets from earlier iterations. */
.trip-places .switch-wrap{
  align-self:end!important;
  height:44px!important;
  padding:0!important;
  margin:0!important;
  transform:none!important;
  display:flex!important;
  align-items:stretch!important;
}
.trip-places .switch-btn{
  height:44px!important;
  margin:0!important;
  top:auto!important;
  transform:none!important;
}

.visit-add-row{display:grid;grid-template-columns:minmax(0,1fr) 42px;gap:7px;align-items:end;margin-bottom:9px}
.visit-add-row .ac-wrap{width:100%}
.visit-plus{height:42px;width:42px;border:0;border-radius:11px;background:var(--primary);color:#fff;font-size:24px;line-height:1;font-weight:500;cursor:pointer}
.visit-plus:hover{background:var(--primary-dark)}
.visit-row{display:block!important;padding:11px;margin:8px 0;border:1px solid var(--line);border-radius:13px;background:#fbfcfe}
.visit-card-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;margin-bottom:10px}
.visit-city-name{font-size:14px;font-weight:800;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.visit-stay-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:11px}
.visit-time-windows{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.visit-mini-window{min-width:0;padding:9px 9px 7px;border:1px solid #e8ebf0;border-radius:11px;background:#fff}
.visit-mini-title{display:flex;justify-content:space-between;gap:6px;align-items:center;margin-bottom:7px;font-size:10px;font-weight:800;color:var(--muted)}
.visit-mini-value{font-size:10px;color:var(--ink);font-weight:750;white-space:nowrap}
.visit-mini-window .dual-range{margin:5px 4px 3px}
.visit-mini-window .range-ends{font-size:8px}
@media(max-width:620px){.visit-time-windows{gap:7px}.visit-mini-window{padding:8px 7px}.visit-stay-row{gap:6px}}

.compat-msg{display:none;margin-left:6px;font-size:10px;line-height:1.25;font-weight:800;color:#c62828;text-transform:none;letter-spacing:0}
.compat-msg.show{display:inline}
.compat-bad{outline:2px solid rgba(198,40,40,.18);outline-offset:3px;border-radius:8px}
.visit-row.compat-bad{outline-offset:1px}
.visit-card-compat{display:none;font-size:10px;font-weight:800;color:#c62828;margin:-4px 0 9px}
.visit-card-compat.show{display:block}

.visit-date{width:100%;height:32px;box-sizing:border-box;margin:0 0 8px;padding:4px 7px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);font:inherit;font-size:10px}
.visit-date:focus{outline:2px solid rgba(47,111,237,.16);border-color:var(--primary)}
.visit-date:invalid{border-color:#d94a4a}

/* Mobile trip controls only. Desktop layout and behavior are intentionally unchanged. */
@media (max-width:620px){
  /* Stack start and finish like a mobile journey search form. */
  .trip-places{
    position:relative!important;
    display:flex!important;
    flex-direction:column!important;
    gap:9px!important;
    align-items:stretch!important;
    padding-right:50px;
  }
  .trip-places>div:not(.switch-wrap){width:100%}
  .trip-places>div:first-child .place-input,
  .trip-places>div:last-child .place-input{
    border:1px solid #d5dae4!important;
    border-radius:12px!important;
  }
  .trip-places>div:not(.switch-wrap)>label,
  .trip-places .finish-label-row{min-height:auto;margin-bottom:5px}

  /* Flip sits on the right, vertically between the two city fields. */
  .trip-places .switch-wrap{
    position:absolute!important;
    right:0!important;
    top:50%!important;
    width:42px!important;
    height:42px!important;
    margin:0!important;
    padding:0!important;
    transform:translateY(-7px)!important;
    z-index:5;
    align-items:center!important;
  }
  .trip-places .swap-btn{
    width:42px!important;
    height:42px!important;
    min-height:42px!important;
    border:0!important;
    border-radius:50%!important;
    background:var(--primary)!important;
    color:#fff!important;
    box-shadow:0 4px 12px rgba(47,111,237,.22)!important;
    touch-action:manipulation;
  }

  /* Make Round trip a comfortable mobile tap target without changing desktop. */
  .roundtrip-toggle{
    min-height:34px;
    padding:4px 0 4px 8px;
    gap:7px;
    cursor:pointer;
    touch-action:manipulation;
  }
  .roundtrip-toggle input{
    width:20px!important;
    height:20px!important;
    min-width:20px!important;
  }

  /* Mobile date rows: no shortcut buttons, no collisions with the range label. */
  .date-action-row .date-shortcut{display:none!important}
  .window-top{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:10px!important;
    align-items:center!important;
  }
  .date-action-row{display:block!important;min-width:0!important}
  .date-action-row .date-main{
    width:100%!important;
    min-width:0!important;
    height:42px!important;
    min-height:42px!important;
    font-size:12px!important;
    padding:0 10px!important;
    touch-action:manipulation;
    position:relative;
    z-index:2;
  }
  .range-value{
    font-size:13px!important;
    text-align:right;
    white-space:nowrap;
    min-width:0;
  }

  /* Ensure important mobile buttons win hit-testing in embedded phone viewers. */
  #leaveDateBtn,#arriveDateBtn,#planBtn{
    pointer-events:auto!important;
    touch-action:manipulation;
    -webkit-user-select:none;
    user-select:none;
  }
  .sticky{z-index:90}
  .sticky-inner{width:100%}
  #planBtn{min-height:50px;font-size:16px}

  /* Slightly more room for the stacked city controls. */
  .finish-label-row{align-items:center}
}
