/* =========================================================
   MOBILE BOTTOM NAV (app-style) — shared across all pages
   Only visible at the same breakpoint the sidebar/hamburger
   already use (max-width:860px). Desktop is untouched.
========================================================= */
.mbn{
  display:none;
}
@media(max-width:860px){
  body{ padding-bottom: calc(64px + env(safe-area-inset-bottom)); }

  .mbn{
    display:flex;
    position:fixed;
    left:0; right:0; bottom:0;
    z-index:150; /* below sidebar (199/200), above page content */
    background:color-mix(in srgb, var(--card) 96%, transparent);
    backdrop-filter:blur(10px);
    border-top:1px solid var(--card-border);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    box-shadow:0 -8px 24px rgba(22,36,59,0.10);
  }
  .mbn a, .mbn button{
    flex:1 1 0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    background:none;
    border:none;
    cursor:pointer;
    text-decoration:none;
    color:var(--ink-soft);
    font-family:var(--mono);
    font-size:10px;
    letter-spacing:.03em;
    padding:6px 2px;
    border-radius:8px;
    transition:color .2s ease, background .2s ease;
  }
  .mbn a svg, .mbn button svg{
    width:20px; height:20px;
    stroke:currentColor;
    fill:none;
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  .mbn a.active, .mbn button.active{
    color:var(--orange);
  }
  .mbn a:active, .mbn button:active{
    background:var(--grid-line-strong);
  }
}