/* One continuous feed of itinerary pages. The feed scrolls natively and
   carries a fling through as many pages as it has; a release settles on one.
   Each page carries its own title and time-of-day card. */

.app{grid-template-rows:minmax(0,1fr)!important;position:relative;z-index:1}

/* The header row is gone; only the menu button floats on small screens. */
.topbar{position:absolute;z-index:20;top:0;left:0;min-height:0!important;height:auto;padding:10px!important;border:0!important;background:none!important;pointer-events:none}
.topbar>*{pointer-events:auto}
.topbar>.sky-card,.topbar>.sky-art,.topbar>.trip-dates,.topbar>#scene-title{display:none!important}

.feed{position:relative;height:100%;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;scroll-snap-type:y mandatory;scrollbar-width:none;outline:0}
.feed::-webkit-scrollbar{display:none}

/* A fling may pass several pages and still lands on one; it is never stopped at the next. */
.page{position:relative;color:var(--page-ink);display:flex;flex-direction:column;min-height:100%;scroll-snap-align:start}
/* Pages taller than the screen scroll freely inside themselves; browsers
   allow any position within a snap area larger than the viewport. */
.page-end{display:none}

.page-head{flex:none;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:24px 34px 4px}
.page-title{margin:0;min-width:0;font:500 clamp(25px,2.6vw,42px)/1.08 Newsreader,serif;letter-spacing:-.65px;overflow-wrap:anywhere;color:var(--page-ink)}
.page-title:focus{outline:0}
.page-sky{flex:none;display:grid;justify-items:end;gap:2px;max-width:46%;margin:2px 0 0;padding:4px 0;border:0;background:none;color:var(--page-ink);font:inherit;text-align:right;cursor:pointer}
.page-sky strong{font-size:12px;font-weight:600}
.page-sky span{font-size:12px}
.page-sky small{font-size:10px;color:var(--page-muted)}
.page-sky:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:4px}

/* Stages inside pages grow with their content; the feed is the only scroller. */
.page>.stage{flex:1 0 auto;min-height:0;height:auto;overflow:visible;background:transparent}
.page>.stage.is-event{padding-top:14px}
.page .scene-copy{overscroll-behavior:auto}
/* Desktop travel keeps its two columns at exactly one screen; the notes
   column scrolls and hands off to the feed at either end. */
@media (min-width:1001px),(max-height:560px) and (min-width:600px){
 .page:has(>.stage.is-travel){height:100%}
 .page>.stage.is-travel{flex:1 1 0;min-height:0;overflow:hidden}
}

