/* ============================================================
   Manzar — global mobile bottom nav (templates/_bottom_nav.html).
   Mobile only (≤600px); hidden on desktop. Generalized from the
   original /me-only .hubnav. Frosted + safe-area padded (the
   .recite-bar precedent). Loaded on every main page (see the
   page-coverage list in the redesign plan).

   z-index ladder: site-header (sticky) 60 < botnav 70 <
   account sheet 90 < toasts 100 < welcome modal 200.
   ============================================================ */
.botnav { display: none; }   /* desktop / tablet: no bottom bar */

@media (max-width: 600px) {
  .botnav {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    background: color-mix(in srgb, var(--surface-card) 88%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-top: var(--bw-hair) solid var(--border-default);
    padding-bottom: env(safe-area-inset-bottom);
  }
  @supports not (background: color-mix(in srgb, white, black)) {
    .botnav { background: rgba(239, 238, 233, 0.94); }
  }
  .botnav__btn {
    flex: 1 1 0; min-width: 0; position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 8px 4px 7px;
    background: transparent; border: none; cursor: pointer; text-decoration: none;
    font-family: var(--font-ui); font-size: 11px; font-weight: var(--fw-medium);
    color: var(--text-faint);
    transition: color var(--dur) var(--ease-calm);
  }
  .botnav__btn.is-active { color: var(--accent); font-weight: var(--fw-semibold); }
  .botnav__icn { width: 22px; height: 22px; }
  .botnav__lbl { line-height: 1; }
  .botnav__badge {
    position: absolute; top: 4px; left: calc(50% + 8px);
    min-width: 16px; height: 16px; padding: 0 4px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-pill);
    background: var(--marker); color: var(--text-on-accent);
    font-size: 10px; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums;
  }
  .botnav__badge[hidden] { display: none; }

  /* --- Account bottom sheet (logged-in) — reuses .acct__item / .acct__status --- */
  .botnav-sheet[hidden] { display: none; }
  .botnav-sheet { position: fixed; inset: 0; z-index: 90; }
  .botnav-sheet__backdrop { position: absolute; inset: 0; background: rgba(40, 42, 47, 0.45); }
  .botnav-sheet__panel {
    position: absolute; left: 0; right: 0; bottom: 0;
    display: flex; flex-direction: column; gap: 2px;
    background: var(--surface-card);
    border-top-left-radius: 16px; border-top-right-radius: 16px;
    padding: 12px 12px calc(16px + env(safe-area-inset-bottom));
    box-shadow: 0 -12px 28px rgba(0, 0, 0, 0.18);
  }
  .botnav-sheet .acct__status { padding: 6px 12px 4px; }
  .botnav-sheet .acct__item { padding: 12px; border-radius: 8px; font-size: var(--fs-body); }

  /* Reserve space so page content clears the fixed bar (any page that has it). */
  body:has(.botnav) main { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
}

/* ============================================================
   Slim mobile header (≤600px) — only where the bottom nav exists
   (scoped to body:has(.botnav), so the editor — which has no bottom
   nav — keeps its burger). Primary nav now lives in the bottom bar,
   so the header collapses to BRAND + SEARCH only. This lives here
   (not base.css) so base.css needs no cache-bust. Comes after the
   base.css 719px burger block in load order; the :has() scope also
   raises specificity so these win cleanly.
   ============================================================ */
@media (max-width: 600px) {
  body:has(.botnav) .site-header__toggle { display: none !important; }
  /* Un-collapse the nav region back into an inline row (no burger dropdown). */
  body:has(.botnav) .site-header__nav {
    display: flex !important; position: static; flex-direction: row; align-items: center;
    gap: var(--space-3); padding: 0; background: none; border: 0; box-shadow: none;
  }
  body:has(.botnav) .site-header__links { display: none; }   /* → bottom bar */
  body:has(.botnav) .site-header__cta { display: none; }     /* → in-page New recitation */
  body:has(.botnav) .site-header__actions .acct { display: none; } /* → Account tab */
  body:has(.botnav) .site-header__actions { margin-left: 0; }
  body:has(.botnav) .site-header__search {
    flex: 1 1 auto; width: auto; min-width: 0; margin-left: var(--space-3);
  }
}