/* Shared geometry for live time and the optional earlier/later destinations. */
html.is-alt-layout body.homepage .interface.is-paired .time-control,
html.is-alt-layout body.homepage .interface.is-paired .time-control:has(.light-guide:not([hidden])){display:grid!important;grid-template-columns:minmax(0,1fr) 112px minmax(0,1fr);column-gap:16px;width:min(400px,calc(100vw - 32px));grid-template-rows:44px 44px;row-gap:0;height:88px;min-height:88px;align-items:center;}
html body.homepage .time-control .time-button{grid-column:2;grid-row:2;width:112px;min-width:112px;min-height:44px;justify-content:center;text-align:center;padding:0}
html body.homepage .time-control .light-guide,html body.homepage .time-control .light-guide[hidden]{display:contents!important}
html body.homepage .time-control .light-guide button{box-sizing:border-box;max-width:100%;min-width:0;min-height:44px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:400 11px/1.4 'Meric Inter',sans-serif!important;padding:6px 0;text-shadow:none;opacity:.7;pointer-events:auto;transition:opacity 350ms ease}
html body.homepage .time-control .light-previous{grid-area:2/1;justify-self:end;text-align:right}
html body.homepage .time-control .light-next{grid-area:2/3;justify-self:start;text-align:left}
html body.homepage .time-control .light-guide[hidden] button{opacity:0;visibility:hidden;pointer-events:none}
html body.homepage .time-control .light-guide button::before,html body.homepage .time-control::after,html body.homepage .time-control #quick-now::before{content:none!important;display:none!important}
html body.homepage .time-control .light-guide button:hover,html body.homepage .time-control .light-guide button:focus-visible{opacity:1}
html body.homepage .time-control #quick-now{position:static;display:flex;align-items:flex-end;justify-content:center;grid-column:2;grid-row:1;justify-self:center;transform:none;min-width:44px;min-height:44px;box-sizing:border-box;font-size:10px;line-height:1.4;padding:0 8px 2px}
@media(prefers-reduced-motion:reduce){html body.homepage .time-control .light-guide button{transition:none}}
html.is-alt-layout body.homepage .interface.is-paired .time-control{z-index:66}
/* Time controls have no fog badges or residual focus shadows. */
html body.homepage .time-control :is(#quick-now,.time-button,.light-guide button),
html body.homepage .time-control :is(#quick-now,.time-button,.light-guide button):is(:hover,:focus,:focus-visible){background:none!important;box-shadow:none!important;filter:none!important;text-shadow:none!important}
html body.homepage .time-control :is(#quick-now,.time-button,.light-guide button)::before,
html body.homepage .time-control :is(#quick-now,.time-button,.light-guide button)::after{content:none!important;display:none!important}
html body.homepage .time-control :is(#quick-now,.light-guide button):focus-visible{opacity:1!important;color:var(--nav-ink)!important}

/* Reserve a separate row for Now above the cities, even in live mode. */
html body.homepage #place-picker{padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))!important}
html body.homepage .city-navigation{height:44px;min-height:44px;flex-wrap:nowrap}

/* Keyboard feedback remains visible without a ring or underline. */
html body.homepage .time-control #time-button:focus-visible{opacity:1!important;font-weight:600!important}

html body.homepage .city-navigation>.sky-options{flex-basis:44px}
html body.homepage .city-navigation>.sky-options>summary{width:44px;min-height:44px}
/* Keep map previews above the clock's reserved rows as well. */

/* One layout owns preview, time actions and navigation. No cross-area offsets. */
html body.homepage>.sky-dock{position:fixed!important;z-index:66!important;inset:auto 0 calc(20px + env(safe-area-inset-bottom,0px))!important;margin-inline:auto;transform:none!important;width:calc(100% - 44px)!important;max-width:none;height:auto!important;display:grid!important;grid-template-rows:136px 44px;gap:12px;justify-items:center;pointer-events:none!important}
html.is-alt-layout body.homepage .sky-dock.interface.is-paired .time-control,
html.is-alt-layout body.homepage .sky-dock.interface.is-paired .time-control:has(.light-guide:not([hidden])){position:relative!important;inset:auto!important;transform:none!important;margin:0!important;grid-row:1;grid-column:1;align-self:end;width:min(400px,100%);height:88px;pointer-events:auto}
html body.homepage .sky-dock .city-navigation{grid-row:2;grid-column:1;margin:0;max-width:100%;width:fit-content;min-width:0;pointer-events:auto}
html body.homepage #timeline .city-map{display:none!important}
.dock-city-preview{grid-row:1;grid-column:1;transform:translateX(var(--preview-x,0px));align-self:end;display:flex;flex-direction:column;align-items:center;gap:0;width:min(224px,100%);height:118px;box-sizing:border-box;opacity:0;transition:opacity 120ms ease;pointer-events:none;color:var(--nav-ink)}
.dock-city-preview[data-visible]{opacity:1;transition:opacity 180ms ease 120ms}
@media(hover:hover) and (pointer:fine){.dock-city-preview[data-visible]{pointer-events:auto;cursor:default}}
.dock-map{position:relative;width:200px;max-width:100%;height:100px;flex:none}
.dock-map img{display:block;width:100%;height:100%;object-fit:contain;opacity:.75}
.dock-map-pin{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--nav-ink);transform:translate(-50%,-50%)}
.dock-years{font:400 11px/18px 'Meric Inter',sans-serif;white-space:nowrap;color:var(--nav-ink)}
html body.homepage.about-expanded .dock-city-preview{opacity:0;pointer-events:none}
@media(max-height:520px){html body.homepage>.sky-dock{grid-template-rows:92px 44px;gap:8px}.dock-city-preview{height:92px;gap:4px}.dock-map{width:140px;height:70px}}
@media(prefers-reduced-motion:reduce){.dock-city-preview{transition:none}}


html body.homepage #place-picker{pointer-events:none}
html body.homepage .sky-dock #timeline{display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-start;height:44px;padding:0;margin:0;max-width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
html body.homepage .sky-dock #timeline .city-group{align-items:center;flex-wrap:nowrap;flex-shrink:0}
html body.homepage .sky-dock #timeline .city-group button{display:flex;align-items:center;justify-content:center;height:44px;min-height:44px;padding:0 12px;box-sizing:border-box}
.dock-map img{filter:brightness(.45)}
html[data-cloud-tone="dark"] .dock-map img{filter:brightness(1.15)}

/* The city preview borrows the time area instead of sitting beyond it. */
html.is-alt-layout body.homepage .sky-dock.interface.is-paired .time-control{transition:opacity 120ms ease 120ms,visibility 0s 120ms}
html.is-alt-layout body.homepage .sky-dock.interface.is-paired[data-previewing] .time-control{opacity:0!important;visibility:hidden!important;pointer-events:none!important;transition:opacity 120ms ease,visibility 0s 120ms}
@media(prefers-reduced-motion:reduce){html.is-alt-layout body.homepage .sky-dock.interface.is-paired .time-control,.dock-city-preview[data-visible]{transition:none}}

html body.homepage .time-control #quick-now{color:var(--nav-ink)}

/* Let overflowing city names dissolve gradually at either edge. */
html body.homepage .sky-dock #timeline{mask-image:linear-gradient(to right,transparent,#000 var(--city-fade-left,0px),#000 calc(100% - var(--city-fade-right,0px)),transparent);-webkit-mask-image:linear-gradient(to right,transparent,#000 var(--city-fade-left,0px),#000 calc(100% - var(--city-fade-right,0px)),transparent)}

/* Animate the fade boundary itself so its gradient never swaps abruptly. */
@property --fold{syntax:'<length-percentage>';inherits:false;initial-value:0px}
/* Center the chosen city; reveal either side without changing geometry. */
html body.homepage #sky-dock .city-navigation{position:relative;display:block;width:100%;height:44px;--sf-width:150px;--tail-width:40px}
html body.homepage #sky-dock #timeline{position:absolute;left:40px;right:40px;top:0;width:calc(100% - 80px);max-width:none;gap:0;touch-action:pan-x;--fold:max(0px,calc(50% - var(--sf-width)/2 - var(--tail-width)));clip-path:inset(0 var(--fold));transition:--fold 300ms cubic-bezier(.22,1,.36,1);mask-image:linear-gradient(to right,transparent var(--fold),#000 calc(var(--fold) + var(--edge-left,var(--tail-width))),#000 calc(100% - var(--fold) - var(--edge-right,var(--tail-width))),transparent calc(100% - var(--fold)));-webkit-mask-image:linear-gradient(to right,transparent var(--fold),#000 calc(var(--fold) + var(--edge-left,var(--tail-width))),#000 calc(100% - var(--fold) - var(--edge-right,var(--tail-width))),transparent calc(100% - var(--fold)))}
html body.homepage #sky-dock #timeline::before,html body.homepage #sky-dock #timeline::after{content:'';display:block;flex:0 0 50%;height:1px}
html body.homepage #sky-dock #timeline .city-group{display:flex!important;flex:0 0 auto;width:auto!important;max-width:none!important;gap:0!important;opacity:1!important;overflow:visible;transform:none;visibility:visible;pointer-events:auto;margin:0}
html body.homepage #sky-dock #timeline .city-group button{flex:0 0 auto;min-width:0;width:auto;transform:none;padding:0 12px}
html body.homepage.places-near #sky-dock #timeline{--fold:0px;--edge-left:var(--city-fade-left,0px);--edge-right:var(--city-fade-right,0px)}
html body.homepage #sky-dock :is(#more-places,#later-places){display:block;position:absolute;left:max(40px,calc(50% - var(--sf-width)/2 - var(--tail-width)));top:0;width:var(--tail-width);height:44px;min-width:0;margin:0;padding:0;border:0;background:none;z-index:2}
html body.homepage #sky-dock #later-places{left:auto;right:max(40px,calc(50% - var(--sf-width)/2 - var(--tail-width)))}
html body.homepage #sky-dock :is(#more-places,#later-places)[hidden]{display:none}
html body.homepage #sky-dock :is(#more-places,#later-places)::before,html body.homepage #sky-dock :is(#more-places,#later-places)::after{display:none!important}
html body.homepage.places-near #sky-dock :is(#more-places,#later-places){pointer-events:none}
html body.homepage #sky-dock .city-navigation>.sky-options{position:absolute;left:auto;right:0;top:0;width:32px;height:44px}
@media(prefers-reduced-motion:reduce){html body.homepage #sky-dock #timeline{transition:none}}

/* Time and selected city read as a compact pair, with a modest type hierarchy. */
html body.homepage>.sky-dock{row-gap:0}
html.is-alt-layout body.homepage #sky-dock.interface.is-paired .time-button{font-size:15px!important;line-height:1.5}

/* Local ink settles quickly; hysteresis in sky-contrast prevents flicker. */
html body.homepage #sky-dock #timeline .city,
html body.homepage #sky-dock .time-control #time-button,
html body.homepage #sky-dock .time-control #quick-now,
html body.homepage #sky-dock .time-control .light-guide button,
html body.homepage .sky-utilities>.sky-options>summary,
html body.homepage .sky-music .music-trigger{transition:color 200ms ease,opacity 180ms ease}

html body.homepage #time-label{transition:color 200ms ease}
html body.homepage .meric-wordmark[data-local-contrast]{transition:background-color 200ms ease}
html body.homepage .time-control .light-guide:not([hidden]) button[data-local-contrast]{opacity:1;color:var(--nav-muted,var(--nav-ink))}
html body.homepage .time-control .light-guide button[data-local-contrast]:is(:hover,:focus-visible){color:var(--nav-ink)}
@media(prefers-reduced-motion:reduce){html body.homepage :is([data-local-contrast],#time-label,#timeline .city){transition:none!important}}