/* V32 approved compact navigation. Visuals match the user-approved V31 design. */
@property --nav-rim-angle{syntax:'<angle>';inherits:false;initial-value:0deg}

body[data-mode='member'] #app .bottom-nav{
 --nav-face:var(--skin-surface,#30223f);
 --nav-base:var(--skin-deep,#160f22);
 --nav-text:var(--skin-ink,#f1e6ff);
 --nav-highlight:var(--skin-highlight,#f2dcff);
 --nav-shadow:#06020d32;
 gap:2px;padding:6px 5px calc(7px + env(safe-area-inset-bottom));
 border-radius:20px;border-color:color-mix(in srgb,var(--dock-accent) 19%,transparent);
 box-shadow:inset 0 1px 0 #ffffff1c,inset 0 -1px 0 #00000020,0 2px 0 color-mix(in srgb,var(--nav-base) 65%,transparent),0 9px 22px var(--nav-shadow);
}
body[data-mode='member'] #app .bottom-nav:before{inset:2px;border-radius:17px;border-color:color-mix(in srgb,var(--dock-accent) 6%,transparent);background:none}
body[data-mode='member'] #app .bottom-nav:after{left:25%;right:25%;opacity:.4}
/* The compact jewel is visual; the full 51px-high cell remains tappable. */
body[data-mode='member'] #app .bottom-nav button{
 --nav-rim-delay:0s;
 min-width:0;min-height:51px;padding:2px 0 3px;gap:5px;
 border:0;border-radius:11px;background:transparent;box-shadow:none;
 color:color-mix(in srgb,var(--dock-soft) 85%,var(--nav-text));overflow:visible;isolation:isolate;
 transform:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
 transition:color .2s ease;
}
body[data-mode='member'] #app .bottom-nav button:nth-child(2){--nav-rim-delay:-1.7s}
body[data-mode='member'] #app .bottom-nav button:nth-child(3){--nav-rim-delay:-3.4s}
body[data-mode='member'] #app .bottom-nav button:nth-child(4){--nav-rim-delay:-5.1s}
body[data-mode='member'] #app .bottom-nav button:nth-child(5){--nav-rim-delay:-6.8s}
body[data-mode='member'] #app .bottom-nav button:nth-child(6){--nav-rim-delay:-8.5s}
body[data-mode='member'] #app .bottom-nav button:before,
body[data-mode='member'] #app .bottom-nav button:after{content:none}

body[data-mode='member'] #app .bottom-nav .nav-icon-shell{
 position:relative;isolation:isolate;z-index:1;width:31px;height:29px;flex-shrink:0;
 border:1px solid color-mix(in srgb,var(--dock-accent) 23%,transparent);border-radius:10px;
 background:linear-gradient(150deg,color-mix(in srgb,var(--dock-pair) 14%,var(--nav-face)),var(--nav-face) 50%,color-mix(in srgb,var(--nav-base) 32%,var(--nav-face)));
 box-shadow:inset 0 1px 0 color-mix(in srgb,var(--nav-highlight) 29%,transparent),inset 0 -1px 0 #00000017,0 1.8px 0 var(--nav-base),0 3px 4px #00000024;
 transform:none;overflow:hidden;
 transition:transform .17s ease,box-shadow .17s ease,border-color .2s ease,background .2s ease;
}
/* One fine traveling highlight follows the little icon bezel, away from the label. */
body[data-mode='member'] #app .bottom-nav .nav-icon-shell:before{
 content:'';position:absolute;inset:-1px;z-index:0;padding:1px;border-radius:inherit;pointer-events:none;
 background:conic-gradient(from var(--nav-rim-angle),transparent 0deg 260deg,color-mix(in srgb,var(--dock-pair) 20%,transparent) 278deg,var(--dock-accent) 304deg,var(--nav-highlight) 316deg,transparent 330deg 360deg);
 -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;
 mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;
 opacity:.45;animation:nav-rim-orbit 10.2s var(--nav-rim-delay) linear infinite;
}
body[data-mode='member'] #app .bottom-nav .nav-icon-shell:after{
 content:'';position:absolute;inset:2px 3px auto;height:8px;border-radius:6px 6px 3px 3px;
 background:linear-gradient(160deg,color-mix(in srgb,var(--nav-highlight) 13%,transparent),transparent 85%);
 pointer-events:none;z-index:0;
}
body[data-mode='member'] #app .bottom-nav .nav-icon-shell .icon{
 position:relative;z-index:1;width:18px;height:18px;stroke-width:1.65;fill:color-mix(in srgb,currentColor 4%,transparent);
 filter:drop-shadow(0 1px .5px #00000035);
}
body[data-mode='member'] #app .bottom-nav .nav-label{
 position:relative;z-index:1;font-size:9px;line-height:1.35;font-weight:500;letter-spacing:0;
 text-shadow:none;
}
body[data-mode='member'] #app .bottom-nav button.active{color:var(--nav-text);background:none;box-shadow:none}
body[data-mode='member'] #app .bottom-nav button.active .nav-icon-shell{
 transform:translateY(-.5px);border-color:color-mix(in srgb,var(--dock-accent) 54%,transparent);
 background:linear-gradient(150deg,color-mix(in srgb,var(--dock-accent) 29%,var(--nav-face)),color-mix(in srgb,var(--dock-pair) 15%,var(--nav-face)) 55%,var(--nav-face));
 box-shadow:inset 0 1px 0 color-mix(in srgb,var(--nav-highlight) 58%,transparent),inset 0 -1px 0 #00000016,0 2px 0 var(--nav-base),0 4px 6px #00000028,0 0 7px color-mix(in srgb,var(--dock-accent) 13%,transparent);
}
body[data-mode='member'] #app .bottom-nav button.active .nav-icon-shell:before{opacity:.9}
body[data-mode='member'] #app .bottom-nav button.active .icon{color:var(--dock-accent);fill:color-mix(in srgb,var(--dock-accent) 8%,transparent);filter:drop-shadow(0 1px .5px #00000035)}
/* Selection is expressed by the jewel itself, without another underline. */
body[data-mode='member'] #app .bottom-nav .nav-active-dot{display:none}
body[data-mode='member'] #app .bottom-nav button:active .nav-icon-shell{
 transform:translateY(1.3px) scale(.97);
 box-shadow:inset 0 1px 3px #00000020,inset 0 1px 0 #ffffff15,0 .5px 0 var(--nav-base);
}
body[data-mode='member'] #app .bottom-nav button:focus-visible{outline:2px solid var(--dock-accent);outline-offset:1px}
@media(hover:hover) and (pointer:fine){
 body[data-mode='member'] #app .bottom-nav button:hover{color:var(--nav-text)}
 body[data-mode='member'] #app .bottom-nav button:hover .nav-icon-shell{border-color:color-mix(in srgb,var(--dock-accent) 52%,transparent)}
}
body[data-mode='member'][data-worn-medal='first'] #app .bottom-nav{--nav-face:#f9e6f0;--nav-base:#dcb2c6;--nav-text:#63324e;--nav-highlight:#fff9fc;--nav-shadow:#793c5d20}
body[data-mode='member'][data-worn-medal='first'] #app .bottom-nav .nav-label{color:#794660}
body[data-mode='member'][data-worn-medal='first'] #app .bottom-nav button.active .nav-label{color:#56213e}
html[data-theme='day'] body[data-mode='member']:not([data-worn-medal]) #app .bottom-nav{--nav-face:#f4e9fa;--nav-base:#d5bdde;--nav-text:#5c3475;--nav-highlight:#fffaff;--nav-shadow:#45255320}
@media(max-width:360px){body[data-mode='member'] #app .bottom-nav{gap:1px;padding-left:4px;padding-right:4px}body[data-mode='member'] #app .bottom-nav .nav-icon-shell{width:29px;height:28px;border-radius:9px}}
@keyframes nav-rim-orbit{to{--nav-rim-angle:360deg}}
body:has(dialog[open]) #app .bottom-nav .nav-icon-shell:before{animation-play-state:paused}
html[data-motion='reduced'] body[data-mode='member'] #app .bottom-nav .nav-icon-shell:before{animation:none;--nav-rim-angle:35deg}
@media(prefers-reduced-motion:reduce){body[data-mode='member'] #app .bottom-nav button,body[data-mode='member'] #app .bottom-nav button *{transition:none!important}body[data-mode='member'] #app .bottom-nav .nav-icon-shell:before{animation:none;--nav-rim-angle:35deg}}
@supports not ((mask-composite:exclude) or (-webkit-mask-composite:xor)){body[data-mode='member'] #app .bottom-nav .nav-icon-shell:before{background:none;border:1px solid var(--dock-accent);padding:0;animation:none;opacity:.35}}