/* ============================================================
   Meridian v2 · layout corrections
   ------------------------------------------------------------
   HAND-WRITTEN. Loaded after the generated v2.css so it can
   adjust the design's inline styles without editing the
   generated files (which get overwritten on re-export).
   ============================================================ */

/* --- 1. Pin the app to the viewport ------------------------
   The design sizes itself with 100dvh. On iOS Safari dvh
   changes as the toolbars collapse, and the frame is left
   shorter than the window — the page's dark background shows
   through underneath. Fixing the wrapper to the viewport
   removes the drift, and the page itself never scrolls. */
/* The design sets min-height/height/overflow inline, so these have to be
   forced to win. */
.mr2-outer {
  position: fixed;
  inset: 0;
  min-height: 0 !important;
}
.mr2-frame {
  height: 100% !important;
}
html, body {
  overflow: hidden;
  overscroll-behavior: none;
}

/* --- 2. Let the header scroll away -------------------------
   The dark header is 197px — with the 69px tab bar that is
   over a third of a phone screen spent before any content,
   on every screen. Moving the scroll from <main> up to the
   frame means the header scrolls off as you read and the
   content gets the full height. Nothing moves at rest, so
   the design is unchanged on arrival at each screen. */
.mr2-frame {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}
.mr2-frame > main {
  flex: none !important;
  overflow: visible !important;
}
/* Auto margin holds the bar at the bottom when a screen is
   short; sticky holds it there once the screen scrolls. */
.mr2-frame > nav {
  position: sticky !important;   /* the design sets position:relative inline */
  bottom: 0;
  margin-top: auto;
  z-index: 20;
}