/* V3: v3-editor styles (loaded after styles.css). */

/* ---------- context bar: swap mode prompt ---------- */

.context-bar__prompt {
  flex: none; align-self: center;
  padding: 0 4px 0 2px;
  color: var(--text); font-size: 13.5px; font-weight: 700; white-space: nowrap;
}

/* ---------- font picker: a peek sheet that keeps the design visible ---------- */

.sheet-layer.sheet-layer--peek { background: transparent; }
.sheet.sheet--peek {
  max-height: 46svh;
  padding-top: 8px;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45);
}
.sheet--peek::before { margin-bottom: 8px; }
.sheet__bar {
  position: sticky; top: -8px; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: -8px -18px 8px; padding: 8px 18px;
  background: var(--raised);
}
.sheet__bar .sheet__title { margin: 0; font-size: 17px; }
.sheet--peek .panel__tabs { position: sticky; top: 44px; z-index: 1; background: var(--raised); padding-top: 2px; }
.sheet--peek .font-btn { min-height: 44px; }

@media (min-width: 700px) {
  /* Wider screens: the sheet sits at the side instead of over the design. */
  .sheet-layer.sheet-layer--peek { align-items: stretch; justify-content: flex-end; padding: 0; }
  .sheet.sheet--peek {
    width: 380px; max-width: 100%; max-height: none; height: 100%;
    border-radius: 0; padding-bottom: 20px;
    box-shadow: -20px 0 50px rgba(0, 0, 0, 0.45);
  }
  .sheet--peek::before { display: none; }
}

/* ---------- stickers: steady panel height and friendly empty states ---------- */

.sticker-body { min-height: 212px; }
.empty-note {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 212px; padding: 16px;
  border: 1px dashed var(--line-strong); border-radius: 14px;
  color: var(--muted); font-size: 13px; text-align: center; text-wrap: pretty;
}
.empty-note b { color: var(--text); font-size: 14.5px; }
.empty-note .btn { margin-top: 6px; }
.empty-note__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--raised-2); color: var(--muted); }
.empty-note__icon .i { width: 20px; height: 20px; }

/* ---------- text panel ---------- */

.auto-color { margin-bottom: 8px; }
/* Many animation choices: wrap instead of overflowing on phones. */
.panel .segmented { flex-wrap: wrap; }
.panel .segmented button { flex: 1 0 auto; }

/* ---------- music ---------- */

.track .track__play { flex: none; width: 44px; height: 44px; margin-left: auto; }
.track__text { min-width: 0; flex: 1; }
.track__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- context buttons: finger-sized on phones ---------- */

@media (pointer: coarse) {
  .context-bar .btn--small { min-height: 40px; }
}