/* ============================================================
   CARDRENDER — UI for save buttons, previews, in-card canvases
   ============================================================ */

.cr-save-btn {
  font-family: var(--sans, sans-serif);
  font-size: 0.82rem; font-weight: 600;
  cursor: pointer; border-radius: 8px;
  border: 1px solid var(--rule, #231F1A);
  background: var(--ink, #0E1116); color: var(--paper, #FAF6EC);
  padding: 0.45rem 0.85rem;
}
.cr-save-btn:hover { background: var(--accent, #C84B31); border-color: var(--accent, #C84B31); }
.cr-save-btn.ghost { background: transparent; color: var(--ink, #0E1116); }
.cr-save-btn.ghost:hover { background: var(--ink, #0E1116); color: var(--paper, #FAF6EC); }

/* a canvas rendered in place of a missing PNG */
canvas.card-sheet-img, canvas.adv-cover-img, canvas.cr-incard {
  display: block; width: 100%; height: auto; border-radius: 8px;
}

/* lightbox preview */
.cr-lightbox {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(14,17,22,0.82);
  display: flex; align-items: center; justify-content: center; padding: 1.2rem;
}
.cr-lightbox-inner {
  display: flex; flex-direction: column; align-items: center; gap: 0.8rem;
  max-height: 92vh;
}
.cr-preview {
  max-width: min(78vw, 460px); max-height: 78vh; width: auto; height: auto;
  border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
.cr-bar { display: flex; gap: 0.6rem; }

/* a small save control row under content */
.cr-actions { display: flex; gap: 0.5rem; margin-top: 0.6rem; flex-wrap: wrap; align-items: center; }

/* maker bar: a note input that steers the next image/video + action buttons */
.cr-maker { margin-top: 0.6rem; display: flex; flex-direction: column; gap: 0.4rem; }
.cr-maker .cr-actions { margin-top: 0; }
.cr-note {
  width: 100%; font-family: var(--sans, sans-serif); font-size: 0.82rem;
  padding: 0.45rem 0.6rem; border-radius: 8px;
  border: 1px solid var(--ruleSoft, #C9C3B4); background: #fff; color: var(--ink, #0E1116);
}
.cr-note:focus { outline: 2px solid var(--accent, #C84B31); outline-offset: 1px; }

/* version pills (named image versions; hover = full prompt; × deletes) */
.cr-versions { margin-top: 0.6rem; }
.cr-pills { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.4rem; }
.cr-pill {
  display: inline-flex; align-items: center; overflow: hidden;
  border: 1px solid var(--ruleSoft, #C9C3B4); border-radius: 999px; background: #fff;
}
.cr-pill.active { border-color: var(--accent, #C84B31); box-shadow: inset 0 0 0 1px var(--accent, #C84B31); }
.cr-pill-label {
  font-family: var(--sans, sans-serif); font-size: 0.74rem; cursor: pointer;
  padding: 0.25rem 0.55rem; background: none; border: none; color: var(--ink, #0E1116);
  max-width: 12rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cr-pill-del {
  border: none; background: none; color: var(--muted, #6B6B6B); cursor: pointer;
  padding: 0 0.45rem 0 0.1rem; font-size: 0.95rem; line-height: 1;
}
.cr-pill-del:hover { color: var(--accent, #C84B31); }

/* art-engine picker */
.cr-provider {
  font-family: var(--sans, sans-serif); font-size: 0.82rem; font-weight: 600;
  color: var(--ink, #0E1116); display: inline-flex; align-items: center; gap: 0.4rem;
}
.cr-provider select {
  font-family: var(--sans, sans-serif); font-size: 0.82rem;
  padding: 0.35rem 0.5rem; border-radius: 8px; border: 1px solid var(--rule, #231F1A);
  background: var(--paper, #FAF6EC); color: var(--ink, #0E1116); cursor: pointer;
}

/* beat video (final step) */
.beat-video-status {
  font-family: var(--mono, monospace); font-size: 0.8rem; color: var(--muted, #6B6B6B);
  margin: 0.6rem 0 0.3rem;
}
.beat-video {
  width: 100%; max-width: 420px; height: auto; display: block;
  border-radius: 12px; border: 1px solid var(--ruleSoft, #C9C3B4);
  box-shadow: 0 2px 12px rgba(0,0,0,0.12);
}