/*
 * MoaBoard mobile foundation
 *
 * This file owns cross-surface mobile behavior: safe areas, layer order,
 * touch/input sizing, modal isolation, and anchor offsets. Surface-specific
 * composition belongs in admin-mobile.css, workspace-mobile.css, and
 * participation-mobile.css.
 */

:root {
  --mobile-app-bar-height: 60px;
  --mobile-bottom-bar-height: 74px;
  --mobile-touch-target: 44px;
  --mobile-layer-content: 1;
  --mobile-layer-sticky: 30;
  --mobile-layer-utility: 40;
  --mobile-layer-bottom-nav: 60;
  --mobile-layer-scrim: 90;
  --mobile-layer-modal: 100;
  --mobile-layer-toast: 110;
}

@media (max-width: 760px) {
  html {
    scroll-padding-top: calc(var(--mobile-app-bar-height) + env(safe-area-inset-top) + 12px);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    min-width: 0;
    max-width: 100%;
  }

  :target {
    scroll-margin-top: calc(var(--mobile-app-bar-height) + env(safe-area-inset-top) + 12px);
  }

  :where(.page-admin, .page-dashboard, .page-account, .page-new, .board-body)
    :where(input, select, textarea) {
    font-size: 16px;
  }

  :where(.page-admin, .page-dashboard, .page-account, .page-new, .board-body)
    :where(button, a, input, select, textarea) {
    touch-action: manipulation;
  }

  :where(.page-admin, .page-dashboard, .page-account, .page-new, .board-body)
    :where(button, a, input, select, textarea):focus-visible {
    outline: 3px solid rgba(15, 118, 110, 0.34);
    outline-offset: 2px;
  }

  body.operator-compose-open .mobile-admin-nav,
  body.analytics-modal-open .mobile-admin-nav,
  body.composer-open .visitor-utility,
  body.composer-open #open-composer,
  body.composer-open::after,
  body.member-required-open .visitor-utility,
  body.member-required-open #open-composer,
  body.member-required-open::after {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }

  body.operator-compose-open .operator-compose-panel,
  body.analytics-modal-open .analytics-modal,
  body.composer-open .composer-sheet,
  body.member-required-open .member-required-modal {
    z-index: var(--mobile-layer-modal);
  }

  body.operator-compose-open,
  body.analytics-modal-open,
  body.composer-open,
  body.member-required-open {
    overscroll-behavior: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}