/* FinUI create's layout, and nothing else: the bar, the pickers, the cards and the code line are FinUI's components,
   which draw themselves; a test holds this file to placing them (pages-lay-out.test.mjs). The preview's layout is
   preview.css, inside the frames. */
.create-loading { padding: 40px; }
.create-main { display: grid; gap: 16px; max-width: 1440px; margin: 0 auto; padding: 18px 24px 48px; }
.create-tools { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.create-link { display: inline-flex; align-items: center; gap: 8px; }
.create-link[hidden] { display: none; }
.create { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.create-stage { overflow: hidden; }
.create-stage > .fui-card__body { padding: 0; }
.create-frames.is-both { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; }
.create-frame { display: block; width: 100%; height: max(560px, calc(100vh - 190px)); border: 0; }
/* The panel keeps to the screen beside the preview and scrolls in itself. */
.create-panel { position: sticky; top: 72px; display: grid; gap: 10px; align-content: start; max-height: calc(100vh - 88px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.create-group > .fui-card__body, .create-preset > .fui-card__body { display: grid; gap: 6px; }
.create-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.create-actions > * { flex: 1 1 auto; }
.create-install { display: grid; gap: 12px; }
.create-install__pane { display: grid; gap: 8px; justify-items: start; }
.create-install__pane > .fui-code-block--line, .create-install__pane > .fui-code-block { width: 100%; }
.create-open { display: grid; gap: 8px; }
.create-open__actions { display: flex; justify-content: flex-end; margin-top: 4px; }
@media (max-width: 900px) {
  .create { grid-template-columns: minmax(0, 1fr); }
  .create-panel { position: static; order: -1; max-height: none; overflow: visible; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
  .create-frames.is-both { grid-template-columns: minmax(0, 1fr); }
  .create-frame { height: 75vh; min-height: 480px; }
}
@media (max-width: 560px) { .create-main { padding: 16px 16px 40px; } }