@import url("./document-scrollbar.77cb76e08bfb.css?v=20260905-shared-overlay-rail-v2");

:root {
  color-scheme: dark;
  --page-background: #080F20;
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --page-background: #EEF4FF;
  }
}

/* The saved application choice is authoritative from the first head script,
   including before the stylesheet media-query adapter has run. */
:root[data-color-scheme="dark"] {
  color-scheme: dark;
  --page-background: #080F20;
}

:root[data-color-scheme="light"] {
  color-scheme: light;
  --page-background: #EEF4FF;
}

html {
  background: var(--page-background);
  /* The root is the sole document-level scroll owner. Several legacy page
     sheets clip horizontal body overflow; `overflow-x: hidden` paired with a
     visible Y axis computes to `overflow-y: auto`, which created a second
     full-height scrollbar beside the root scrollbar. */
  overflow-x: hidden !important;
  overflow-y: auto !important;
  /* Keep the document's inline geometry invariant when navigation changes
     whether a classic vertical scrollbar is needed. `stable` is the native
     browser contract for reserving only that scrollbar lane; it does not
     create a second scroll owner or force a visible scrollbar. `!important`
     makes this root-level invariant win over legacy page-local root rules. */
  scrollbar-gutter: stable !important;
}

/* Older desktop engines without scrollbar-gutter support get the equivalent
   native CSS behaviour by keeping the root scrollbar lane present. Overlay
   scrollbars do not consume layout width, so this remains geometry-neutral on
   touch platforms. */
@supports not (scrollbar-gutter: stable) {
  @media (hover: hover) and (pointer: fine) {
    html {
      overflow-y: scroll !important;
    }
  }
}

body {
  margin: 0 !important;
  padding: 0 !important;
  /* `clip` prevents horizontal painting without making body a scroll
     container, so all ordinary page scrolling stays on the root element. */
  overflow-x: clip !important;
  overflow-y: visible;
  /* `scrollbar-color` inherits. Re-establish the existing themed treatment
     at body so nested panels do not inherit the quieter viewport thumb. */
  scrollbar-color: var(
      --premium-upsell-solid,
      var(
        --track-primary,
        var(--external-primary, var(--public-brand-green, #9db8ff))
      )
    )
    var(
      --premium-upsell-light,
      var(--track-primary-light, var(--external-primary-soft, #EEF4FF))
    );
}

@supports not (overflow-x: clip) {
  body {
    /* The root already clips the horizontal axis. Leaving body visible is the
       non-scrolling fallback for engines without `overflow: clip`. */
    overflow-x: visible !important;
  }
}

::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: var(--premium-upsell-light, #EEF4FF);
}

::-webkit-scrollbar-thumb {
  background: var(--premium-upsell-solid, #9db8ff);
  border: 3px solid var(--premium-upsell-light, #EEF4FF);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--premium-upsell-dark, #6f93f7);
}

/* Installed touch apps communicate scroll position through direct content
   movement. Hide only the visual rail on phone/tablet PWAs; ordinary mobile
   browsers and desktop installations retain their native scrollbar. */
@media (hover: none) and (pointer: coarse) {
  html:is(.studiverse-standalone-boot, .pwa-standalone),
  html:is(.studiverse-standalone-boot, .pwa-standalone) body,
  html:is(.studiverse-standalone-boot, .pwa-standalone)
    body:not(#studiverse-native-mobile-scrollbars):not(#studiverse-accessible-mobile-scrollbars) * {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
  }

  html:is(.studiverse-standalone-boot, .pwa-standalone) {
    scrollbar-gutter: auto !important;
  }

  html:is(.studiverse-standalone-boot, .pwa-standalone)::-webkit-scrollbar,
  html:is(.studiverse-standalone-boot, .pwa-standalone) body::-webkit-scrollbar,
  html:is(.studiverse-standalone-boot, .pwa-standalone)
    body:not(#studiverse-native-mobile-scrollbars):not(#studiverse-accessible-mobile-scrollbars) *::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
}

body {
  background: var(--page-background) !important;
  background-color: var(--page-background) !important;
}