/* Mobile theme tokens + safe areas. Active only under .mobile-layout */

html.mobile-layout {
  --m-radius-sheet: 22px;
  --m-radius-btn: 14px;
  --m-radius-fab: 999px;
  --m-blur: saturate(160%) blur(20px);
  --m-sheet-bg: rgba(17, 20, 24, 0.88);
  --m-chrome-bg: rgba(17, 20, 24, 0.78);
  --m-hairline: rgba(255, 255, 255, 0.08);
  --m-shadow: 0 -8px 32px rgba(0, 0, 0, 0.45);
  --m-fab-size: 52px;
  --m-top-h: calc(48px + env(safe-area-inset-top, 0px));
  --m-peek-h: calc(88px + env(safe-area-inset-bottom, 0px));
  --m-half-h: 42dvh;
  --m-full-h: 88dvh;
  --m-touch: 44px;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}

html.mobile-layout body,
html.mobile-layout #root {
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}

html.mobile-layout body {
  font-size: 15px;
  padding: 0;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  html.mobile-layout *,
  html.mobile-layout *::before,
  html.mobile-layout *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Landscape denser chrome */
@media (orientation: landscape) and (max-height: 500px) {
  html.mobile-layout {
    --m-top-h: calc(40px + env(safe-area-inset-top, 0px));
    --m-peek-h: calc(72px + env(safe-area-inset-bottom, 0px));
    --m-half-h: 48dvh;
  }
}