/**
 * Platform responsive tokens & utilities
 * Scale: phone ≤767 | tablet 768–1023 | desktop ≥1024
 */

:root {
  --bp-phone: 767px;
  --bp-tablet-min: 768px;
  --bp-tablet-max: 1023px;
  --bp-desktop: 1024px;
  --bp-mobile: 768px; /* legacy alias: mobile shell often uses max-width 768 */

  --touch-min: 44px;
  --touch-comfortable: 48px;

  --safe-area-inset-top: env(safe-area-inset-top, 0px);
  --safe-area-inset-right: env(safe-area-inset-right, 0px);
  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-inset-left: env(safe-area-inset-left, 0px);

  --bottom-nav-height: 70px;
  --sticky-actions-offset: calc(var(--bottom-nav-height) + var(--safe-area-inset-bottom) + 0.75rem);
}

/* Overflow safety */
.overflow-x-safe {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.no-page-overflow {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Touch targets */
.touch-target {
  min-width: var(--touch-min);
  min-height: var(--touch-min);
}

/* Sticky actions above bottom nav */
.sticky-actions-mobile {
  position: sticky;
  bottom: var(--sticky-actions-offset);
  z-index: 40;
}

/* Phone only */
@media (max-width: 767px) {
  .hide-on-phone {
    display: none !important;
  }

  .stack-on-phone {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }

  .stack-on-phone > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

/* Tablet and below */
@media (max-width: 1023px) {
  .stack-on-tablet {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }

  .stack-on-tablet > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .hide-on-tablet-down {
    display: none !important;
  }
}

/* Tablet only */
@media (min-width: 768px) and (max-width: 1023px) {
  .hide-on-tablet {
    display: none !important;
  }
}

/* Desktop only */
@media (min-width: 1024px) {
  .hide-on-desktop {
    display: none !important;
  }
}