/* ============================================================================
 * fretly-mobile nav layer (M1) — bottom tab bar + slim top bar.
 *
 * EVERY rule is scoped under `html.chrome-mobile-on` (set by
 * shared/mobile-nav.js at <=768px or the `m` flag). With the class absent —
 * the desktop default — none of these selectors match, so the desktop launch
 * renders pixel-identically with this file present.
 *
 * Uses design tokens (fretly-tokens.css) for type/spacing/radii/colour; raw px
 * only for 1px borders, SVG strokes, and env() safe-area insets.
 * ========================================================================= */

.chrome-mobile-on {
  /* Bottom tab-bar height (excludes the safe-area inset added below).
     3.7143rem = 52px at scale 1, matching the navbar slab. */
  --fly-tabbar-h: 3.7143rem;
}

/* ── Content clearance: keep page content above the fixed bar ─────────────── */
.chrome-mobile-on body {
  padding-bottom: calc(var(--fly-tabbar-h) + env(safe-area-inset-bottom, 0px));
}

/* ── Slim top bar: compact the navbar under the phone shell ───────────────── */
.chrome-mobile-on .navbar {
  min-height: 3.4286rem;               /* 48px — a touch shorter than desktop */
  padding: 0 var(--space-md);
  gap: var(--space-xs);
  /* Keep the brand + utility icons on ONE row. The utility controls
     (notifications, metronome, export, tier-sim, theme) are relocated into the
     More drawer's "Quick actions" group by shared/mobile-nav.js, leaving only
     the two most-used — account + help — inline beside the brand. That set fits
     comfortably without wrapping to a second full-width strip (MOB-C6). */
  flex-wrap: nowrap;
}
.chrome-mobile-on .navbar-brand {
  font-size: var(--font-lg);
  margin-right: var(--space-xs);
  flex: 0 0 auto;
}
.chrome-mobile-on .navbar-end {
  gap: var(--space-xs);
  flex-wrap: nowrap;
  margin-left: auto;                   /* right-align the compact icon cluster */
}
/* Trim the icon buttons a touch so the row never overflows a narrow phone. */
.chrome-mobile-on .navbar-end .btn-icon {
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
}

/* ── Bottom tab bar ───────────────────────────────────────────────────────
 * z-index 1180 sits just below the mobile scrim (1190) + drawers (1200) so an
 * open "More" drawer / bottom sheet covers the bar cleanly. */
.chrome-mobile-on .fly-tabbar {
  position: fixed;
  /* Pinned to the VISUAL viewport rect. nav.js publishes the offsets; the
     layout viewport can be larger than the visual one (zoom / keyboard /
     horizontal-overflow content), so left/width/bottom keep the bar framing
     the visible screen. All three collapse to the plain full-width bottom bar
     (left 0, width 100%, bottom 0) in the normal case — a pure no-op. */
  left: var(--fly-vv-left, 0px);
  width: var(--fly-vv-width, 100%);
  bottom: var(--fly-vv-bottom, 0px);
  z-index: 1180;
  display: flex;
  align-items: stretch;
  height: calc(var(--fly-tabbar-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--surface, #fff);
  border-top: 1px solid var(--border, #e6e1d8);
  box-shadow: 0 -0.1429rem 0.8571rem rgba(0, 0, 0, 0.06);
  transition: transform var(--t-normal, 200ms) ease;
}

.chrome-mobile-on .fly-tab {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1429rem;                      /* 2px */
  min-width: 44px;                     /* 44px min touch target */
  min-height: 44px;
  padding: var(--space-2xs) 0;
  text-decoration: none;
  color: var(--text-3, #8a8a84);
  font-weight: var(--weight-semibold);
  -webkit-tap-highlight-color: transparent;
}
.chrome-mobile-on .fly-tab-ico {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
}
.chrome-mobile-on .fly-tab-label {
  font-size: var(--font-xs);           /* ~10px micro label */
  line-height: 1;
  letter-spacing: 0.01em;
}
.chrome-mobile-on .fly-tab.is-active {
  color: var(--accent, #e8874a);
}

/* ── Zoom policy (§5c): hide the bar while pinch-zoomed (scale > 1) ────────── */
.chrome-mobile-on.fly-zoomed .fly-tabbar {
  transform: translateY(120%);
  pointer-events: none;
}