/* The builder page's order (Views::Builder::Show). On a phone the day's
   context bar (Views::Builder::ContextBar) sticks to the top, the day's
   guide (Views::Builder::DayGuide, folded away when the coach wants the
   room) comes next, then the editor, with the day strip and controls after
   it; from 64rem the desktop order returns: days, context, then the editor
   with the guide in a sticky column beside it (builder-layout-guided, on a
   day that has one). */

.builder-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.builder-layout-context {
  order: 0;
  position: sticky;
  top: 0;
  z-index: 2;
}

.builder-layout-guide {
  order: 1;
}

.builder-layout-form {
  order: 2;
}

.builder-layout-days {
  order: 3;
}

.builder-context {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--stratum-head);
  border-radius: var(--radius-md);
}

@media (min-width: 64rem) {
  /* With a guide (builder-layout-guided): the days and the context bar
     across the top, then the editor and the guide side by side, the guide
     held in view while the editor scrolls. Without one, the column stays
     a flex column and the grid placements below do nothing. */
  .builder-layout-guided {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24rem;
    align-items: start;
  }

  .builder-layout-days {
    order: 0;
    grid-column: 1 / -1;
  }

  .builder-layout-context {
    order: 1;
    grid-column: 1 / -1;
    position: static;
  }

  .builder-layout-form {
    order: 2;
  }

  .builder-layout-guide {
    order: 3;
    position: sticky;
    top: var(--space-2);
    max-height: calc(100vh - 2 * var(--space-2));
    overflow-y: auto;
  }
}