/* Release 54: bounded horizontal scrolling for genuinely wide information. */
html {
  /* Native focus, keyboard navigation and browser automation must never park
     the next control underneath the fixed top bar and experience switch. */
  scroll-padding-block-start:calc(var(--topbar-height,76px) + 72px);
}

:where(.screen,.guide-modal,.crew-modal,.facility-directory-modal)
  :where(button,a,summary,[role="button"],[tabindex]) {
  scroll-margin-block-start:calc(var(--topbar-height,76px) + 72px);
}

:where(
  .process-scroll,
  .learning-future-timeline,
  .campaign-timeline,
  .future-context-options,
  .fd-table-wrap,
  .table-wrap,
  .journey-track,
  .suite-rail,
  .create-process-train ol
) {
  max-width:100%;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable;
}

/* A ledger is created dynamically without a wrapper. Make the table itself a
   bounded scroller rather than allowing it to widen the whole page. */
.mgx-ledger {
  display:block;
  max-width:100%;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
  white-space:nowrap;
}

@media (max-width:600px) {
  /* These are sequences whose labels become ambiguous if squeezed further.
     They scroll inside their own panel; the page and its primary actions do not. */
  .status-strip {
    grid-template-columns:repeat(3,minmax(112px,1fr));
    max-width:100%;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
  }

  .fd-tabs {
    display:flex;
    max-width:100%;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
  }

  .fd-tabs button {
    flex:0 0 min(74vw,220px);
    scroll-snap-align:start;
  }

  .crew-tabs {
    max-width:100%;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
  }

  .crew-tabs button { flex:0 0 auto; }
}

@media (prefers-reduced-motion:reduce) {
  :where(.process-scroll,.learning-future-timeline,.campaign-timeline,.future-context-options,.fd-table-wrap,.table-wrap,.journey-track,.suite-rail,.create-process-train ol,.status-strip,.fd-tabs,.crew-tabs) {
    scroll-behavior:auto!important;
  }
}