/* Same reasoning as /assets/nav.css: the bar reaches the top of the screen and
 * pads its contents clear of the status bar, so the page scrolls behind it. */
:root{ --safe-top: env(safe-area-inset-top, 0px);
       --safe-bottom: env(safe-area-inset-bottom, 0px);
       --m-nav-h: calc(64px + var(--safe-top)); }

/* The mobile top bar, shared by every -mobile page.
 *
 * Same idea as /assets/nav.css: one definition instead of a copy per page.
 * Pages had drifted into using either .m-nav-right or .m-nav-actions, and
 * either .m-nav-search or .m-icon-btn, for the same two controls.
 */
.m-nav{position:fixed;top:0;left:0;right:0;z-index:10000;display:flex;align-items:center;justify-content:space-between;padding:var(--safe-top) 20px 0;height:var(--m-nav-h);background:#F2EDE3;border-bottom:1px solid var(--border, rgba(26,21,16,.1))}
.m-nav-logo{display:flex;align-items:center}
.m-nav-logo img{height:52px;width:auto;display:block}
.m-nav-right{display:flex;align-items:center;gap:20px}
.m-nav-search{color:var(--text-muted, #8A7E6E);display:flex;align-items:center;cursor:pointer;background:none;border:none;padding:0}
.m-hamburger{display:flex;flex-direction:column;gap:5px;cursor:pointer;padding:4px}
.m-hamburger span{display:block;width:22px;height:1.5px;background:var(--text, #1A1510);border-radius:1px;transition:transform .25s,opacity .2s}
.m-hamburger.active span:nth-child(1),.m-hamburger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.m-hamburger.active span:nth-child(2),.m-hamburger.open span:nth-child(2){opacity:0}
.m-hamburger.active span:nth-child(3),.m-hamburger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* every mobile page offsets its content by the old flat 64px; this keeps that
 * clear of the taller bar without editing 66 files */
body{ padding-top: var(--m-nav-h); }

/* viewport-fit=cover means the page now owns the strips behind the status bar
 * and the home indicator, so anything spanning the full height has to keep
 * its own contents out of them. */
.m-drawer{ padding-top: var(--safe-top); padding-bottom: var(--safe-bottom); }
body{ padding-bottom: var(--safe-bottom); }

/* Belt and braces for the top strip.
 *
 * The bar already grows by env(safe-area-inset-top), but that only works if the
 * browser reports an inset and honours viewport-fit=cover. When it does not,
 * the bar starts below the status bar and page content is visible in the gap.
 * This paints an opaque block upward from the bar, pinned to it, so whatever
 * that gap turns out to be is filled. If the bar already reaches the top, the
 * block is simply off-screen and costs nothing.
 */
.m-nav::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: 100%;
  height: 300px;
  background: #F2EDE3;
  pointer-events: none;
}