/* The choice of mode: a table head and one card per mode, drawn by the
   shelf's card (pages/dashboard.css, .shelf-card) and the story table's head
   (pages/story_cards.css, .story-table-header).

   The parchment itself, the nav, flash messages and buttons: pages/parchment.css */

.mode-select {
  max-width: 1040px;
  margin: 0 auto;
  padding: 2rem 0 3rem;
  animation: riseIn 0.8s ease-out both;
}
/* The container's own 0.6rem, made up to a 16px gutter, as on the shelf and
   the story table, so the cards' edge stays put between the three pages. */
@media (max-width: 768px) {
  .mode-select { padding-left: 6px; padding-right: 6px; }
}

/* Room for three cards at the shelf's width, for when a third mode comes. */
@media (max-width: 1399.98px) {
  body:has(.mode-select) .container { max-width: 1100px; }
}

/* Cards of the shelf's width, centred, as many to a row as fit: two today,
   and a third beside them later without a new layout. 328px is the shelf's
   card in its row of three: (1040 - 2 x 28) / 3. */
.mode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 328px));
  justify-content: center;
  gap: 28px;
}
/* auto-fit counts its tracks at their full 328px, so on its own it would keep
   one lone card per row until 684px of room: a phone on its side would show
   only the first mode. Between the phone and the wide screen the shelf puts
   two to a row, and so does this, the cards shrinking to fit. */
@media (min-width: 560px) and (max-width: 900px) {
  .mode-grid { grid-template-columns: repeat(2, minmax(0, 328px)); gap: 20px; }
}
@media (max-width: 559.98px) {
  .mode-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}

/* The line under the name is the mode's one description, not the shelf's row
   of dotted facts. */
.mode-card .shelf-card-meta { display: block; }