/* Hey, Jack! Mobile System v1.0 */
:root {
  --hj-mobile-gutter: 16px;
  --hj-mobile-header: 62px;
  --hj-mobile-tabbar: 68px;
  --hj-touch-target: 44px;
  --hj-safe-top: env(safe-area-inset-top, 0px);
  --hj-safe-bottom: env(safe-area-inset-bottom, 0px);
}

.hj-mobile-screen {
  min-height: 100dvh;
  padding:
    calc(var(--hj-mobile-header) + var(--hj-safe-top))
    var(--hj-mobile-gutter)
    calc(var(--hj-mobile-tabbar) + var(--hj-safe-bottom));
  background: var(--hj-cream-50, #fcfaf7);
}

.hj-mobile-header {
  position: fixed;
  inset: 0 0 auto;
  height: calc(var(--hj-mobile-header) + var(--hj-safe-top));
  padding: var(--hj-safe-top) var(--hj-mobile-gutter) 0;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
}

.hj-mobile-tabs {
  position: fixed;
  inset: auto 0 0;
  height: calc(var(--hj-mobile-tabbar) + var(--hj-safe-bottom));
  padding: 8px 12px var(--hj-safe-bottom);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: rgba(255, 255, 255, 0.96);
  border-top: 1px solid var(--hj-border, #ece7e3);
}

.hj-mobile-tabs button {
  min-width: var(--hj-touch-target);
  min-height: var(--hj-touch-target);
  border: 0;
  background: transparent;
  color: var(--hj-text-muted, #968d89);
}

.hj-mobile-tabs button[aria-current='page'] {
  color: var(--hj-rose-500, #d98387);
}

@media (min-width: 651px) {
  .hj-mobile-only { display: none !important; }
}