/* The customer's own designs (custom.js) under the chat, in the proposals' card look (proposals.html: .p-card, .morph). */

/* each slot carries its row gap as bottom padding, so a new row opens smoothly (custom.js addSlot); empty, it takes no room */
.cu-cards { row-gap: 0; margin: 20px 0 -20px; }
.cu-slot { display: flex; flex-direction: column; padding-bottom: 20px; min-width: 0; }
.cu-slot > .p-card { flex: 1; }
.cu-slot.cu-opening { overflow: hidden; }
.registered .p-card [data-edit] { opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s; } /* the panel edits from then on */

/* a custom design's sandboxed frame (custom.js frameHtml): the GIF's 400 px frame, scaled down with its box like the GIF
   (--k from custom.js); clicks go through it to the card */
.g-stage > .live:has(> .cu-fit) { padding: 0; }
.g-stage > .live:has(> .cu-fit), .mini:has(> .cu-fit) { grid-template-columns: minmax(0, 1fr); } /* an auto column would grow to the frame's 400 px */
.cu-fit { position: relative; width: 400px; max-width: 100%; aspect-ratio: 400 / var(--h); overflow: hidden; }
.cu-fit iframe { position: absolute; top: 0; left: 0; width: 400px; height: calc(var(--h) * 1px); border: 0; transform: scale(var(--k, 1)); transform-origin: 0 0; pointer-events: none; }