/* App shell: sidebar (left) + content (fills the rest). */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w-expanded) 1fr;
  min-height: 100dvh;
  transition: grid-template-columns var(--dur) var(--ease);
}
.app[data-sidebar="collapsed"] {
  grid-template-columns: var(--sidebar-w-collapsed) 1fr;
}

.content {
  min-width: 0; /* let content shrink instead of overflowing the grid */
  padding: var(--sp-6);
}
.content__inner {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
}

/* --- Mobile: sidebar becomes an off-canvas drawer over the content --- */
@media (max-width: 768px) {
  .app { grid-template-columns: 1fr; }
  .app[data-sidebar="collapsed"] { grid-template-columns: 1fr; }

  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-w-expanded);
    transform: translateX(-100%);
    box-shadow: var(--shadow-md);
    transition: transform var(--dur) var(--ease);
  }
  .app[data-sidebar="expanded"] .sidebar { transform: translateX(0); }

  .content { padding: var(--sp-6) var(--sp-4); }
}

/* --- Mobile drawer controls (hidden on desktop) --- */
.drawer-btn {
  display: none;
  position: fixed;
  top: var(--sp-4);
  left: var(--sp-4);
  z-index: calc(var(--z-sidebar) + 1);
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  color: var(--c-ink);
  box-shadow: var(--shadow-sm);
}
.scrim { display: none; }

@media (max-width: 768px) {
  .drawer-btn { display: grid; }
  .drawer-btn svg { width: 1.375rem; height: 1.375rem; }
  .content { padding-top: calc(var(--sp-6) + 2.75rem); }

  .scrim {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-sidebar) - 1);
    background: rgba(20, 21, 26, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur) var(--ease);
  }
  .app[data-sidebar="expanded"] .scrim { opacity: 1; pointer-events: auto; }
}