/* App shell: sidebar | main | context panel. Desktop-first at 1600×1000. */
.app {
  height: 100vh; height: 100dvh;
  display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr) var(--ctx-w);
}
.app.no-ctx { grid-template-columns: var(--side-w) minmax(0, 1fr) 0; }
.app.side-collapsed { --side-w: 68px; }

.side { background: var(--g50); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 18px 14px 14px; min-height: 0; overflow: hidden; }
.side-scroll { flex: 1; overflow-y: auto; min-height: 0; margin: 0 -6px; padding: 0 6px; scrollbar-width: thin; scrollbar-color: var(--g200) transparent; }

.main { overflow-y: auto; overflow-x: hidden; min-height: 0; scrollbar-width: thin; scrollbar-color: var(--g200) transparent; position: relative; }
.inner { max-width: 880px; margin: 0 auto; padding: 40px 56px 64px; }
.inner.wide { max-width: 1040px; }

.ctx { border-left: 1px solid var(--line); background: var(--white); display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden; }
.app.no-ctx .ctx { border-left: 0; }

.scrim { display: none; }
.mobile-bar { display: none; }

/* ---------- Smaller desktop: context panel becomes an overlay drawer ---------- */
@media (max-width: 1279px) {
  .app, .app.no-ctx { grid-template-columns: var(--side-w) minmax(0, 1fr); }
  .ctx { position: fixed; right: 0; top: 0; bottom: 0; width: min(var(--ctx-w), 92vw); z-index: 30;
         box-shadow: -24px 0 48px -24px rgba(11, 11, 15, .25); transform: translateX(0); transition: transform .22s var(--ease); }
  .app.no-ctx .ctx { transform: translateX(105%); box-shadow: none; }
  .app:not(.no-ctx) .scrim.ctx-scrim { display: block; position: fixed; inset: 0; background: rgba(11, 11, 15, .18); z-index: 29; }
  .inner { padding: 36px 40px 56px; }
}

/* ---------- Tablet / foldable: sidebar becomes off-canvas ---------- */
@media (max-width: 899px) {
  .app, .app.no-ctx, .app.side-collapsed { grid-template-columns: minmax(0, 1fr); --side-w: 260px; }
  .side { position: fixed; left: 0; top: 0; bottom: 0; width: 260px; z-index: 40; transform: translateX(-105%); transition: transform .22s var(--ease); }
  .app.nav-open .side { transform: none; box-shadow: 24px 0 48px -24px rgba(11, 11, 15, .25); }
  .app.nav-open .scrim.nav-scrim { display: block; position: fixed; inset: 0; background: rgba(11, 11, 15, .18); z-index: 39; }
  .mobile-bar { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 14px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: rgba(255, 255, 255, .96); z-index: 5; }
  .mobile-bar img { width: 22px; height: 22px; }
  .mobile-bar b { font-size: 12px; letter-spacing: .2em; }
  .inner { padding: 24px 20px 48px; }
}