/* ============================================================
   LAYOUT — App shell grid + multi-panel content grids
   ============================================================ */

.app-container {
  display: grid;
  /* toolbar · relbar · command · secbar · main · suggest · ticker */
  grid-template-rows: auto auto auto auto 1fr auto auto;
  height: 100vh;
  width: 100vw;
  background: var(--bg-black);
}

/* Main content scroll area */
.main-content {
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--gap);
  background: var(--bg-black);
}

/* Screen wrappers */
.screen {
  display: grid;
  gap: var(--gap);
  animation: screen-in 0.18s ease-out;
}

/* Grid configurations */
.grid-1 { grid-template-columns: 1fr; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(2, 1fr); }

/* Dashboard composite layout */
.dashboard {
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: min-content;
}
.dashboard .span-2 { grid-column: span 2; }

/* Span helpers */
.span-full { grid-column: 1 / -1; }

/* Project / card grids */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--gap);
}