/* Critical viewport and shell styles loaded before app CSS. */
html {
  height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  overscroll-behavior: none;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  background-color: #09090b;
  color: #fafafa;
  margin: 0;
  padding: 0;
  min-height: 100%;
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

#root {
  min-height: 100%;
  min-height: 100dvh;
  background-color: #09090b;
  color: #fafafa;
  display: flex;
  flex-direction: column;
  position: relative;
}

* {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: default;
}

@media (hover: none) and (pointer: coarse) {
  button:not([class*="h-"]):not([class*="w-"]),
  [role="button"]:not([class*="h-"]):not([class*="w-"]) {
    min-height: 44px;
  }
}

@media screen and (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    font-size: 16px !important;
  }
}

@supports (height: 100dvh) {
  html,
  body,
  #root {
    min-height: 100dvh;
  }
}

@media (max-height: 450px) and (orientation: landscape) {
  html,
  body,
  #root {
    height: auto;
    min-height: 100%;
  }
}

@supports (-webkit-touch-callout: none) {
  .backdrop-blur-sm,
  .backdrop-blur-md,
  .backdrop-blur-lg,
  .backdrop-blur-xl {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
}

@supports not (color: oklch(0% 0 0)) {
  :root {
    --color-background: #09090b;
    --color-foreground: #fafafa;
    --background: 240 6% 10%;
    --foreground: 240 5% 96%;
  }
}

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