/* Device adaptation. Breakpoints follow styles/ui-spec-mobile.md.
   Phone ≤767, tablet portrait 768–1023, tablet landscape and Mac ≥1024.
   YouhuaPad and iPad are touch tablets. Mac uses the fine-pointer desktop tier. */

:root {
  --lx-safe-top: env(safe-area-inset-top, 0px);
  --lx-safe-right: env(safe-area-inset-right, 0px);
  --lx-safe-bottom: env(safe-area-inset-bottom, 0px);
  --lx-safe-left: env(safe-area-inset-left, 0px);
  --lx-topbar-h: calc(56px + var(--lx-safe-top));
  --lx-bottom-nav-h: calc(56px + var(--lx-safe-bottom));
  --lx-page-gutter: 24px;
  --lx-content-max: 1216px;
  --lx-screen-h: 100vh;
}

@supports (height: 100dvh) {
  :root { --lx-screen-h: 100dvh; }
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  padding-left: var(--lx-safe-left);
  padding-right: var(--lx-safe-right);
}

@media (hover: hover) and (pointer: fine) {
  html {
    -webkit-font-smoothing: antialiased;
  }
}

/* Phones: Android, iPhone, and any window at this width. */
@media (max-width: 767px) {
  :root {
    --lx-page-gutter: 20px;
    --lx-content-max: 100%;
    --lx-focus-inset: 16px;
    --lx-focus-player-max-h: min(52dvh, calc(100dvh - 280px));
    --lx-focus-player-width: min(100%, calc(min(52dvh, calc(100dvh - 280px)) * 16 / 9));
  }

  body > header.topbar,
  body > .topbar,
  body > .navbar {
    position: sticky;
    top: 0;
    width: 100%;
    min-height: var(--lx-topbar-h);
    margin: 0;
    padding-top: var(--lx-safe-top);
    padding-left: max(12px, var(--lx-safe-left));
    padding-right: max(12px, var(--lx-safe-right));
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  input,
  select,
  textarea {
    font-size: 16px;
  }

  nav.bottom-nav .nav-item {
    width: auto;
    min-width: 48px;
    min-height: 48px;
  }

  nav.bottom-nav .nav-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
  }

  html[data-lx-tier="phone"] input,
  html[data-lx-tier="phone"] select,
  html[data-lx-tier="phone"] textarea {
    font-size: 16px !important;
  }
}

@media (max-width: 375px) {
  :root {
    --lx-page-gutter: 16px;
    --lx-text-display: 28px;
  }
}

/* Tablet portrait, including YouhuaPad and iPad held upright, and split view. */
@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --lx-page-gutter: 24px;
    --lx-content-max: 720px;
    --lx-focus-inset: 24px;
  }

  body > header.topbar,
  body > .topbar,
  body > .navbar {
    width: min(720px, calc(100% - 48px));
  }

  .bottom-nav {
    justify-content: center;
  }

  nav.bottom-nav .nav-item {
    flex: 0 1 120px;
    width: auto;
    max-width: 120px;
    min-height: 48px;
  }

  html[data-lx-tier="tablet-portrait"] input,
  html[data-lx-tier="tablet-portrait"] select,
  html[data-lx-tier="tablet-portrait"] textarea {
    font-size: 16px !important;
  }
}

/* YouhuaPad / iPad landscape: touch, wide, no desktop capsule shrink. */
@media (min-width: 1024px) and (hover: none) and (pointer: coarse) {
  :root {
    --lx-page-gutter: 32px;
    --lx-content-max: 940px;
    --lx-focus-inset: 24px;
  }

  .bottom-nav {
    display: none;
  }
}

/* Mac and other fine-pointer desktops. */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  :root {
    --lx-page-gutter: 24px;
    --lx-content-max: 1216px;
  }
}

@media (pointer: coarse) {
  button,
  .btn,
  .nav-item,
  input[type="button"],
  input[type="submit"],
  input[type="reset"] {
    min-height: 44px;
  }

  a,
  button,
  .btn,
  .nav-item {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  input,
  select,
  textarea {
    font-size: 16px;
  }
}

nav.bottom-nav {
  height: auto;
  min-height: calc(56px + var(--lx-safe-bottom));
  padding-top: 6px;
  padding-bottom: var(--lx-safe-bottom);
  box-sizing: border-box;
}

html[data-lx-form="phone"] .lx-install-desktop-slot--float,
html[data-lx-tier="tablet-portrait"] .lx-install-desktop-slot--float {
  bottom: calc(72px + var(--lx-safe-bottom));
  right: max(16px, var(--lx-safe-right));
}

.mobile-header {
  padding-top: max(16px, var(--lx-safe-top));
}

.section-tabs {
  -webkit-overflow-scrolling: touch;
}

html[data-lx-tier="phone"] body,
html[data-lx-tier="tablet-portrait"] body {
  overscroll-behavior-y: none;
}