/* Structural frame shared by the case decks. Each deck supplies its own
   visual language through the --deck-* variables and its vendored system CSS. */

html,
body {
  margin: 0;
}

body {
  background: var(--deck-surface);
}

/* Each slide keeps the fixed stage it was composed on and is zoomed to the
   page width; zoom scales layout too, so stacked slides leave no gaps. */
.deck-slide {
  position: relative;
  box-sizing: border-box;
  width: var(--stage-w, 1120px);
  height: var(--stage-h, 700px);
  zoom: var(--stage-scale, 1);
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 52px 64px;
  overflow: hidden;
  background: var(--deck-surface);
}

.deck-slide + .deck-slide {
  border-top: 1px solid var(--deck-rule);
}

.deck-head {
  display: grid;
  gap: 8px;
  max-width: 820px;
}

.deck-body {
  flex: 1;
  min-height: 0;
}

.deck-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}

.deck-cols--wide-left {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
}

.deck-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.deck-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

/* Narrow viewports: the stage stops scaling and each slide reflows. */
html.deck-flow .deck-slide {
  width: auto;
  height: auto;
  zoom: 1;
  gap: 20px;
  padding: 28px 16px 44px;
  overflow: visible;
}

html.deck-flow .deck-cols,
html.deck-flow .deck-grid-3,
html.deck-flow .deck-grid-4 {
  grid-template-columns: minmax(0, 1fr);
}

html.deck-flow .deck-head {
  gap: 6px;
}