/* ============================================================
   Mobile shell — bottom nav bar + the sidebar as a drawer
   ============================================================

   On a desktop the left sidebar is free: there's width to spare and none of
   it is height. On a phone it was the opposite deal — a 54px icon rail with
   no labels, taking a seventh of a 375px screen on every single page, to
   show eleven destinations as anonymous glyphs you had to guess at.

   So below 720px the rail goes away entirely and the same eleven entries
   arrive two ways instead:

     · the four you actually reach for mid-week live in a bar across the
       bottom, where a thumb already is;
     · everything else is behind "More", which slides the real sidebar in
       from the left — with its labels back, because a drawer has the room
       the rail never did.

   Nothing here duplicates the nav. js/mobile-nav.js builds the bar by
   reading #sbNav, so a new sidebar entry needs no change on this side.

   `body`-prefixed selectors below are deliberate: css/app-shell.css hides
   the labels at ≤1020px, and this file has to out-specify that rather than
   just out-order it. Load this after app-shell.css. */

@media (max-width: 720px) {

  :root {
    --sbw: 0px;                   /* no rail — pages get the full width */
    --mnav-h: 56px;
    --mnav-safe: var(--safe-b);   /* the home indicator, from css/tokens.css */
    --mnav-total: calc(var(--mnav-h) + var(--mnav-safe));

    /* …and the bit the safe-area insets don't cover. iOS reports no left or
       right inset in portrait, but the screen's bottom corners still curve
       away, and the two outer tabs are the only UI in the app that sits in
       one. The curve eats roughly 20px of width at the height a tab label
       sits at, so the bar's contents come in 10px from each end — enough
       that "Recipes" and "More" clear it, small enough that five 60px tabs
       still fit across a 320px phone. */
    --mnav-corner: 10px;
  }

  /* the shelf scrolls the document rather than a .page, so its own bottom
     padding is what keeps the last recipe card out from under the bar */
  main { padding-bottom: calc(24px + var(--mnav-total)); }

  /* ---------- the sidebar, off-canvas ---------- */

  body .sidebar {
    width: min(278px, 82vw);
    transform: translateX(-100%);
    transition: transform var(--dur-3) var(--ease-out);
    box-shadow: none;
    padding: calc(14px + var(--safe-t)) 12px calc(14px + var(--mnav-safe)) calc(12px + var(--safe-l));
    overscroll-behavior: contain;
  }
  body.mnav-open .sidebar {
    transform: none;
    box-shadow: var(--shadow-pop);
  }

  /* the labels the rail had to drop come back — there's room in a drawer */
  body .sb-brand { justify-content: flex-start; padding: 6px 8px 16px; }
  body .sb-brand-text { display: flex; }
  body .sb-tab span:not(.nav-ic),
  body .sb-foot-btn span:not(.nav-ic) { display: inline; }
  body .sb-label { display: block; }
  body .sb-tab .sb-count { display: inline; }
  body .sb-sync-status { display: block; }
  body .sb-tab, body .sb-foot-btn { justify-content: flex-start; padding: 11px 12px; }

  /* what you tap to get out of it again */
  .mnav-scrim {
    position: fixed;
    inset: 0;
    z-index: 69;
    background: rgba(13, 16, 28, .5);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-2) ease;
  }
  body.mnav-open .mnav-scrim { opacity: 1; pointer-events: auto; }
  /* both, not one: the shelf scrolls the document and every routed page
     scrolls itself, so locking body alone still let the pantry slide about
     underneath the open drawer */
  body.mnav-open { overflow: hidden; }
  body.mnav-open .page { overflow: hidden; }

  /* ---------- the bar itself ----------
     z-index 59 is chosen like the scan button's 58 was: above the routed
     pages (55) and above that button, below the modal overlays (60) that
     are meant to cover the lot. */
  .mnav {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 59;
    display: flex;
    align-items: stretch;
    height: var(--mnav-total);
    /* padding, not margin: the bar's surface still runs the full width and
       right down to the physical bottom edge, so the curve clips background
       rather than a label */
    padding-left: calc(var(--safe-l) + var(--mnav-corner));
    padding-right: calc(var(--safe-r) + var(--mnav-corner));
    padding-bottom: var(--mnav-safe);
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
    border-top: 1px solid var(--border);
  }

  .mnav-btn {
    flex: 1;
    min-width: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 2px;
    background: none;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 650;
    letter-spacing: -0.01em;
    line-height: 1.1;
    -webkit-tap-highlight-color: transparent;
    transition: color .15s ease;
  }
  .mnav-btn .ic { width: 21px; height: 21px; flex: none; }
  .mnav-btn b {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: inherit;
  }
  .mnav-btn.active { color: var(--accent); }
  .mnav-btn.active .ic { stroke-width: 2.1; }
  .mnav-btn:active { color: var(--text); }

  /* the little lit bar over the page you're on */
  .mnav-btn.active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 26px;
    height: 2.5px;
    border-radius: 0 0 3px 3px;
    background: var(--accent);
  }

  /* a count on a bottom tab is a dot, not a pill — there's no width for
     "12" under a 10px label without pushing the label off */
  .mnav-dot {
    position: absolute;
    top: 6px;
    left: calc(50% + 8px);
    min-width: 15px;
    height: 15px;
    padding: 0 4px;
    border-radius: 99px;
    background: var(--accent);
    color: var(--accent-contrast);
    font-size: 9.5px;
    font-weight: 800;
    line-height: 15px;
    text-align: center;
  }

  /* ---------- everything that was anchored to the bottom moves up ---------- */

  .page-inner { padding-bottom: calc(var(--mnav-total) + 40px); }

  /* The scan button lands bottom-right, which on a phone is also where the
     cook's "Start cooking", the shop's "Receive" and the selection tray's
     "Clear" end up once they're all lifted clear of the bar. Rather than
     three overlapping things in one corner, the button steps up over
     whichever of them is showing. */
  body:has(#cookPage.open .ckfoot),
  body:has(#shopPage.open .rcp-foot) { --qs-lift: 100px; }
  body:has(#tray.show) { --qs-lift: 74px; }
  body #quickScan { bottom: calc(var(--mnav-total) + 14px + var(--qs-lift, 0px)); }
  body #tray { bottom: calc(var(--mnav-total) + 12px); }
  body #toast { bottom: calc(var(--mnav-total) + 12px); left: 12px; right: 12px; }

  /* the two footers that stick to the bottom of their own page — the cook's
     "next step" and the shop's "receive this lot". Both were landing behind
     the bar, which put the one button each page is for out of reach. */
  .ckfoot, .rcp-foot {
    bottom: var(--mnav-total);
    margin-inline: -14px;              /* meet the page-inner padding above */
    padding-inline: 14px;
  }

  /* a modal covers the bar, so its own scroll shouldn't stop short of it */
  .overlay { padding-bottom: 28px; }

  /* Boxes that size themselves off the viewport were doing their sums
     against a screen that no longer ends where they think it does: the Add
     item form ran 73px under the bar, which is where its Save button was.
     dvh rather than vh while we're here — vh on a phone means the height
     with the browser's address bar hidden, which it usually isn't. */
  .psidebar { max-height: calc(100dvh - 90px - var(--mnav-total)); }
  #scanSheet { max-height: calc(100dvh - 56px); }
}

/* A phone on its side has 375px of height to spend and the bar was taking
   56 of them. Drop the labels and most of the padding — landscape is a
   glance at a recipe while something's on the heat, not a browse. */
@media (max-width: 720px) and (max-height: 480px) {
  :root { --mnav-h: 44px; }
  .mnav-btn b { display: none; }
  .mnav-btn .ic { width: 20px; height: 20px; }
  .mnav-dot { top: 2px; }
}

/* The bar is a phone thing. Above 720px the sidebar is back and this is
   just markup sitting in the document doing nothing. */
@media (min-width: 721px) {
  .mnav, .mnav-scrim { display: none; }
}

@media print {
  .mnav, .mnav-scrim { display: none !important; }
}