/* Theme-aware navigation; shares the six medal skins and their readable surfaces. */
#app .bottom-nav{
 --dock-accent:var(--skin-accent,#d7b1ff);--dock-soft:var(--skin-muted,#ac98c0);
 --dock-pair:var(--w-companion,#aaa4ef);--dock-surface:var(--skin-glass,#1d1429ee);
 --dock-deep:var(--skin-deep,#24172f);--dock-line:var(--skin-line,#b28bd450);
 isolation:isolate;overflow:visible;border:1px solid var(--dock-line);border-radius:24px;
 background:var(--dock-surface);box-shadow:inset 0 1px #fff2,inset 0 -1px #ffffff08,0 12px 38px #06020b55,0 0 24px color-mix(in srgb,var(--dock-accent) 7%,transparent);
 backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
}
#app .bottom-nav:before{content:'';position:absolute;inset:3px;z-index:-1;pointer-events:none;border:1px solid color-mix(in srgb,var(--dock-accent) 15%,transparent);border-radius:21px;background:linear-gradient(135deg,color-mix(in srgb,var(--dock-pair) 9%,transparent),transparent 40%,color-mix(in srgb,var(--dock-accent) 5%,transparent))}
#app .bottom-nav:after{content:'';position:absolute;pointer-events:none;left:20%;right:20%;top:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--dock-accent),var(--dock-pair),transparent);opacity:.65}
#app .bottom-nav button{position:relative;isolation:isolate;border:0;background:transparent;min-width:0;min-height:61px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:3px 1px 5px;border-radius:17px;color:var(--dock-soft);font-size:9px;line-height:1.4;cursor:pointer;transition:color .2s,background .2s}
#app .bottom-nav .nav-icon-shell{width:35px;height:33px;display:grid;place-items:center;position:relative;border-radius:12px;border:1px solid transparent;background:transparent;box-shadow:inset 0 1px #ffffff07;transition:transform .25s,background .25s,border-color .25s,box-shadow .25s}
#app .bottom-nav .nav-icon-shell .icon{width:22px;height:22px;stroke-width:1.65;fill:color-mix(in srgb,currentColor 5%,transparent);transition:filter .25s}
#app .bottom-nav .nav-label{font-size:inherit;letter-spacing:.1px;white-space:nowrap;font-weight:500;line-height:1.4}
#app .bottom-nav button:after{content:none}
#app .bottom-nav button.active{color:var(--dock-accent);background:radial-gradient(ellipse at 50% 24%,color-mix(in srgb,var(--dock-accent) 13%,transparent),transparent 75%)}
#app .bottom-nav button.active .nav-icon-shell{transform:translateY(-2px);border-color:color-mix(in srgb,var(--dock-accent) 42%,transparent);background:linear-gradient(140deg,color-mix(in srgb,var(--dock-accent) 25%,var(--dock-surface)),color-mix(in srgb,var(--dock-pair) 12%,var(--dock-surface)));box-shadow:inset 0 1px color-mix(in srgb,var(--dock-accent) 50%,transparent),0 3px 0 var(--dock-deep),0 5px 13px color-mix(in srgb,var(--dock-accent) 13%,transparent)}
#app .bottom-nav button.active .nav-icon-shell:before{content:'';position:absolute;pointer-events:none;inset:-1px;border-radius:inherit;background:linear-gradient(110deg,transparent 15%,color-mix(in srgb,var(--dock-accent) 20%,transparent) 40%,transparent 65%);background-size:250% 100%;animation:dock-light 7s ease-in-out infinite}
#app .bottom-nav button.active .icon{filter:drop-shadow(0 0 5px color-mix(in srgb,var(--dock-accent) 35%,transparent))}
#app .bottom-nav .nav-active-dot{position:absolute;bottom:0;left:50%;width:13px;height:2px;border-radius:2px;transform:translateX(-50%) scaleX(0);background:linear-gradient(90deg,var(--dock-pair),var(--dock-accent));box-shadow:0 0 7px color-mix(in srgb,var(--dock-accent) 50%,transparent);transition:transform .25s}
#app .bottom-nav button.active .nav-active-dot{transform:translateX(-50%) scaleX(1)}
#app .bottom-nav button:active .nav-icon-shell{transform:translateY(1px) scale(.93)}
#app .bottom-nav button:focus-visible{outline:2px solid var(--dock-accent);outline-offset:1px}
html[data-theme='day'] body:not([data-worn-medal]) #app .bottom-nav{--dock-accent:#884ab3;--dock-soft:#8b719c;--dock-surface:#fff7ffef;--dock-deep:#dcc2e5;--dock-pair:#b08acb;--dock-line:#ad80c34a}
body[data-worn-medal='first'] #app .bottom-nav{--dock-deep:#dfb4c8;--dock-pair:#c389bb}
@keyframes dock-light{0%,20%{background-position:100% 0}65%,100%{background-position:0 0}}
@media(max-width:680px){#app .bottom-nav{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:2px;padding:7px 5px calc(7px + env(safe-area-inset-bottom));bottom:10px;left:10px;right:10px}.content{padding-bottom:115px}}
html[data-display-layout=mobile] #app .bottom-nav{left:50%;right:auto;transform:translateX(-50%);width:calc(100% - 20px);max-width:460px}
@media(max-width:680px){body[data-mode='admin'] #app .bottom-nav{display:flex;overflow-x:auto}body[data-mode='admin'] #app .bottom-nav button{min-width:52px;flex:1}}
@media(prefers-reduced-motion:reduce){#app .bottom-nav *{animation:none!important;transition:none!important}}
html[data-motion='reduced'] #app .bottom-nav *{animation:none!important;transition:none!important}