/* ===================================================================
   me-mobile.css — mobile-native treatment for the employee "Me" app.
   Loaded only on Me screens. All rules gated to phone widths so the
   desktop layout is untouched. Pairs with me-mobile.js (bottom tabs).
=================================================================== */

/* Bottom tab bar — hidden on desktop, primary nav on phones */
.me-tabbar { display: none; }

@media (max-width: 768px) {
  .me-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: grid; grid-template-columns: repeat(5, 1fr);
    background: oklch(0.99 0.003 90 / 0.92);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  :root[data-theme="dark"] .me-tabbar { background: oklch(0.2 0.01 260 / 0.92); }
  .me-tabbar__item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; min-height: 56px; text-decoration: none;
    color: var(--ink-3); font-size: 10px; font-weight: 500; letter-spacing: 0.01em;
    -webkit-tap-highlight-color: transparent; transition: color .12s;
  }
  .me-tabbar__item:active { background: var(--paper-2); }
  .me-tabbar__item[aria-current="page"] { color: var(--accent-ink); }
  .me-tabbar__item svg { width: 23px; height: 23px; }
  .me-tabbar__dot {
    position: absolute; top: 9px; margin-left: 16px;
    width: 7px; height: 7px; border-radius: 99px; background: var(--bad);
  }

  /* ---- Native-feeling spacing & touch targets ---------------------- */
  .page { padding-left: 16px; padding-right: 16px; padding-bottom: 84px; }
  .page__head { padding-top: 4px; }
  .page__title { font-size: 26px; letter-spacing: -0.02em; }

  /* 44px minimum hit targets */
  .btn { min-height: 44px; }
  .btn--sm { min-height: 38px; padding-top: 0; padding-bottom: 0; }
  .btn--lg { min-height: 50px; }
  .seg { padding: 3px; }
  .seg__item { min-height: 38px; }
  .select, .input, .textarea { min-height: 46px; font-size: 16px; } /* 16px stops iOS zoom-on-focus */
  .textarea { min-height: 92px; }

  /* Cards breathe a little more and feel tappable */
  .card__body { padding: 18px; }
  .balance-card { padding: 18px 16px; }

  /* Full-width primary actions read as native buttons */
  .me-cta-fill { display: flex; }
  .me-cta-fill .btn { flex: 1; justify-content: center; }
}

/* very small phones — let the 4-up balance grid wrap to 2-up */
@media (max-width: 430px) {
  .balance-card { min-height: 84px; }
}