/* assets/bd-mobile-nav.css — fix pack Session 8 (2026-09-28)
 *
 * One bottom bar on every tool page, so a contractor on a phone can reach every tool
 * in one tap.
 *
 * The problem this fixes: the tool pages' only navigation was the .nav-right strip in
 * the header. At 375px that strip is ~531px wide inside a 343px viewport, so Office,
 * Crew and Money sat off the right edge with nothing to suggest they were there. The
 * only other way out of a tool was a 0.72rem "Back to Dashboard" link in the footer.
 *
 * Everything here is scoped to <=720px. Desktop is untouched.
 */

/* Room for the fixed bar so it never sits on top of the last row of content. */
@media (max-width:720px){
  body.bd-mnav-on{ padding-bottom:calc(58px + env(safe-area-inset-bottom)) !important; }

  /* The header strip the bar replaces. Hidden, not deleted — the same links are the
     bar's tabs and the More sheet, and desktop still uses this strip. */
  body.bd-mnav-on .nav-right{ display:none !important; }

  /* The footer quick-links are now two of the tabs. */
  body.bd-mnav-on .bd-tool-foot a[href="/portal.html"],
  body.bd-mnav-on .bd-tool-foot a[href="/account.html"]{ display:none !important; }

  .bd-mnav{
    position:fixed; left:0; right:0; bottom:0; z-index:90;
    display:flex; background:#0D1B2E;
    border-top:1px solid rgba(201,146,42,0.25);
    padding:0 2px calc(env(safe-area-inset-bottom)); margin:0;
    box-shadow:0 -6px 18px rgba(0,0,0,.18);
  }
  .bd-mnav a, .bd-mnav button{
    flex:1 1 0; min-width:0; min-height:56px;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    border:none; background:transparent; cursor:pointer; text-decoration:none;
    font-family:'DM Sans',system-ui,sans-serif; font-size:11px; font-weight:700;
    letter-spacing:.02em; color:rgba(255,255,255,.62); padding:6px 2px;
    -webkit-tap-highlight-color:transparent;
  }
  .bd-mnav a.bd-mnav-active{ color:#C9922A; }
  .bd-mnav svg{ width:21px; height:21px; flex:none; }
  .bd-mnav a:focus-visible, .bd-mnav button:focus-visible{ outline:2px solid #7FA8DA; outline-offset:-3px; }
  .bd-mnav .bd-mnav-lbl{ line-height:1; white-space:nowrap; }

  /* ── "More" sheet ── */
  .bd-mnav-scrim{
    position:fixed; inset:0; background:rgba(13,27,46,.55); z-index:91;
    opacity:0; pointer-events:none; transition:opacity .16s;
  }
  .bd-mnav-scrim.on{ opacity:1; pointer-events:auto; }
  .bd-mnav-sheet{
    position:fixed; left:0; right:0; bottom:0; z-index:92;
    background:#fff; border-radius:16px 16px 0 0;
    padding:10px 0 calc(12px + env(safe-area-inset-bottom));
    transform:translateY(102%); transition:transform .2s ease;
    max-height:78vh; overflow-y:auto;
    box-shadow:0 -10px 30px rgba(13,27,46,.28);
  }
  .bd-mnav-sheet.on{ transform:translateY(0); }
  .bd-mnav-grip{ width:38px; height:4px; border-radius:99px; background:#D9DEE6; margin:2px auto 10px; }
  .bd-mnav-eye{
    font-family:'DM Sans',system-ui,sans-serif; font-size:11px; font-weight:700;
    letter-spacing:.09em; text-transform:uppercase; color:#8696aa; padding:6px 20px 4px;
  }
  .bd-mnav-row{
    display:flex; align-items:center; gap:13px; width:100%;
    min-height:52px; padding:0 20px; border:none; background:none; cursor:pointer;
    font-family:'DM Sans',system-ui,sans-serif; font-size:16px; font-weight:600;
    color:#1B3557; text-align:left; text-decoration:none;
  }
  .bd-mnav-row:active{ background:#F4F6F9; }
  .bd-mnav-row svg{ width:20px; height:20px; color:#5B6B80; flex:none; }
  .bd-mnav-row.bd-mnav-danger{ color:#8C2F2F; }
  .bd-mnav-row.bd-mnav-danger svg{ color:#8C2F2F; }
  .bd-mnav-sep{ height:1px; background:#E4E8EE; margin:8px 20px; }
}

/* Above the breakpoint the bar does not exist at all. */
@media (min-width:721px){
  .bd-mnav, .bd-mnav-scrim, .bd-mnav-sheet{ display:none !important; }
}

/* ── Preview-mode banner, phone form ───────────────────────────────────────
 * S8: on a phone the banner was two lines plus a full-width button — roughly
 * 160px of an 812px screen, above the fold, every visit. Same message, one line.
 * The desktop copy is untouched; these rules just swap which span is shown.
 */
.preview-short, .preview-cta-short{ display:none; }
@media (max-width:720px){
  .preview-long, .preview-cta-long{ display:none; }
  .preview-short{ display:inline; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .preview-cta-short{ display:inline; }
  .preview-banner{ flex-wrap:nowrap !important; gap:0.5rem !important; padding:0.45rem 0.75rem !important; }
  /* 44px minimum — it's a real tap target, and shrinking the banner shouldn't make
     the one thing people press harder to hit. */
  .preview-banner .preview-cta{ flex:none; min-height:44px; padding:0.3rem 0.95rem !important; }
}