/* K44 ĐSB — shared app shell: page transitions + desktop mobile frame */

/* Smooth cross-page transitions (supported browsers fall back to normal navigation) */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 220ms; }
.k44-screen header.fixed { view-transition-name: k44-header; }
.k44-screen nav.fixed { view-transition-name: k44-nav; }

/* On phones the app fills the screen exactly as designed.
   On tablets/desktop it is wrapped in a centered phone frame. */
@media (min-width: 640px) {
  html, body { width: 100% !important; height: 100%; }
  body.k44-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    overflow: hidden;
    background-color: #0a0e16 !important;
    background-image:
      linear-gradient(rgba(245, 158, 11, 0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(245, 158, 11, 0.05) 1px, transparent 1px);
    background-size: 32px 32px;
  }
  .k44-device {
    position: relative;
    width: 390px;
    height: min(844px, calc(100vh - 48px));
    border-radius: 44px;
    overflow: hidden;
    /* Makes position:fixed header/nav/modals anchor to the frame instead of the window */
    transform: translateZ(0);
    background-color: #0f131c;
    box-shadow:
      0 0 0 10px #05070b,
      0 0 0 11px #2a2f3a,
      0 30px 80px rgba(0, 0, 0, 0.55);
  }
  .k44-screen {
    height: 100%;
    min-height: 0 !important;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }
  .k44-screen main.min-h-screen { min-height: 100% !important; }
}