/* The builder's few additions on top of the designer's kit (tokens → components → layout → stage-b → skin).
   Only glue for the live app: no colours or sizes of its own, everything comes from tokens.css. */

/* A detail pane that is still loading */
.loading-pane { padding-block: 40px; color: var(--muted); text-align: center; }

/* "Coming in step N": a button that exists in the design but whose job arrives later */
[data-later] { position: relative; }

/* The send button next to a composer textarea */
.composer .row { display: flex; gap: 8px; align-items: flex-end; }
.composer .row textarea { flex: 1 1 auto; min-width: 0; }

/* A slide with no image yet (a prototype sketch) */
.slide-c .nomedia { aspect-ratio: 4 / 5; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); border-radius: inherit; font-size: var(--t-sm); padding: 16px; text-align: center; }

/* A price never breaks across lines ("₪41-46" stays whole, D7 #3) */
.price { white-space: nowrap; }

/* A video slide plays in the app (SPEC 3.9, decision 7): the composed MP4 over the slide's PNG, with ▶ and the timeline
   inside the design's video frame (slides.video.frame, in 1080×1350 units). Glue only; 50 owns the look. */
.slide-v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.vframe { position: absolute; display: grid; place-items: center; pointer-events: none; }
.vplay { pointer-events: auto; width: 56px; height: 56px; border: 0; border-radius: 50%; display: grid; place-items: center;
  background: var(--scrim); color: var(--fg); font-size: 22px; cursor: pointer; }
.slide-c.playing .vplay { display: none; }
.vbar { position: absolute; inset-inline: 10px; bottom: 10px; height: 3px; border-radius: 2px; overflow: hidden; background: var(--line-2); }
.vbar > i { display: block; height: 100%; width: 0; background: var(--mint); }


/* ✏️ the slide window (50's §8.22): the slide above the sheet carries its own "מעצב מחדש…" while the edit job renders */
.slideedit .fix-prev .se-shot { position: relative; display: block; height: 100%; aspect-ratio: 4 / 5; max-width: 100%; border-radius: 10px; overflow: hidden; }
.slideedit .fix-prev .se-shot img { width: 100%; height: 100%; }

/* 🧩 ✋ מיקום (50's kit, stage-b.css): a corner that doesn't go with the chosen text is not offered; its cell stays,
   empty, so the map keeps the slide's 2×2 */
.pos-map button:disabled { visibility: hidden; }