/* Overview-only mode control, nested in the two hand-drawn loops. */
/* Shared legends: identical dashed samples and short transport labels. */
.overview-map-label,html[data-travel-mode=rail] .overview-map-label{display:flex;align-items:center;gap:10px;font-size:9px;line-height:1;padding:6px 8px;border-radius:99px;background:#fffffff0;color:var(--text)}
.legend-item{display:inline-flex;align-items:center;gap:5px}
.legend-dash{display:inline-block;width:21px;height:0;border-top:2px dashed #165dff}
html[data-travel-mode=rail] .legend-dash.road-line{border-color:#3b5188}
html[data-travel-mode=rail] .legend-dash.rail-line{border-color:#dba777}
.hotel-detail-sheet{display:flex;flex-direction:column;overflow:hidden;isolation:isolate;padding-bottom:0}
.hotel-detail-header{position:relative;flex:0 0 44px;background:var(--paper);z-index:1}
.hotel-detail-header .hotel-detail-grip{position:absolute;inset:0;height:44px;background:none}
.hotel-detail-header .hotel-detail-grip::before{top:15px}
.hotel-detail-header .hotel-detail-close{top:4px;right:10px}
.hotel-detail-scroll{min-height:0;overflow-y:auto;overscroll-behavior:contain;position:relative;isolation:isolate;padding-bottom:calc(20px + env(safe-area-inset-bottom))}
.essential.rail-ticket-card.has-ticket{display:block;padding:9px 8px;align-content:center}
.rail-ticket-card.has-ticket>span,.rail-ticket-card.has-ticket>b{display:none}
.rail-ticket{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1fr);align-items:center;gap:2px 3px;width:100%;color:var(--pine)}
.ticket-cell{min-width:0;text-align:center;font-size:10px;font-weight:800;white-space:nowrap;line-height:1.35}
.ticket-cell-0,.ticket-cell-2{font-size:12px;font-variant-numeric:tabular-nums}
.ticket-cell-1{font-size:8px;color:var(--sub)}
.ticket-cell-4{font-size:9px;color:var(--sub)}
.ticket-arrow{grid-column:1/-1;position:relative;height:8px;margin:0 12px;border-top:1px solid var(--river);transform:translateY(4px)}
.ticket-arrow::after{content:"";position:absolute;right:0;top:-3px;width:5px;height:5px;border-top:1px solid var(--river);border-right:1px solid var(--river);transform:rotate(45deg)}
.page.editing .rail-ticket-card.has-ticket{display:grid}
.page.editing .rail-ticket-card.has-ticket>span,.page.editing .rail-ticket-card.has-ticket>b{display:block}
.page.editing .rail-ticket{display:none}
.hero-top{display:grid;grid-template-columns:minmax(0,1fr) 128px 55px;grid-template-rows:10px 30px 17px;column-gap:4px;min-height:57px}
.hero-top>div:first-child{display:contents}
.hero-top>div:first-child>small{grid-column:1;grid-row:1;white-space:nowrap;font-size:7px;letter-spacing:.08em}
.hero-top h1{grid-column:1;grid-row:2;white-space:nowrap}
.hero-top p{grid-column:1 / 3;grid-row:3;white-space:nowrap}
.hero-top .holiday-stamp{grid-column:3;grid-row:1 / 4;align-self:center}
.mode-switch{position:relative;grid-column:2;grid-row:1 / 3;width:128px;height:44px;margin:0;align-self:center;isolation:isolate}
.mode-switch .handdrawn-infinity{position:absolute;inset:0;width:100%;height:44px;opacity:.85;transform:none;z-index:-1}
.mode-options{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:8px;padding:0 10px}
.mode-options button{height:44px;min-width:0;background:transparent;border:0;border-radius:50%;color:#ffffffa6;font:inherit;font-size:11px;font-weight:700;-webkit-tap-highlight-color:transparent;clip-path:ellipse(50% 50%)}
.mode-options button[aria-pressed=true]{color:#ffe1b6;background:radial-gradient(ellipse,#f6d3a218,transparent 72%)}
.mode-options button:focus-visible{outline:2px solid #ffe1b6;outline-offset:-5px}
#modeCaption{display:none}
#itinerary .day-console,.booking-tabs{top:0}
.progress-card{padding:8px 14px}
.progress-track{margin-top:4px}
@media(max-height:700px){#overview .route-map{height:244px}}
@media(max-width:350px){.hero-top{grid-template-columns:minmax(0,1fr) 104px 43px;column-gap:3px}.mode-switch{width:104px}.mode-options{gap:4px;padding-inline:5px}.mode-options button{font-size:10px}.hero-top .holiday-stamp{width:43px;height:43px}.hero-top .holiday-stamp b{font-size:13px}.hero-top .holiday-stamp span{font-size:9px}.hero-top .holiday-stamp small{font-size:6px}}
html[data-travel-mode=rail]{--pine:#323f70;--river:#848eb8;--gold:#d4925c;--paper:#fcfaf7;--text:#28304a;--sub:#68718a;--red:#86603e;--line:#e4dfd8;background:#edeff5}
html[data-travel-mode=rail] body{background:#edeff5}
html[data-travel-mode=rail] .overview-hero{background:linear-gradient(125deg,#28385f,#525e8c)}
html[data-travel-mode=rail] .day-summary{background:linear-gradient(110deg,#e0e5f4,#f9f0e7)}
html[data-travel-mode=rail] .day-console,html[data-travel-mode=rail] .booking-tabs{background:#f4f5fa}
html[data-travel-mode=rail] .bottom-nav{background:#f4f5faf5;border-top:1px solid #dce0ed}
html[data-travel-mode=rail] .nav-btn.active{color:#323f70}
html[data-travel-mode=rail] .overview-columns .section:last-child .alert-icon{background:#e7ebf5;color:#3b5188}
html[data-travel-mode=rail] .holiday-stamp{color:#edc89d;border-color:#dba777b8;box-shadow:inset 0 0 0 3px #323f7040}
html[data-travel-mode=rail] .holiday-stamp::before{border-color:#dba777aa}
html[data-travel-mode=rail] .day-map-head{background:#34436bd9}
html[data-travel-mode=rail] .essential,html[data-travel-mode=rail] .day-note{border-color:#dbe0ee}
html[data-travel-mode=rail] .essential:nth-child(2)>span,html[data-travel-mode=rail] .essential:nth-child(4)>span{background:#e7eaf6;color:#3f5082}
html[data-travel-mode=rail] .day-tab.active{background:#323f70}
html[data-travel-mode=rail] .hotel-detail-trigger[data-hotel-detail=rail-stay-3]>b{white-space:nowrap;font-size:10.5px;letter-spacing:-.02em}
.rail-ticket-note{font-size:11px;line-height:1.6;color:#68718a;padding:9px 11px;background:#eef0f7;border-radius:10px}
.rail-ticket-note a{color:#344f9a}.rail-line{color:#dba777;font-size:17px}.road-line{color:#3b5188;font-size:17px}
html[data-travel-mode=rail] .overview-map-label{font-size:8px;line-height:1.6;padding:4px 7px;background:#fffef8ee;color:#38445e}
html[data-travel-mode=rail] .hotel-detail-kicker{color:#3b5188}


/* Rail UI uses indigo ink, apricot accents and paper neutrals throughout. */
html[data-travel-mode=rail] .hero-top small,html[data-travel-mode=rail] .overview-hero p{color:#e0e4f1}
html[data-travel-mode=rail] .infinity-node.river{fill:#dba777}
html[data-travel-mode=rail] #infinitySilk stop:last-child{stop-color:#dba777}
html[data-travel-mode=rail] .alert-icon,html[data-travel-mode=rail] .overview-columns .alert-icon{background:#f4e7d8;color:#3b5188}
html[data-travel-mode=rail] .progress-card{background:linear-gradient(120deg,#323f70,#4c5e8e);color:#fff}
html[data-travel-mode=rail] .progress-card [data-sync-status],html[data-travel-mode=rail] .progress-top span{color:#e5e8f3!important}
html[data-travel-mode=rail] .progress-bar,html[data-travel-mode=rail] .home-progress em{background:#dba777}
html[data-travel-mode=rail] .home-progress{background:#eef0f7;border-color:#d5dbea;color:#323f70}
html[data-travel-mode=rail] .todo.priority{background:linear-gradient(90deg,#f5e5d2,#fffdf9 60%);border-color:#e5c6a6}
html[data-travel-mode=rail] .todo:not(.priority):not(.done){background:linear-gradient(90deg,#e7ebf5,#fffdf9 60%);border-color:#d5dbea}
html[data-travel-mode=rail] .todo.done{background:#eff1f7;border-color:#d5dbea}
html[data-travel-mode=rail] .status,html[data-travel-mode=rail] .status.included{color:#3b5188;background:#e7ebf5;border-color:#d5dbea}
html[data-travel-mode=rail] .priority .status{color:#795633;background:#f5e5d2}
html[data-travel-mode=rail] input[type=checkbox]{accent-color:#3b5188}
html[data-travel-mode=rail] .essential>span,html[data-travel-mode=rail] .tool-icon{color:#3b5188;background:#f4e7d8}
html[data-travel-mode=rail] .essential:nth-child(even)>span{color:#3b5188;background:#e7ebf5}
html[data-travel-mode=rail] .essential::before{border-color:#dba777}
html[data-travel-mode=rail] .day-note.warn{background:#fbf1e5;border-color:#e5c6a6}
html[data-travel-mode=rail] .timeline-axis::before{background:#dba777}
html[data-travel-mode=rail] .timeline-axis::after{background:#dba777;border-color:#fcfaf7}
html[data-travel-mode=rail] .hotel-map-fallback,html[data-travel-mode=rail] .map-fallback{background:linear-gradient(145deg,#323f70,#4c5e8e)}
html[data-travel-mode=rail] .hotel-detail-kicker,html[data-travel-mode=rail] .todo-when{color:#3b5188}
html[data-travel-mode=rail]{--pine-2:#4c5e8e;--sand:#edeff5}
html[data-travel-mode=rail] .app{background:linear-gradient(#fcfaf7,#f4f3f5)}
html[data-travel-mode=rail] .todo{border-color:#d5dbea!important;border-left-color:#8495ba!important}
html[data-travel-mode=rail] .todo.priority{border-left-color:#dba777!important}
html[data-travel-mode=rail] .todo.done{border-left-color:#8495ba!important}
html[data-travel-mode=rail] .todo.done label,html[data-travel-mode=rail] .todo.done label span,html[data-travel-mode=rail] .todo.done .todo-when{color:#7a8298}
html[data-travel-mode=rail] .essential>span em,html[data-travel-mode=rail] .essential:nth-child(even)>span em{color:#3b5188;background:#fcf2e5;border-color:#e5c6a6}
html[data-travel-mode=rail] .essential::before,html[data-travel-mode=rail] .essential:nth-child(even)::before{background:#dba77733}
html[data-travel-mode=rail] .tool-card:nth-child(even) .tool-icon{color:#3b5188;background:#e7ebf5}
html[data-travel-mode=rail] .tool-card:nth-child(even)::before{background:linear-gradient(#8495ba,transparent)}
html[data-travel-mode=rail] .fact-list{border-left-color:#8495ba}
html[data-travel-mode=rail] .day-summary h2::after,html[data-travel-mode=rail] .section-row h2::after,html[data-travel-mode=rail] .group-title h2::after{border-color:#dba77799}
html[data-travel-mode=rail] .day-notes::before,html[data-travel-mode=rail] .day-note::after,html[data-travel-mode=rail] .home-progress::after{color:#8495ba}
html[data-travel-mode=rail] .tool-search-row #shareBtn{background:#e7ebf5;border-color:#d5dbea}
html[data-travel-mode=rail] .hotel-detail-close,html[data-travel-mode=rail] .hotel-detail-figure figcaption,html[data-travel-mode=rail] .update-bar{background:#323f70ed}
html[data-travel-mode=rail] .hotel-detail-map-fallback{background:linear-gradient(145deg,#323f70,#4c5e8e)}
html[data-travel-mode=rail] .hotel-detail-source a,html[data-travel-mode=rail] .overview-reset{color:#3b5188}
html[data-travel-mode=rail] .hotel-detail-map-wrap{border-color:#d5dbea;background:#e7ebf5}
html[data-travel-mode=rail] .day-map-head span,html[data-travel-mode=rail] .day-tab.active span{color:#e0e4f1}
html[data-travel-mode=rail] .nav-btn{color:#7a8298}
html[data-travel-mode=rail] .nav-btn.active{color:#323f70}