/*
 * Jammin Transport — desktop framing for the Expo web export.
 *
 * Keep the mobile layout entirely owned by React Native Web. Constraining the
 * Expo root (rather than its children) preserves the booking ScrollView, the
 * absolute-positioned booking footer and tabs, and modal hit targets.
 */
@media (min-width: 900px) {
  html,
  body {
    width: 100%;
    min-height: 100%;
  }

  body {
    margin: 0;
    background-color: #e9ede5;
    background-image:
      radial-gradient(ellipse 72% 68% at 8% 4%, rgba(200, 152, 31, 0.13), transparent 75%),
      radial-gradient(ellipse 65% 75% at 96% 100%, rgba(0, 77, 32, 0.13), transparent 72%),
      linear-gradient(145deg, #f0f0e9 0%, #e4eae2 100%);
  }

  #root {
    box-sizing: border-box;
    position: relative;
    width: min(100%, 760px);
    max-width: 760px;
    min-width: 0;
    height: 100%;
    height: 100dvh;
    margin-inline: auto;
    background: #faf8f4;
    border-inline: 1px solid rgba(0, 77, 32, 0.12);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.4),
      0 24px 70px rgba(15, 39, 24, 0.10),
      0 3px 16px rgba(15, 39, 24, 0.05);
  }

  /* A restrained desktop affordance; no layout or touch target changes. */
  #root :is([role="button"], input, textarea, select):focus-visible {
    outline: 2px solid #c8981f;
    outline-offset: 2px;
  }

  #root ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  #root ::-webkit-scrollbar-thumb {
    background: rgba(0, 77, 32, 0.25);
    border: 2px solid #faf8f4;
    border-radius: 20px;
  }
}

@media (min-width: 900px) and (prefers-color-scheme: dark) {
  body {
    background-color: #111c15;
    background-image:
      radial-gradient(ellipse 70% 75% at 8% 4%, rgba(200, 152, 31, 0.09), transparent 75%),
      radial-gradient(ellipse 65% 75% at 96% 100%, rgba(39, 174, 96, 0.08), transparent 72%),
      linear-gradient(145deg, #15221a, #101911);
  }

  #root {
    background: #080c09;
    border-inline-color: rgba(232, 195, 108, 0.14);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
  }
}