/* MR/Claude 10/24/2026: navigation feedback (js/nav-progress.js). While the next page is on its way (and only after 300 ms),
   a slim bar runs under the header and the content area (#main) fades behind a skeleton. The header, rail, page head and
   module menu stay as they are. Under reduce motion (device setting or the control panel switch) the bar is still and
   the skeleton does not shimmer. */
.xm4-nav-progress {position:fixed; top:calc(var(--xm4-header,60px) + env(safe-area-inset-top,0px)); left:0; right:0; height:3px; z-index:1031; pointer-events:none; overflow:hidden; opacity:0; transition:opacity .2s ease;}
.xm4-nav-progress > span {display:block; width:100%; height:100%; background:var(--xm4-accent,#2563eb); transform-origin:0 50%; transform:scaleX(.94); box-shadow:0 0 8px color-mix(in srgb,var(--xm4-accent,#2563eb) 55%,transparent);}
html.xm4-navigating .xm4-nav-progress {opacity:1;}
html.xm4-navigating .xm4-nav-progress > span {animation:xm4-nav-trickle 10s cubic-bezier(.1,.75,.25,1) both;}
@keyframes xm4-nav-trickle {0% {transform:scaleX(.06);} 12% {transform:scaleX(.42);} 35% {transform:scaleX(.68);} 100% {transform:scaleX(.94);}}

html.xm4-navigating #main {opacity:.35; transition:opacity .2s ease;}

/* The skeleton sits over the on-screen part of #main (placed by the script) and mostly hides the old content. */
.xm4-nav-skeleton {position:fixed; z-index:1005; pointer-events:none; overflow:hidden; box-sizing:border-box; display:flex; flex-direction:column; gap:14px; padding:24px; opacity:0; transition:opacity .2s ease;
    background:color-mix(in srgb,var(--xm4-bg,#f5f7fb) 84%,transparent);
    --xm4-sk:color-mix(in srgb,var(--xm4-text,#0f172a) 8%,transparent);}
.xm4-nav-skeleton i {display:block; flex:none; height:14px; border-radius:7px; background:var(--xm4-sk);}
.xm4-nav-skeleton i.t {width:min(340px,45%); height:26px; border-radius:8px; margin-bottom:10px;}
.xm4-nav-skeleton .r {display:grid; flex:none; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:8px;}
.xm4-nav-skeleton .r i {height:84px; border-radius:12px;}
.xm4-nav-skeleton i.b {height:220px; border-radius:12px; margin-top:10px;}
.xm4-nav-skeleton::after {content:""; position:absolute; inset:0; background:linear-gradient(100deg,transparent 30%,color-mix(in srgb,var(--xm4-surface,#fff) 55%,transparent) 50%,transparent 70%); transform:translateX(-100%);}
html.xm4-navigating .xm4-nav-skeleton {opacity:1;}
html.xm4-navigating .xm4-nav-skeleton::after {animation:xm4-nav-shimmer 1.5s ease-in-out infinite;}
@keyframes xm4-nav-shimmer {to {transform:translateX(100%);}}

@media print {.xm4-nav-progress, .xm4-nav-skeleton {display:none!important;}}