/**
 * Public portal — native mobile app polish (subtle layer on portal.css).
 * Applies on phones/tablets in portrait-width public shell only.
 */

@media (max-width: 991px) {
  body:not(.pmts-has-sidebar) {
    -webkit-tap-highlight-color: transparent;
    --pmts-mobile-card-radius: 1rem;
    --pmts-mobile-gap: 0.75rem;
    --pmts-mobile-inset: max(0.75rem, env(safe-area-inset-left, 0px));
    --pmts-mobile-inset-right: max(0.75rem, env(safe-area-inset-right, 0px));
    --pmts-mobile-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
    --pmts-public-header-height: calc(3.5rem + env(safe-area-inset-top, 0px));
  }

  /* App canvas — soft grey backdrop, content floats as cards */
  body:not(.pmts-has-sidebar) #page-scroll-shell {
    background: linear-gradient(180deg, #e8ecf1 0%, #eef1f6 32%, #f3f4f6 100%);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }

  body:not(.pmts-has-sidebar) .pmts-public-shell {
    padding-left: var(--pmts-mobile-inset);
    padding-right: var(--pmts-mobile-inset-right);
    padding-bottom: calc(1rem + var(--pmts-mobile-bottom));
  }

  /* Sticky frosted header */
  body:not(.pmts-has-sidebar) .pmts-topbar:has(.public-site-header) {
    position: sticky;
    top: 0;
    z-index: 40;
    padding-top: env(safe-area-inset-top, 0px);
  }

  body:not(.pmts-has-sidebar) .public-site-header {
    border-radius: 0 0 var(--pmts-mobile-card-radius) var(--pmts-mobile-card-radius);
    border: 1px solid rgb(226 232 240 / 0.85);
    border-top: none;
    box-shadow:
      0 4px 18px rgb(15 23 42 / 0.08),
      0 1px 0 rgb(255 255 255 / 0.65) inset;
    backdrop-filter: blur(12px) saturate(1.35);
    -webkit-backdrop-filter: blur(12px) saturate(1.35);
    background: rgb(255 255 255 / 0.88);
  }

  body:not(.pmts-has-sidebar) .public-site-header__row {
    min-height: 3.5rem;
  }

  body:not(.pmts-has-sidebar) .public-site-header__menu-btn,
  body:not(.pmts-has-sidebar) .public-site-header__cta,
  body:not(.pmts-has-sidebar) .public-site-header__staff-cta {
    min-width: 2.75rem;
    min-height: 2.75rem;
    touch-action: manipulation;
  }

  /* Mobile drawer — sheet style */
  body:not(.pmts-has-sidebar) .public-site-header__mobile {
    margin: 0 var(--pmts-mobile-inset);
    border-radius: var(--pmts-mobile-card-radius);
    border: 1px solid rgb(226 232 240);
    background: rgb(255 255 255 / 0.97);
    box-shadow: 0 16px 40px rgb(15 23 42 / 0.12);
  }

  body:not(.pmts-has-sidebar) .public-site-header__mobile-link {
    min-height: 2.75rem;
    border-radius: 0.75rem;
    touch-action: manipulation;
    transition: background-color 0.15s ease, transform 0.12s ease;
  }

  body:not(.pmts-has-sidebar) .public-site-header__mobile-link:active {
    transform: scale(0.98);
    background: rgb(241 245 249);
  }

  /* Card stacks for sections */
  body:not(.pmts-has-sidebar) .landing-page {
    gap: var(--pmts-mobile-gap);
  }

  body:not(.pmts-has-sidebar) .landing-page .dashboard-section,
  body:not(.pmts-has-sidebar) .public-project-page .dashboard-section,
  body:not(.pmts-has-sidebar) .public-page-content .dashboard-section,
  body:not(.pmts-has-sidebar) .dashboard-page-root .dashboard-section {
    margin-bottom: var(--pmts-mobile-gap);
    padding: 1rem;
    border-radius: var(--pmts-mobile-card-radius);
    border: 1px solid rgb(226 232 240 / 0.9);
    background: #fff;
    box-shadow:
      0 1px 2px rgb(15 23 42 / 0.04),
      0 8px 24px rgb(15 23 42 / 0.06);
  }

  body:not(.pmts-has-sidebar) .landing-hero {
    border-radius: calc(var(--pmts-mobile-card-radius) + 0.125rem);
    margin-bottom: var(--pmts-mobile-gap);
    box-shadow: 0 12px 32px rgb(15 23 42 / 0.16);
  }

  body:not(.pmts-has-sidebar) .public-page-hero,
  body:not(.pmts-has-sidebar) .public-page-content > .dashboard-panel,
  body:not(.pmts-has-sidebar) .public-feedback-form-wrap {
    border-radius: var(--pmts-mobile-card-radius);
  }

  /* Touch-friendly controls */
  body:not(.pmts-has-sidebar) .public-btn,
  body:not(.pmts-has-sidebar) .landing-hero__btn,
  body:not(.pmts-has-sidebar) .landing-cta-btn,
  body:not(.pmts-has-sidebar) .public-footer-link {
    min-height: 2.75rem;
    touch-action: manipulation;
  }

  body:not(.pmts-has-sidebar) .public-btn:active,
  body:not(.pmts-has-sidebar) .landing-hero__btn:active,
  body:not(.pmts-has-sidebar) .landing-cta-btn:active {
    transform: scale(0.98);
  }

  body:not(.pmts-has-sidebar) .public-feedback-form__input,
  body:not(.pmts-has-sidebar) .public-feedback-form__rating {
    font-size: 16px; /* prevent iOS zoom on focus */
  }

  /* Footer sits above home indicator */
  body:not(.pmts-has-sidebar) .public-site-footer {
    margin-top: var(--pmts-mobile-gap);
    border-radius: var(--pmts-mobile-card-radius) var(--pmts-mobile-card-radius) 0 0;
    border: 1px solid rgb(226 232 240);
    border-bottom: none;
    box-shadow: 0 -4px 20px rgb(15 23 42 / 0.05);
  }

  body:not(.pmts-has-sidebar) .pmts-assistant__toggle {
    bottom: calc(1rem + var(--pmts-mobile-bottom));
    right: calc(1rem + var(--pmts-mobile-inset-right));
    box-shadow: 0 8px 28px rgb(15 23 42 / 0.18);
  }

  /* Toast messages — top sheet on mobile */
  body:not(.pmts-has-sidebar) .pmts-messages-wrap {
    padding-left: var(--pmts-mobile-inset);
    padding-right: var(--pmts-mobile-inset-right);
  }

  body:not(.pmts-has-sidebar) .pmts-alert {
    border-radius: 0.875rem;
    box-shadow: 0 10px 30px rgb(15 23 42 / 0.12);
  }

  /* Explore grid — tappable app tiles */
  body:not(.pmts-has-sidebar) .landing-explore-grid {
    gap: var(--pmts-mobile-gap);
  }

  body:not(.pmts-has-sidebar) .landing-explore-card {
    border-radius: var(--pmts-mobile-card-radius);
    box-shadow:
      0 1px 2px rgb(15 23 42 / 0.04),
      0 6px 20px rgb(15 23 42 / 0.07);
    touch-action: manipulation;
    transition: transform 0.12s ease, box-shadow 0.15s ease;
  }

  body:not(.pmts-has-sidebar) .landing-explore-card:active {
    transform: scale(0.985);
    box-shadow: 0 2px 8px rgb(15 23 42 / 0.08);
  }

  /* Inner pages — hero + list panels as cards */
  body:not(.pmts-has-sidebar) .public-page-hero,
  body:not(.pmts-has-sidebar) .projects-archive-hero {
    margin-bottom: var(--pmts-mobile-gap);
    border-radius: calc(var(--pmts-mobile-card-radius) + 0.125rem);
    box-shadow: 0 12px 32px rgb(15 23 42 / 0.14);
  }

  body:not(.pmts-has-sidebar) .projects-archive-panel,
  body:not(.pmts-has-sidebar) .projects-filter-panel,
  body:not(.pmts-has-sidebar) .projects-archive-chips {
    border-radius: var(--pmts-mobile-card-radius);
    box-shadow:
      0 1px 2px rgb(15 23 42 / 0.04),
      0 8px 24px rgb(15 23 42 / 0.06);
  }

  body:not(.pmts-has-sidebar) .projects-archive-btn,
  body:not(.pmts-has-sidebar) .projects-archive-page-btn {
    min-height: 2.75rem;
    touch-action: manipulation;
  }

  body:not(.pmts-has-sidebar) .projects-archive-btn:active,
  body:not(.pmts-has-sidebar) .projects-archive-page-btn:active {
    transform: scale(0.98);
  }

  /* Filter chips — horizontal swipe row */
  body:not(.pmts-has-sidebar) .public-filter-chips,
  body:not(.pmts-has-sidebar) .project-gallery-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding-bottom: 0.25rem;
    margin-left: calc(-1 * var(--pmts-mobile-inset));
    margin-right: calc(-1 * var(--pmts-mobile-inset-right));
    padding-left: var(--pmts-mobile-inset);
    padding-right: var(--pmts-mobile-inset-right);
  }

  body:not(.pmts-has-sidebar) .public-page-hero__stats,
  body:not(.pmts-has-sidebar) .about-hero__stats,
  body:not(.pmts-has-sidebar) .project-gallery-hero__stats,
  body:not(.pmts-has-sidebar) .public-gis-hero__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }

  body:not(.pmts-has-sidebar) .public-filter-chips::-webkit-scrollbar,
  body:not(.pmts-has-sidebar) .project-gallery-filters::-webkit-scrollbar {
    display: none;
  }

  body:not(.pmts-has-sidebar) .public-filter-chip,
  body:not(.pmts-has-sidebar) .project-gallery-filter {
    scroll-snap-align: start;
    flex-shrink: 0;
  }

  body:not(.pmts-has-sidebar) .public-filter-chip {
    min-height: 2.5rem;
    touch-action: manipulation;
  }

  /* Breadcrumb — compact app trail */
  body:not(.pmts-has-sidebar) .public-breadcrumb {
    font-size: 0.8125rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.625rem;
    background: rgb(255 255 255 / 0.72);
    border: 1px solid rgb(226 232 240 / 0.9);
  }

  /* Auth screens — floating sheet */
  body:not(.pmts-has-sidebar) .form-container {
    padding-left: var(--pmts-mobile-inset);
    padding-right: var(--pmts-mobile-inset-right);
  }

  body:not(.pmts-has-sidebar) .form-container > div:last-child > div {
    border-radius: var(--pmts-mobile-card-radius);
    border: 1px solid rgb(226 232 240);
    box-shadow: 0 12px 36px rgb(15 23 42 / 0.1);
  }

  body:not(.pmts-has-sidebar) .form-container .pmts-field-control,
  body:not(.pmts-has-sidebar) .form-container select {
    font-size: 16px;
    min-height: 2.75rem;
  }

  body:not(.pmts-has-sidebar) .landing-hero__btn,
  body:not(.pmts-has-sidebar) .public-page-hero__actions .public-btn,
  body:not(.pmts-has-sidebar) .public-page-hero__actions a.public-btn {
    min-height: 2.75rem;
  }

  body:not(.pmts-has-sidebar) .landing-hero__actions,
  body:not(.pmts-has-sidebar) .public-page-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  body:not(.pmts-has-sidebar) .landing-hero__btn,
  body:not(.pmts-has-sidebar) .public-page-hero__actions .public-btn,
  body:not(.pmts-has-sidebar) .public-page-hero__actions a.public-btn {
    width: 100%;
    justify-content: center;
  }

  /* Smooth in-app scrolling */
  body:not(.pmts-has-sidebar) #page-scroll-shell {
    scroll-behavior: smooth;
  }
}

@media (max-width: 991px) and (prefers-reduced-motion: reduce) {
  body:not(.pmts-has-sidebar) #page-scroll-shell,
  body:not(.pmts-has-sidebar) .landing-explore-card,
  body:not(.pmts-has-sidebar) .public-btn,
  body:not(.pmts-has-sidebar) .public-site-header__mobile-link {
    scroll-behavior: auto;
    transition: none;
  }

  body:not(.pmts-has-sidebar) .landing-explore-card:active,
  body:not(.pmts-has-sidebar) .public-btn:active {
    transform: none;
  }
}