/*
 * GistMap responsive contract
 * Loaded after page-owned styles. Page-specific adapters remain scoped to
 * body[data-gm-page] and may consume these tokens without redefining shells.
 */

:root {
  --gm-shell-wide: 1440px;
  --gm-shell-compact: 1200px;
  --gm-shell-tablet: 1024px;
  --gm-shell-mobile: 768px;
  --gm-shell-phone: 480px;
  --gm-page-gutter: clamp(16px, 2.4vw, 40px);
  --gm-safe-top: env(safe-area-inset-top, 0px);
  --gm-safe-right: env(safe-area-inset-right, 0px);
  --gm-safe-bottom: env(safe-area-inset-bottom, 0px);
  --gm-safe-left: env(safe-area-inset-left, 0px);
  --gm-touch-target: 44px;
}

html {
  min-width: 320px;
}

body[data-gm-page] {
  max-width: 100%;
}

body[data-gm-page] :where(.gm-min-zero, [data-gm-fluid]) {
  min-width: 0;
}

body[data-gm-page] :where(.gm-wrap-text, [data-gm-wrap]) {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
}

body[data-gm-page] :where(img, video) {
  max-width: 100%;
}

body[data-gm-page] :where(.gm-touch-target, [data-gm-touch]) {
  min-width: var(--gm-touch-target);
  min-height: var(--gm-touch-target);
}

body[data-gm-page] :where(.gm-fixed-bottom, [data-gm-fixed-bottom]) {
  padding-bottom: var(--gm-safe-bottom);
}

body[data-gm-page] :where(.gm-horizontal-rail, [data-gm-horizontal-rail]) {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

body[data-gm-page] :where(.gm-responsive-container, [data-gm-container]) {
  container-type: inline-size;
}

@container (max-width: 719px) {
  .gm-container-stack {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 1023px) {
  body[data-gm-page] :where(.gm-tablet-stack, [data-gm-tablet-stack]) {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  body[data-gm-page] :where(.gm-mobile-stack, [data-gm-mobile-stack]) {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-gm-page] :where(.gm-mobile-full, [data-gm-mobile-full]) {
    width: 100%;
  }
}

@media (max-width: 479px) {
  body[data-gm-page] :where(.gm-phone-stack, [data-gm-phone-stack]) {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-gm-page] *,
  body[data-gm-page] *::before,
  body[data-gm-page] *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}