/* A small resident of the navigation. Every style keeps the same layout box. */
html[data-theme=lab][data-nav] .site-header[data-panda-ready]{height:104px;min-height:104px;padding-block:8px;overflow:visible;gap:24px}
.site-header[data-panda-ready] .wordmark{align-self:flex-start}
.site-header[data-panda-ready] .wordmark .panda-mark{width:52px;height:52px}
html[data-theme=lab][data-nav] .site-header[data-panda-ready] nav{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-self:center;align-items:stretch;gap:0;width:500px;max-width:calc(100% - 80px);height:56px;margin-top:0;padding:5px;border:1px solid transparent;border-radius:999px;background:transparent;box-shadow:none;transition:background-color .62s cubic-bezier(.4,0,.2,1),border-color .62s,box-shadow .62s}
html[data-theme=lab][data-nav=capsule] .site-header[data-panda-ready] nav{border-color:#d4ddce}
html[data-theme=lab][data-nav] .site-header[data-panda-ready] nav a{min-width:0;min-height:44px;padding:6px 5px;justify-content:center;align-items:center}
html[data-theme=lab][data-nav=index] .site-header[data-panda-ready] nav a{gap:4px}
html[data-theme=lab][data-nav=index] .site-header[data-panda-ready] nav a:first-child{border-left:0}
html[data-theme=lab][data-nav] .site-header[data-panda-ready] nav a::after{left:8px;right:8px}
.nav-panda-toggle{position:absolute;z-index:12;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:transparent;border-radius:50%;cursor:pointer;touch-action:manipulation;transition:opacity .22s}
.nav-panda-toggle:focus-visible{outline:2px solid #627c60;outline-offset:0;background:#e8eee380}
.nav-panda-tail{position:absolute;display:block;width:15px;height:16px;border:1px solid #b8bcb0;border-radius:48% 54% 44% 51%;background:radial-gradient(circle at 35% 25%,#fffff8 30%,#e4e7da 95%);box-shadow:0 1px 2px #24362b20;transform-origin:50% 85%;animation:panda-tail-idle 5.4s ease-in-out infinite}
.nav-panda-tail::after{content:"";position:absolute;inset:3px;border-left:1px solid #ffffffc0;border-radius:50%;transform:rotate(20deg)}
.nav-panda-tail::before{content:"";position:absolute;top:-2px;left:4px;width:6px;height:5px;border-top:1px solid #b8bcb0;border-radius:60% 70% 0 0;background:#fffff8}
.nav-panda-toggle:hover .nav-panda-tail,.nav-panda-toggle:focus-visible .nav-panda-tail{animation-play-state:paused;scale:1.12}
.nav-panda-toggle[aria-disabled=true]{pointer-events:none;outline:none;background:transparent}
.nav-panda-toggle[aria-disabled=true] .nav-panda-tail{opacity:0;animation-play-state:paused}
.nav-panda-stage{position:absolute;inset:0;z-index:11;pointer-events:none;overflow:visible}
.nav-panda-actor{position:absolute;left:0;top:0;width:96px;height:96px;opacity:0;transform-origin:50% 88%;will-change:transform,opacity}
.nav-panda-sprite{position:absolute;inset:0;display:block;width:100%;height:100%;background-image:url('assets/navigation-panda-ab-v1.webp');background-size:300% 200%;background-position:0 0;background-repeat:no-repeat}
.nav-panda-sprite[data-pose=surprised]{background-position:50% 0}
.nav-panda-sprite[data-pose=pull]{background-position:100% 0}
.nav-panda-sprite[data-pose=ninja]{background-position:0 100%}
.nav-panda-sprite[data-pose=annoyed]{background-position:50% 100%}
.nav-panda-sprite[data-pose=back]{background-position:100% 100%}
.nav-panda-previous{opacity:0}
.nav-panda-portal{position:absolute;width:40px;height:74px;border:1.5px solid #91a985;border-radius:50%;background:radial-gradient(ellipse at center,#f7f8f200 38%,#dfe8d58c 85%);box-shadow:inset 0 0 0 3px #f7f8f280;opacity:0;transform-origin:center;pointer-events:none;z-index:2}
.nav-panda-portal::before{content:"";position:absolute;inset:4px -5px;border:1px solid #b6c7ab;border-radius:50%;transform:rotate(9deg);opacity:.65}
.nav-panda-portal::after{content:"";position:absolute;top:8px;right:0;width:4px;height:4px;border-radius:50%;background:#6e8861;box-shadow:-34px 44px 0 -1px #9eaf8e}
.nav-panda-smoke{position:absolute;left:0;top:0;width:1px;height:1px}
.nav-panda-smoke i{position:absolute;width:26px;height:23px;border:1px solid #c0cbbc;border-radius:48% 58% 52% 45%;background:#e8eee3;opacity:0;transform-origin:center}
.nav-panda-status{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@keyframes panda-tail-idle{0%,70%,100%{transform:rotate(0deg)}76%{transform:rotate(-13deg) translateY(-1px)}82%{transform:rotate(12deg)}88%{transform:rotate(-7deg)}94%{transform:rotate(4deg)}}
@media(max-width:1000px){.site-header[data-panda-ready] .header-note{display:none!important}}
@media(max-width:760px){
 html[data-theme=lab][data-nav] .site-header[data-panda-ready]{height:160px;min-height:160px;display:grid;grid-template-columns:52px 1fr;grid-template-rows:80px 56px;align-content:space-between;gap:0 12px}
 .site-header[data-panda-ready] .wordmark .panda-mark{width:44px;height:44px}
 .site-header[data-panda-ready] .header-note{display:block!important;align-self:start;justify-self:end;margin-top:13px}
 html[data-theme=lab][data-nav] .site-header[data-panda-ready] nav{grid-column:1/-1;width:100%;max-width:100%;padding-left:5px;margin:0}
 html[data-theme=lab][data-nav] .site-header[data-panda-ready] nav a{padding-inline:0;font-size:11px}
 .nav-panda-actor{width:84px;height:84px}
}
@media(max-width:360px){html[data-theme=lab][data-nav] .site-header[data-panda-ready] nav a.ui-nav{font-size:9.5px;letter-spacing:-.01em}}
/* Persistent layers interpolate in place: no display/flex-direction switches. */
html[data-theme=lab][data-nav] .site-header[data-panda-ready]{background:var(--bg);border-bottom-color:transparent;transition:border-color .62s}
html[data-theme=lab][data-nav] .site-header[data-panda-ready]::before{content:"";position:absolute;inset:0 -2vw;z-index:-1;background:var(--bg);opacity:.97}
html[data-theme=lab][data-nav=editorial] .site-header[data-panda-ready],html[data-theme=lab][data-nav=index] .site-header[data-panda-ready]{border-bottom-color:#c8d3c4}
html[data-theme=lab][data-nav=capsule] .site-header[data-panda-ready] nav{background:#e8eee3;box-shadow:0 4px 16px #22393306}
html[data-theme=lab][data-nav] .site-header[data-panda-ready] nav a{position:relative;display:flex;flex-direction:row;border-left:1px solid transparent;border-radius:999px;letter-spacing:.01em;background:transparent;color:var(--ink);transition:background-color .62s,color .62s,border-color .62s}
html[data-theme=lab][data-nav] .site-header[data-panda-ready] nav a>span:last-child{display:block;transform:translateY(0);transition:transform .62s cubic-bezier(.4,0,.2,1)}
html[data-theme=lab][data-nav] .site-header[data-panda-ready] .nav-number{display:block;position:absolute;inset:4px 0 auto;text-align:center;font-size:9px;line-height:1;letter-spacing:.07em;opacity:0;transform:translateY(5px);transition:opacity .5s,transform .62s cubic-bezier(.4,0,.2,1);pointer-events:none}
html[data-theme=lab][data-nav=index] .site-header[data-panda-ready] .nav-number{opacity:.65;transform:translateY(0)}
html[data-theme=lab][data-nav=index] .site-header[data-panda-ready] nav a>span:last-child{transform:translateY(6px)}
html[data-theme=lab][data-nav] .site-header[data-panda-ready] nav a::before{content:"";position:absolute;left:0;top:5px;bottom:5px;width:1px;background:var(--line);opacity:0;transition:opacity .62s}
html[data-theme=lab][data-nav=index] .site-header[data-panda-ready] nav a:not(:first-child)::before{opacity:1}
html[data-theme=lab][data-nav] .site-header[data-panda-ready] nav a::after{display:block;position:absolute;content:"";bottom:2px;left:10px;right:10px;height:1px;background:var(--accent);opacity:0;transform:scaleX(.65);transition:opacity .5s,transform .62s cubic-bezier(.4,0,.2,1)}
html[data-theme=lab][data-nav] .site-header[data-panda-ready] nav a[aria-current=location]::after{opacity:1;transform:scaleX(1)}
html[data-theme=lab][data-nav=capsule] .site-header[data-panda-ready] nav a[aria-current=location]::after{opacity:0;transform:scaleX(.65)}
html[data-theme=lab][data-nav=capsule] .site-header[data-panda-ready] nav a[aria-current=location]{background:#294b3e;color:#f5f7f2}
html[data-theme=lab][data-nav] .site-header[data-panda-ready] nav a:hover{color:var(--accent)}
html[data-theme=lab][data-nav=capsule] .site-header[data-panda-ready] nav a:hover{background:#dce5d5;color:#223933}
html[data-theme=lab][data-nav=capsule] .site-header[data-panda-ready] nav a[aria-current=location]:hover{background:#294b3e;color:#f5f7f2}
@media(prefers-reduced-motion:reduce){
 .nav-panda-tail{animation:none}
 html[data-theme=lab][data-nav] .site-header[data-panda-ready],html[data-theme=lab][data-nav] .site-header[data-panda-ready] nav,html[data-theme=lab][data-nav] .site-header[data-panda-ready] nav a,html[data-theme=lab][data-nav] .site-header[data-panda-ready] nav a span,html[data-theme=lab][data-nav] .site-header[data-panda-ready] nav a::after,html[data-theme=lab][data-nav] .site-header[data-panda-ready] nav a::before,.nav-panda-toggle{transition:none}
}

/* Audit 01/06: full-size, independent panda target and readable equal columns. */
@media(max-width:760px){
 html[data-theme=lab][data-nav] .site-header[data-panda-ready]{height:140px;min-height:140px;grid-template-rows:36px 48px;align-content:start;row-gap:4px;padding-block:4px}
 .site-header[data-panda-ready] .wordmark .panda-mark{width:36px;height:36px}
 html[data-theme=lab][data-nav] .site-header[data-panda-ready] nav{height:48px;padding:1px}
 html[data-theme=lab][data-nav] .site-header[data-panda-ready] nav a.ui-nav{font-size:12px;letter-spacing:-.025em;line-height:1.15;white-space:normal}
 .site-header[data-panda-ready] .header-note{margin-top:8px}
}
@media(max-width:380px){html[data-theme=lab][data-nav] .site-header[data-panda-ready] nav a:first-child>span:last-child{max-width:9ch;overflow-wrap:anywhere}}


.site-header[data-panda-ready] nav a .nav-hit{position:absolute;inset:0;z-index:1;border-radius:0}

.site-header[data-panda-ready] nav a>span:last-child{text-align:center}

/* Each hiding place has its own lean. Decorative overflow never steals link clicks. */
.nav-panda-tail{pointer-events:none;translate:6px 4px;rotate:-34deg;transform-origin:50% 85%;animation-duration:6.3s}
html[data-nav=editorial] .nav-panda-tail{translate:0 -4px;rotate:18deg;scale:.92 1.05;animation-duration:7.1s;animation-delay:-1.8s}
html[data-nav=index] .nav-panda-tail{translate:-5px 3px;rotate:62deg;scale:1.05 .92;animation-duration:5.8s;animation-delay:-3.2s}
.nav-panda-sprite{transform-origin:50% 50%}
.nav-panda-sprite[data-facing=left]{transform:scaleX(-1)}
.nav-panda-sprite[data-facing=right]{transform:scaleX(1)}
