main .forecast-switcher { position:relative; top:auto; left:auto; transform:none; width:auto; text-align:left; justify-content:flex-start; transition:none; }
main .forecast-switcher a { opacity:1; font-size:.9rem; text-transform:none; }
main .forecast-switcher a::before,main .forecast-switcher a::after { content:none; }
/* Forecast navigation: compact rounded links in a horizontally scrolling row. */
main .forecast-switcher {
    display:flex;
    flex-wrap:nowrap;
    gap:5px;
    margin:1rem 1rem 0;
    padding:6px;
    background:#202b34;
    border:1px solid rgb(174 202 224 / .12);
    border-radius:18px;
    overflow-x:auto;
    scrollbar-width:none;
    scroll-snap-type:x proximity;
}
main .forecast-switcher a {
    display:flex;
    align-items:center;
    justify-content:center;
    flex:1 0 auto;
    white-space:nowrap;
    scroll-snap-align:start;
    min-height:44px;
    padding:9px 15px;
    border:1px solid transparent;
    border-radius:12px;
    color:#b9c9d7;
    font-size:.82rem;
    font-weight:500;
    line-height:1.25;
    text-decoration:none;
    transition:background-color .15s ease,color .15s ease;
}
main .forecast-switcher a[aria-current] {
    background:#254b65;
    border-color:rgb(135 206 250 / .25);
    color:#f3f8fc;
    font-weight:650;
    box-shadow:0 1px 3px rgb(0 0 0 / .15);
}
main .forecast-switcher a:hover { background:#30414f; color:#fff; }
main .forecast-switcher a[aria-current]:hover { background:#2b5571; }
@media(max-width:479px) {
    main .forecast-switcher { gap:4px; }
    main .forecast-switcher a { padding:9px 10px; }
}
@media(prefers-reduced-motion:reduce) {
    main .forecast-switcher a { transition:none; }
}

main .forecast-switcher::-webkit-scrollbar { display:none; }

/* A persistent arrow makes the horizontally scrolling links discoverable. */
.forecast-nav-wrap { position:relative; margin:1rem 1rem 0; }
main .forecast-nav-wrap .forecast-switcher { margin:0; padding-right:48px; scroll-padding:6px 48px; }
.forecast-nav-next { position:absolute; right:1px; top:1px; bottom:1px; width:42px; border:0; border-left:1px solid rgb(174 202 224 / .12); border-radius:0 17px 17px 0; background:#293b49; color:#b7ddf4; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.forecast-nav-next::before { content:""; position:absolute; right:100%; top:0; bottom:0; width:16px; background:linear-gradient(90deg,transparent,#202b34); pointer-events:none; }
.forecast-nav-next svg { width:18px; height:18px; }
.forecast-nav-next.at-end svg { transform:rotate(180deg); }
.forecast-nav-next:hover { background:#355165; }
.forecast-nav-next[hidden] { display:none; }
main .forecast-nav-wrap:not(.has-overflow) .forecast-switcher { padding-right:6px; }

/* Option A remains the default enclosed rail. Preview B with ?nav=b. */
main .nav-option-b .forecast-switcher {
    background:transparent;
    border-color:transparent;
    border-radius:0;
    gap:8px;
    padding-top:4px;
    padding-bottom:4px;
    padding-left:0;
}
main .nav-option-b .forecast-switcher a {
    border-radius:24px;
    background:#252e35;
    border:1px solid #3b4852;
    padding-inline:17px;
    font-weight:500;
    color:#c3d0da;
}
main .nav-option-b .forecast-switcher a[aria-current] {
    background:#c0deed;
    color:#142d3e;
    border-color:#c0deed;
    box-shadow:none;
    font-weight:650;
}
main .nav-option-b .forecast-switcher a:hover { background:#354551; color:#fff; }
main .nav-option-b .forecast-switcher a[aria-current]:hover { background:#d3e9f4; color:#142d3e; }
.nav-option-b .forecast-nav-next {
    top:5px;
    bottom:5px;
    right:0;
    width:38px;
    border-radius:50%;
    border:1px solid #425563;
    background:#253440;
}
.nav-option-b .forecast-nav-next::before { width:12px; background:linear-gradient(90deg,transparent,#212121); }

/* Option C: text navigation with an understated baseline and clear scroll control. */
main .nav-option-c .forecast-switcher {
    background:transparent;
    border:0;
    border-bottom:1px solid #39434c;
    border-radius:0;
    gap:20px;
    padding:0 48px 0 0;
    scroll-padding-left:0;
}
main .nav-option-c .forecast-switcher a {
    flex:0 0 auto;
    min-height:48px;
    padding:12px 0;
    border:0;
    border-bottom:2px solid transparent;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    color:#aebfcd;
    font-weight:500;
}
main .nav-option-c .forecast-switcher a[aria-current] {
    color:#edf6fc;
    border-bottom-color:#87cefa;
    font-weight:650;
}
main .nav-option-c .forecast-switcher a:hover { color:white; background:transparent; }
.nav-option-c .forecast-nav-next {
    right:0;
    top:0;
    bottom:1px;
    width:40px;
    border:0;
    border-left:1px solid #39434c;
    border-radius:0;
    background:#212121;
    color:#a9d8f3;
}
.nav-option-c .forecast-nav-next::before { background:linear-gradient(90deg,transparent,#212121); }
.nav-option-c .forecast-nav-next:hover { background:#29333b; }

main .forecast-switcher a { text-decoration:none; flex-shrink:0; }
.forecast-switcher a:focus-visible,.forecast-nav-next:focus-visible { outline:2px solid lightskyblue; outline-offset:-3px; }
/* Progressive enhancement for same-origin forecast page navigation.
   Native links, history, and loading continue to work without this API. */
@view-transition { navigation:auto; }
::view-transition-group(root) { animation-duration:160ms; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration:160ms; animation-timing-function:ease-out; }
@media (prefers-reduced-motion:reduce) {
    @view-transition { navigation:none; }
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) { animation:none; }
}

/* Pin with a measured placeholder rather than browser-dependent sticky containment. */
body > header { top: 0; }
.forecast-nav-anchor { margin: 1rem 1rem 0; height: 0; }
main .forecast-nav-wrap { margin-top: 0; }
main .forecast-nav-wrap.is-pinned {
    position: fixed;
    top: var(--forecast-header-offset, 0px);
    left: var(--forecast-pin-left);
    width: var(--forecast-pin-width);
    margin: 0;
    z-index: 90;
    background: #202b34;
    border-radius: 18px;
    box-sizing: border-box;
}