/* SimplePractice — deck builder chrome (app.html) */

/* ── Toolbar (floats over the letterboxed stage) ─────────── */
.sp-toolbar {
  position: fixed;
  top: 12px;
  right: 16px;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px 8px 18px;
  background: var(--sp-white);
  border: 1px solid var(--sp-forest-200);
  border-radius: 1000px;
  font-family: var(--sp-font-body);
  box-shadow: 0 16px 40px rgba(18, 51, 51, 0.12);
}

.sp-home { display: inline-flex; align-items: center; }
.sp-home svg { width: 24px; height: 23px; }
.sp-home:hover { opacity: 0.7; }

.sp-deck-title {
  border: 0;
  outline: 0;
  background: transparent;
  font: 500 15px/1 var(--sp-font-body);
  color: var(--sp-forest-900);
  width: 200px;
  padding: 6px 0;
}
.sp-deck-title:focus { border-bottom: 1px solid var(--sp-forest-300); }

.sp-save-state {
  font: 400 12px/1 var(--sp-font-body);
  color: var(--sp-forest-500);
  min-width: 44px;
}

.sp-toolbar-actions { display: flex; gap: 8px; }

.sp-btn-pill {
  appearance: none;
  border: 1px solid var(--sp-forest-900);
  background: var(--sp-white);
  color: var(--sp-forest-900);
  border-radius: 1000px;
  padding: 0 18px;
  height: 38px;
  font: 500 14px/1 var(--sp-font-body);
  cursor: pointer;
  white-space: nowrap;
}
.sp-btn-pill:hover { background: var(--sp-forest-100); }
.sp-btn-primary { background: var(--sp-sun-500); border-color: var(--sp-sun-500); }
.sp-btn-primary:hover { background: var(--sp-sun-400); border-color: var(--sp-sun-400); }
.sp-btn-primary[disabled] { background: var(--sp-sun-300); border-color: var(--sp-sun-300); cursor: wait; }
.sp-btn-quiet { border-color: var(--sp-forest-200); color: var(--sp-forest-600); }

/* ── Slide actions (right-center floating bar) ───────────── */
.sp-slidebar {
  position: fixed;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  background: var(--sp-white);
  border: 1px solid var(--sp-forest-200);
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(18, 51, 51, 0.12);
  font-family: var(--sp-font-body);
}
.sp-slidebar button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--sp-forest-900);
  border-radius: 12px;
  width: 64px;
  padding: 8px 0 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font: 500 10px/1 var(--sp-font-body);
  cursor: pointer;
}
.sp-slidebar button:hover { background: var(--sp-forest-100); }
.sp-slidebar button svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}
.sp-slidebar .sp-sb-danger:hover { background: var(--sp-clay-200, #FDEFEF); color: var(--sp-clay-700, #8B4D4D); }
[data-preview] .sp-slidebar { display: none; }
@media print { .sp-slidebar { display: none; } }

/* ── Editing affordances ─────────────────────────────────── */
deck-stage [contenteditable="true"] {
  border-radius: 6px;
  outline: 2px dashed transparent;
  outline-offset: 4px;
  transition: outline-color 0.15s;
  cursor: text;
}
deck-stage [contenteditable="true"]:hover { outline-color: var(--sp-forest-300); }
deck-stage [contenteditable="true"]:focus { outline: 2px solid var(--sp-forest-500); }
.on-dark [contenteditable="true"]:hover { outline-color: var(--sp-forest-600); }
.on-dark [contenteditable="true"]:focus { outline-color: var(--sp-forest-400); }

/* Add-chip button: appears when the chip row is hovered */
.chip-add {
  appearance: none;
  border: 1px dashed var(--sp-forest-300);
  background: transparent;
  color: var(--sp-forest-500);
  border-radius: 1000px;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
}
.chip-add svg { width: 28px; height: 28px; fill: currentColor; }
.chips:hover .chip-add, .chip-add:focus { opacity: 1; }
.chip-add:hover { border-color: var(--sp-forest-600); color: var(--sp-forest-800); }
@media print { .chip-add { display: none; } }

/* ── Preview mode ────────────────────────────────────────── */
[data-preview] .sp-toolbar { display: none; }
[data-preview] deck-stage [contenteditable] { pointer-events: none; outline: none !important; }
[data-preview] deck-stage image-slot { pointer-events: none; }
[data-preview] .chip-add { display: none; }
.sp-exit-preview {
  position: fixed;
  top: 12px;
  right: 16px;
  z-index: 1000;
  box-shadow: 0 16px 40px rgba(18, 51, 51, 0.12);
}
@media print { .sp-exit-preview, .sp-toolbar { display: none; } }

/* ── Layout gallery ──────────────────────────────────────── */
.sp-gallery[hidden] { display: none; }
.sp-gallery {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(18, 51, 51, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sp-font-body);
}
.sp-gallery-panel {
  background: var(--sp-white);
  border-radius: 24px;
  width: min(1180px, calc(100vw - 64px));
  max-height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sp-gallery-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px;
  border-bottom: 1px solid var(--sp-forest-100);
}
.sp-gallery-panel h2 {
  margin: 0;
  font: 400 24px/1 var(--sp-font-sans);
  letter-spacing: -0.02em;
  color: var(--sp-forest-900);
}
.sp-gal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  padding: 24px 28px 32px;
  overflow-y: auto;
}
.sp-gal-item {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--sp-font-body);
}
.sp-gal-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--sp-forest-200);
  border-radius: 12px;
  position: relative;
  pointer-events: none;
  background: var(--sp-white);
}
.sp-gal-item:hover .sp-gal-thumb { border-color: var(--sp-forest-900); box-shadow: 0 0 0 1px var(--sp-forest-900); }
.gal-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
  transform-origin: 0 0;
  /* scale set inline by app.js to fit the thumb width */
}
.gal-frame > section { width: 1920px; height: 1080px; }
.sp-gal-label {
  display: block;
  margin-top: 8px;
  font: 400 13px/1 var(--sp-font-body);
  color: var(--sp-forest-700);
}


/* ── Rich-text bubble toolbar ────────────────────────────── */
.sp-richbar {
  position: fixed;
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: var(--sp-white);
  border: 1px solid var(--sp-forest-200);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(18, 51, 51, 0.16);
  font-family: var(--sp-font-body);
}
.sp-richbar[hidden] { display: none; }
.sp-richbar button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--sp-forest-900);
  border-radius: 8px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.sp-richbar button:hover { background: var(--sp-forest-100); }
.sp-richbar button svg { width: 18px; height: 18px; fill: currentColor; }
.sp-richbar .sp-rb-sep { width: 1px; height: 20px; background: var(--sp-forest-100); margin: 0 3px; }
.sp-swatches {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  display: flex;
  gap: 6px;
  padding: 8px;
  background: var(--sp-white);
  border: 1px solid var(--sp-forest-200);
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(18, 51, 51, 0.16);
}
.sp-swatches[hidden] { display: none; }
.sp-swatches button {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--sp-forest-200);
  padding: 0;
}
.sp-swatches button.sp-sw-none {
  background:
    linear-gradient(to top left, transparent 45%, #C84545 46%, #C84545 54%, transparent 55%),
    var(--sp-white);
}
[data-preview] .sp-richbar { display: none; }
@media print { .sp-richbar { display: none; } }