/* MOBILE LAYOUTS — the `layout` setting, interpreted for a phone (mobileLayout.js
   maps the 10 desktop layouts to 7 behaviours + sets body.mlayout-*). The default
   (top) is the base app.css behaviour; the rest re-place the feature nav or change
   how sections present. Only meaningful on the mobile home. */

/* ── The floating trigger (drawer / fab / pull-down). Hidden until a mode needs
      it, and hidden before a trip exists (nav still [hidden]). ── */
#mnavTrigger {
   display: none;
   position: fixed;
   z-index: 660;
   align-items: center;
   gap: 6px;
   padding: 10px 14px;
   border: 1px solid var(--hwy-line);
   border-radius: 12px;
   background: var(--hwy-card);
   color: var(--hwy-ink);
   font: 700 14px/1 system-ui, sans-serif;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}
body.mlayout-drawer #mnavTrigger,
body.mlayout-fab #mnavTrigger,
body.mlayout-pulldown #mnavTrigger { display: inline-flex; }
#featureNav[hidden] ~ #mnavTrigger { display: none !important; }

/* ── BOTTOM — nav pinned to the bottom as an app-style tab bar. ── */
body.mlayout-bottom .feature-nav {
   position: fixed; top: auto; bottom: 0; left: 0; right: 0;
   border-top: 1px solid var(--hwy-line); border-bottom: none;
   box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
   justify-content: center; z-index: 600;
}
body.mlayout-bottom { padding-bottom: 66px; }

/* ── AUTO-HIDE — top nav slides up out of the way as you scroll down. ── */
body.mlayout-autohide .feature-nav { transition: transform 0.22s ease; }
body.mlayout-autohide.mnav-hidden .feature-nav { transform: translateY(-115%); }

/* ── SINGLE — show only the active feature section (tabbed), nav stays on top. ── */
body.mlayout-single [class$="-section"] { display: none !important; }
body.mlayout-single [class$="-section"].msingle-active { display: block !important; }

/* ── DRAWER — hamburger opens a slide-in menu from the left. ── */
body.mlayout-drawer .feature-nav {
   position: fixed; top: 0; bottom: 0; left: 0; right: auto;
   width: 72vw; max-width: 290px;
   flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 4px;
   transform: translateX(-102%); transition: transform 0.25s ease;
   overflow: auto; z-index: 650; box-shadow: 2px 0 22px rgba(0, 0, 0, 0.32);
}
body.mlayout-drawer.mnav-open .feature-nav { transform: none; }
body.mlayout-drawer #mnavTrigger { top: 10px; left: 10px; }

/* ── FAB — a floating button opens the section list above it (bottom-right). ── */
body.mlayout-fab .feature-nav {
   position: fixed; bottom: 78px; right: 12px; top: auto; left: auto;
   flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 4px;
   width: 210px; max-height: 62vh; overflow: auto;
   transform: scale(0.92); transform-origin: bottom right; opacity: 0; pointer-events: none;
   transition: transform 0.18s ease, opacity 0.18s ease; z-index: 650;
}
body.mlayout-fab.mnav-open .feature-nav { transform: none; opacity: 1; pointer-events: auto; }
body.mlayout-fab #mnavTrigger { bottom: 16px; right: 16px; width: 54px; height: 54px; border-radius: 50%; justify-content: center; padding: 0; font-size: 20px; }

/* ── PULL-DOWN — a menu button drops the section list as a dropdown (top-right). ── */
body.mlayout-pulldown .feature-nav {
   position: fixed; top: 52px; right: 8px; left: auto; bottom: auto;
   flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 3px;
   width: 220px; max-height: 0; overflow: hidden; opacity: 0;
   transition: max-height 0.2s ease, opacity 0.2s ease; z-index: 650;
   border: 1px solid var(--hwy-line); border-radius: 0 0 14px 14px;
}
body.mlayout-pulldown.mnav-open .feature-nav { max-height: 70vh; overflow: auto; opacity: 1; padding: 6px; }
body.mlayout-pulldown #mnavTrigger { top: 8px; right: 8px; }

/* Give drawer/fab/pull-down chips full-width tap targets. */
body.mlayout-drawer .nav-chip, body.mlayout-fab .nav-chip, body.mlayout-pulldown .nav-chip { justify-content: flex-start; width: 100%; }

@media (prefers-reduced-motion: reduce) {
   body.mlayout-autohide .feature-nav, body.mlayout-drawer .feature-nav, body.mlayout-fab .feature-nav { transition: none; }
}