/* Preview pages: same layout as live pages, at rest. */
.preview-stage .preview-map{flex:1;border-radius:var(--media-radius,14px);background:radial-gradient(ellipse at 60% 40%,#ffffff40,transparent 70%),color-mix(in srgb,var(--page-surface) 70%,#e0e7e0)}
.preview-stage:not(.is-travel) .preview-map{min-height:320px}
.page>.stage.is-event .preview-map{flex:none;height:clamp(360px,62dvh,680px)}
.preview-stage .slide-frames{position:relative}
.preview-stage .slide-frame{position:relative;display:block}
.preview-stage .slide-frame img{display:block}
.preview-stage .media-actions button{pointer-events:none}

/* One fixed sky behind every page; its colours and sun follow the scroll. */
.sky-backdrop{position:fixed;z-index:0;top:0;right:0;left:var(--sidebar);height:118px;pointer-events:none;overflow:hidden}
/* The sun keeps to the header band, between the title and the sky card. */
.sky-backdrop .sky-sun,.sky-backdrop .sky-moon{left:79%!important}
.sky-backdrop .sky-art{position:absolute;inset:0;background:none!important;z-index:auto}
.sky-backdrop :is(.sky-haze,.sky-horizon,.sky-stars){display:none}
.sky-backdrop .sky-sun{display:block!important;left:var(--sun-x,65%);bottom:var(--sun-height,50%);opacity:var(--sun-opacity,1)!important;transition:none!important}
.sky-backdrop .sky-moon{display:block!important;left:57%;opacity:var(--moon-opacity,0)!important;transition:none!important}
.sky-backdrop:is([data-sky="dawn"],[data-sky="sunset"]) .sky-sun{width:38px;height:38px;background:#fff4b6;box-shadow:0 0 9px 5px #ffdc77cc,0 0 32px 16px #ffbb5577}
/* The sky is a fixed layer behind the app; the body itself stays transparent. */
body[data-sky]{background:transparent!important;transition:none!important}
body[data-sky]:before{display:none}
.sky-wash{position:fixed;inset:0;z-index:-2;pointer-events:none;contain:strict}
.sky-wash>span{position:absolute;inset:0;will-change:opacity}
.sky-wash>.sky-layer+.sky-layer{opacity:0}
.sky-stars-layer{opacity:0;background-image:radial-gradient(circle at 6% 12%,#fff 0 .8px,transparent 1.2px),radial-gradient(circle at 24% 31%,#dae8ff 0 .7px,transparent 1.1px),radial-gradient(circle at 41% 9%,#fff 0 1px,transparent 1.4px),radial-gradient(circle at 58% 37%,#e8f0ff 0 .7px,transparent 1.2px),radial-gradient(circle at 76% 18%,#fff 0 .8px,transparent 1.3px),radial-gradient(circle at 94% 32%,#dce9ff 0 1px,transparent 1.5px),radial-gradient(circle at 13% 61%,#e8f0ff 0 .6px,transparent 1px),radial-gradient(circle at 37% 73%,#fff 0 .7px,transparent 1.2px),radial-gradient(circle at 67% 63%,#e2eaff 0 .8px,transparent 1.3px),radial-gradient(circle at 88% 82%,#fff 0 .6px,transparent 1px);background-size:570px 410px}
.sidebar{transition:background-color .45s ease,color .45s ease}

@media (max-width:1000px){
 .sky-backdrop{left:0}
 .page-head{padding:14px 16px 2px 60px;gap:12px;flex-direction:column}
 .page-title{font-size:26px}
 .page-sky{justify-items:start;text-align:left;max-width:none;margin:0}
 .page>.stage{padding-top:12px}
}

/* Globe and terrain let one-finger vertical drags scroll the feed. */
#globe{touch-action:pan-y}

@media (prefers-reduced-motion:reduce){.feed{scroll-behavior:auto}}

/* The floating menu button stays readable over scrolling pages. */
.topbar>#menu{border-radius:50%;background:color-mix(in srgb,var(--page-surface) 78%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 2px 10px #09282018}

/* Itinerary list: one highlight that slides with the scroll between events. */
#day-nav{position:relative}
.nav-day{position:relative;z-index:1}
.nav-indicator{position:absolute;z-index:0;top:0;left:0;border-radius:6px;background:var(--page-active,#fff9ed);box-shadow:inset 2px 0 0 var(--page-time,var(--accent));pointer-events:none;will-change:transform}
.nav-indicator[hidden]{display:none}
.nav-stops a.active,body[data-sky] .nav-stops a.active{background:transparent;font-weight:inherit;color:inherit;border-left-color:var(--page-line,#c5d1c5);border-left-width:1px}
.nav-stops a.nav-near,body[data-sky] .nav-stops a.nav-near{color:var(--page-ink,var(--ink));font-weight:600}

/* With a mouse or trackpad the feed is paged by journey-wheel.js; native
   snapping stays on for touch, where it already feels right. */
@media (hover:hover) and (pointer:fine){.feed{scroll-snap-type:none}}

/* Off-screen pages skip layout and painting until they come near the view.
   Each page remembers its real height once rendered; before that it is
   estimated at one screen, which is also every page's minimum height. */
.page{content-visibility:auto;contain-intrinsic-size:auto 100dvh}