/* Primary Shell rail: one stacking/geometry owner for Menu + Roteiro + Gastos + Wallet. */
#shellPrimaryRail {
  position: fixed;
  z-index: 3600;
  top: var(--ux-menu-tab-top, 12px);
  left: 0;
  width: 58px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  pointer-events: none;
  isolation: isolate;
}

#shellPrimaryRail > #btnMenu {
  position: relative !important;
  z-index: 4 !important;
  top: auto !important;
  left: -18px !important;
  margin: 0 0 6px !important;
  flex: 0 0 48px;
  pointer-events: auto !important;
}

#shellPrimaryRail > #itineraryEntryHost,
#shellPrimaryRail > #financeEntryHost,
#shellPrimaryRail > #walletEntryHost {
  position: relative !important;
  z-index: auto !important;
  top: auto !important;
  left: -18px !important;
  width: 58px !important;
  height: 48px !important;
  margin: 0 !important;
  flex: 0 0 48px;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: none !important;
}

#shellPrimaryRail > #financeEntryHost[hidden] {
  display: none !important;
}

#shellPrimaryRail .itinerary-entry-button,
#shellPrimaryRail .finance-entry-button,
#shellPrimaryRail .wallet-entry-button {
  pointer-events: auto !important;
}

#shellPrimaryRail.is-transitioning button {
  pointer-events: none !important;
}

/* The side menu remains modal over the persistent primary rail. */
#sideMenu,
#menuOverlay {
  isolation: isolate;
}

/* Recycled Wallet reel: fixed physical window, bounded compositor work. */
#walletWheel[data-reel-mode="recycled-window"] {
  scroll-snap-type: y proximity;
  contain: layout paint style;
}

#walletWheel[data-reel-mode="recycled-window"] .wallet-reel-item {
  scroll-snap-align: center;
  contain: layout paint style;
}

#walletWheel[data-reel-mode="recycled-window"] .wallet-document-card {
  filter: none !important;
  contain: layout paint style;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

#walletWheel[data-reel-mode="recycled-window"] .wallet-document-card::after {
  height: 58px;
  opacity: .52;
}

/* Viewer is modal above the Shell rail, but receives coherent enter/exit motion. */
.wallet-document-viewer {
  z-index: 4200;
}

@keyframes ux-wallet-viewer-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes ux-wallet-viewer-card-in {
  from {
    opacity: 0;
    transform: translate3d(5%, 0, 0) scale(.992);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.wallet-document-viewer:not([hidden]) .wallet-document-viewer-backdrop {
  animation: ux-wallet-viewer-backdrop-in 200ms ease both;
}

.wallet-document-viewer:not([hidden]) .wallet-document-viewer-card {
  animation: ux-wallet-viewer-card-in 240ms cubic-bezier(.22,.8,.26,1) both;
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .wallet-document-viewer:not([hidden]) .wallet-document-viewer-backdrop,
  .wallet-document-viewer:not([hidden]) .wallet-document-viewer-card {
    animation: none !important;
  }
}