/* ---- App shell ---- */
.app-shell {
  max-width: 1440px;
  padding: var(--gutter);
  margin-inline: auto;
}

/* For banners that sit above a page's own .app-shell */
.app-shell--flush-bottom {
  padding-bottom: 0;
}

/* ---- Draft layout: sidebar split around the board ---- */
/* Desktop: top + rest stack in the left column, board on the right.
   Source order is top, board, rest, so one column reads correctly on phones. */
.draft-layout {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "top  board"
    "rest board";
  gap: var(--s-5) var(--gutter);
}

.draft-layout__top   { grid-area: top; }
.draft-layout__board { grid-area: board; }
.draft-layout__rest  { grid-area: rest; align-self: start; }

/* ---- Sidebar stack ---- */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

/* ---- Item grid (fixed-width cards that wrap) ---- */
.item-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.item-card {
  width: var(--item-w);
}

/* ---- Responsive: stack sidebar above board below ~900px ---- */
@media (max-width: 900px) {
  .draft-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "top"
      "board"
      "rest";
  }

  .item-card {
    width: 100%;
  }
}