/* mobile.css — the menu on phones and the narrow Chrome side panel (under 760px).
   Bottom tab bar (mobilenav.js) + the full sidebar as a slide-in drawer. */

.mnav, .mnav-scrim { display: none; }

@media (max-width: 759px) {
  /* ---------- bottom tab bar ---------- */
  .mnav {
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
    background: rgba(245, 241, 232, .97);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border-top: 1.5px solid #dad2c3;
  }
  .mnav__b {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 54px; padding: 4px 0; border: 0; background: none; border-radius: 10px;
    font-family: 'Kalam', cursive; font-size: 12px; line-height: 1.1; color: #5a554c;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .mnav__b svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; padding: 3px 12px; box-sizing: content-box; border-radius: 999px; transition: background .15s; }
  .mnav__b.is-on { color: #a85338; }
  .mnav__b.is-on svg { background: #f8e9e3; }
  .mnav__b:focus-visible { outline: 2px solid #c2634a; outline-offset: -2px; }
  .mnav__b:active svg { background: #ebe5da; }

  /* room for the tab bar under every page; the Zuly button sits above it */
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  .ai-fab { bottom: calc(76px + env(safe-area-inset-bottom)) !important; }

  /* ---------- the sidebar becomes a drawer ---------- */
  .rail {
    position: fixed !important; top: 0; left: 0; bottom: 0; z-index: 200;
    width: min(86vw, 330px); height: 100vh; height: 100dvh;
    display: flex; flex-direction: column; align-items: stretch; gap: 3px;
    padding: calc(18px + env(safe-area-inset-top)) 12px calc(84px + env(safe-area-inset-bottom));   /* the tab bar stays on top */
    overflow-y: auto; overscroll-behavior: contain;
    background-color: #f5f1e8 !important;
    background-image: radial-gradient(#ddd5c6 1px, transparent 1.2px) !important; background-size: 24px 24px;
    border: 0 !important;
    transform: translateX(-104%); visibility: hidden;
    transition: transform .24s ease, visibility 0s linear .24s;
    box-shadow: none;
  }
  body.menu-open .rail { transform: none; visibility: visible; transition: transform .24s ease; box-shadow: 8px 0 32px rgba(35, 32, 27, .18); }
  .rail:focus { outline: none; }
  .rail__brand { margin: 0 4px 14px; }
  .rail__name { display: inline !important; }
  .rail__nav { flex-direction: column; flex: 0 0 auto; overflow: visible; gap: 2px; }
  .rail .nav-item { padding: 10px 12px; gap: 12px; font-size: 16px; min-height: 44px; }
  .rail .nav-item__icon { font-size: 22px; width: 26px; text-align: center; }
  .rail .nav-sub { display: flex; }
  .rail .nav-subitem { padding: 9px 10px 9px 50px; font-size: 15px; min-height: 40px; }
  .rail .nav-item:has(+ .nav-sub) { border-top: 1px solid #e2dbcf; border-bottom: 1px solid #e2dbcf; border-radius: 0; margin: 4px 0; }
  .rail .nav-item.is-active:has(+ .nav-sub) { background: none; color: #a85338; }
  .rail__user { margin: auto 0 0; border-top: 1px solid #e2dbcf; padding-top: 10px; }
  .rail__account { width: 100%; }
  .rail__username { display: block; max-width: none; }
  .rail__popout { display: none; }

  .mnav-scrim {
    display: block; position: fixed; inset: 0; z-index: 199;
    background: rgba(35, 32, 27, .34); opacity: 0; pointer-events: none; transition: opacity .2s ease;
  }
  body.menu-open .mnav-scrim { opacity: 1; pointer-events: auto; }
  body.menu-open { overflow: hidden; }
  /* The tab bar stays usable while the menu is open (Menu toggles it closed, any tab jumps there). */
  body.menu-open .mnav { z-index: 205; }

  @media (prefers-reduced-motion: reduce) {
    .rail, body.menu-open .rail, .mnav-scrim { transition: none; }
  }
}