.mobile-nav{border-top:0;box-shadow:none}
.mobile-nav :is(button,a).on::before{display:none}
.native-nav-contour{position:absolute;left:0;right:0;top:-16px;height:18px;overflow:hidden;pointer-events:none}
.native-nav-contour svg{position:absolute;left:0;top:0;width:72px;height:18px;overflow:visible;transition:transform .36s cubic-bezier(.22,.75,.25,1);fill:var(--card);stroke:var(--accent-pop);stroke-width:2.5;stroke-linejoin:round}
.mobile-nav :is(button,a) .navicon{transition:background .3s ease,color .3s ease,transform .36s cubic-bezier(.22,.75,.25,1)}
@media(prefers-reduced-motion:reduce){.native-nav-contour svg,.mobile-nav :is(button,a) .navicon{transition:none}}

@media(max-width:860px){
 /* Private screens sit above the base navigation; keep its raised edge visible. */
 body:has(#modal.show:is([data-view="plan"],[data-view="log"])) .mobile-nav{z-index:2001}
 .mobile-nav{height:calc(51px + var(--safe-b));min-height:calc(51px + var(--safe-b));grid-template-rows:minmax(0,1fr);background:var(--card)}
 .mobile-nav :is(button,a){position:relative;min-width:0;min-height:0;padding:7px 4px 5px;gap:1px;line-height:1.1}
 .mobile-nav :is(button,a).on{box-shadow:none;background:transparent}
 .mobile-nav :is(button,a).on .navicon{background:var(--accent-pop);color:var(--accent-contrast);transform:translateY(-1px)}
 .mobile-nav .navicon{border-radius:9px}
 .mobile-nav :is(button,a):focus-visible{outline:2px solid var(--accent-pop);outline-offset:-3px;border-radius:9px}
}
html[data-night="true"] .mobile-nav{background:var(--card)}
html[data-night="true"] .mobile-nav :is(button,a){color:var(--ink2)}
html[data-night="true"] .mobile-nav .navicon{color:var(--ink)}
html[data-night="true"] .mobile-nav :is(button,a).on .navicon{color:var(--accent-contrast)}