/* App-level layout modules: overrides and additions that sit on top of the
   reshaped component library without modifying it. */
@layer modules {
  /* The app shell owns all scrolling (.rs-content__body). Lock the document
     to the viewport so stray in-flow content after the shell (dev tooling,
     browser extensions) can never add a second, document-level scrollbar. */
  body:has(> .rs-app) {
    block-size: 100dvh;
    overflow: clip;
  }

  /* Align topbar inline padding with the content body so the topbar's
     rs-container lines up with the page content's rs-container. */
  .rs-topbar {
    padding-inline: var(--rs-unit-x6);
  }

  /* Reserve scrollbar space so the content doesn't shift between pages that
     scroll and pages that don't. both-edges keeps the centered rs-container
     aligned with the topbar's, which has no scrollbar. */
  .rs-content__body {
    scrollbar-gutter: stable both-edges;
  }

  /* Sidebar toggle only appears on small screens. */
  .app-sidebar-toggle {
    display: none;
  }

  .app-sidebar-scrim {
    display: none;
  }

  @media (width < 768px) {
    .rs-app {
      grid-template-columns: 1fr;
    }

    .rs-app > .rs-sidebar {
      position: fixed;
      inset-block: 0;
      inset-inline-start: 0;
      z-index: var(--rs-z-index-fixed);
      transform: translateX(-100%);
      transition: transform var(--rs-duration-fast) var(--rs-easing-standard);
    }

    .rs-app[data-sidebar-open] > .rs-sidebar {
      transform: none;
      box-shadow: var(--rs-shadow-overlay);
    }

    .rs-app[data-sidebar-open] .app-sidebar-scrim {
      display: block;
      position: fixed;
      inset: 0;
      z-index: calc(var(--rs-z-index-fixed) - 1);
      background: color-mix(in oklch, var(--rs-color-black), transparent 50%);
    }

    .app-sidebar-toggle {
      display: inline-flex;
    }

    .rs-topbar {
      padding-inline: var(--rs-unit-x4);
    }

    .rs-content__body {
      padding: var(--rs-unit-x4);
    }
  }
}