/* App shell layout: grid, content region, mobile drawer scrim.
   The shell is pinned to the viewport (position: fixed). The document never scrolls;
   only .shell__content does, so the topbar and sidebar stay put on every device. */

.shell {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  grid-template-rows: var(--topbar-h) minmax(0, 1fr);
  grid-template-areas: "sidebar topbar" "sidebar content";
  transition: grid-template-columns var(--dur) var(--ease);
}

.shell--collapsed {
  grid-template-columns: var(--sidebar-w-collapsed) minmax(0, 1fr);
}

.shell__content {
  grid-area: content;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--s-6);
  padding-right: calc(var(--s-6) + var(--safe-right));
  padding-bottom: calc(var(--s-6) + var(--safe-bottom));
}

.shell__outlet {
  max-width: 1440px;
  margin: 0 auto;
}

.shell__scrim {
  display: none;
}

/* Tablet and small laptop: keep the sidebar as a slim icon rail so content has room. */
@media (min-width: 901px) and (max-width: 1100px) {
  .shell {
    grid-template-columns: var(--sidebar-w-collapsed) minmax(0, 1fr);
  }

  .shell__content {
    padding: var(--s-5);
    padding-right: calc(var(--s-5) + var(--safe-right));
    padding-bottom: calc(var(--s-5) + var(--safe-bottom));
  }
}

@media (max-width: 900px) {
  .shell,
  .shell--collapsed {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: calc(var(--topbar-h) + var(--safe-top)) minmax(0, 1fr);
    grid-template-areas: "topbar" "content";
  }

  .shell--drawer-open .shell__scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 45;
    background: rgba(0, 0, 0, 0.6);
    animation: scrim-in var(--dur) var(--ease);
  }

  .shell__content {
    padding: var(--s-4);
    padding-left: calc(var(--s-4) + var(--safe-left));
    padding-right: calc(var(--s-4) + var(--safe-right));
    padding-bottom: calc(var(--s-6) + var(--safe-bottom));
  }
}

@keyframes scrim-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .shell {
    transition: none;
  }

  .shell--drawer-open .shell__scrim {
    animation: none;
  }
}