/* One persistent green selection surface moves between main navigation links. */
:root .header .nav-links{isolation:isolate}
:root .header .nav-links>.nav-indicator{z-index:0;top:50%;bottom:auto;height:44px;border-radius:999px;background:var(--green);transform:translate(var(--indicator-x,0px),-50%);pointer-events:none}
:root .header .nav-links>a{z-index:1;border-radius:999px}
:root .header .nav-links>a[aria-current]{background:transparent;color:var(--paper)}
:root .header .nav-links>a[aria-current]:hover{background:transparent;color:var(--paper)}
:root .header .nav-links>a::after{display:none!important}
:root .header .nav-links:not(.has-indicator)>a[aria-current]{background:var(--green)}
:root .header .nav-links.indicator-ready>.nav-indicator{transition:transform 680ms cubic-bezier(.4,0,.2,1),width 680ms cubic-bezier(.4,0,.2,1),opacity 160ms}
@media(prefers-reduced-motion:reduce){:root .header .nav-links.indicator-ready>.nav-indicator{transition:none}}
html[data-motion=reduce] .header .nav-links.indicator-ready>.nav-indicator{transition:none}

/* Keep desktop controls in their existing row; give mobile its own top-right group. */
.header-controls{display:contents}
@media(max-width:760px){
 :root .header-controls{display:flex;align-items:center;gap:4px;position:fixed;top:14px;right:40px;z-index:3}
}
@media(max-width:640px){
 :root .header-controls{top:10px;right:21px}
}