/* Blocks canvas — real renderer stickers in the palette; the strip is
   Sparky's actual rendered program image. */

.blocks-app {
  display: flex; height: 100vh; overflow: hidden;
  background: #f4f6fc;
}

/* ── Sidebar ── */
.blocks-sidebar {
  width: 250px; flex-shrink: 0; overflow-y: auto;
  background: #fff; border-right: 1px solid #e3e7f2; padding: 14px 12px 40px;
}
.blocks-title { color: var(--indigo); font-size: 22px; margin: 4px 0 0; }
.blocks-hint { font-size: 12px; color: #7a7f93; margin: 2px 0 12px; }
.palette-cat { margin-bottom: 14px; }
.palette-cat h2 {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em;
  color: #5a5f72; margin: 0 0 6px 2px;
}
.palette-blocks { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }
.blocks-loading { font-size: 13px; color: #7a7f93; }

.palette-sticker {
  height: 76px; width: auto; user-select: none; touch-action: none;
  cursor: grab; filter: drop-shadow(0 1px 2px rgba(30, 20, 70, 0.25));
}
.palette-sticker:active { cursor: grabbing; }

/* ── Main area ── */
.blocks-main { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow-y: auto; }
.blocks-toolbar { position: sticky; top: 0; z-index: 20; }
.blocks-toolbar {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px; background: #fff; border-bottom: 1px solid #e3e7f2;
}
.block-count { font-size: 13px; font-weight: 700; color: var(--indigo); min-width: 70px; }
.zoom-label { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.zoom-label input { width: 130px; }
.tool-btn {
  background: #eef0f7; color: var(--indigo); border: 1px solid #d8dcea;
  border-radius: 999px; padding: 7px 14px; font-weight: 700; font-size: 13px; cursor: pointer;
}
.tool-btn:hover { background: #e2e6f3; }

.strip-wrap { flex: none; overflow-x: auto; padding: 22px; }
.strip-box {
  --scale: 1;
  position: relative;
  display: flex; align-items: center; justify-content: flex-start;
  min-height: 240px; padding: 24px;
  background: #fff; border: 2px dashed #c9d0e6; border-radius: 16px;
}
.strip-box.drop-ok { border-color: var(--cyan); background: #f2fbfd; }
#strip-img {
  height: calc(150px * var(--scale));
  width: auto; max-width: none;
  user-select: none; touch-action: none; cursor: grab;
  transition: opacity 0.15s ease;
}
#strip-img:active { cursor: grabbing; }

/* Instant client-side preview (real sticker images, approximate joins) —
   shown immediately on every change; the exact render swaps in over it. */
.strip-preview {
  display: flex; align-items: center;
  user-select: none; touch-action: none; cursor: grab;
}
/* our display:flex overrides the HTML hidden attribute — restore it explicitly,
   otherwise the preview stays visible next to the exact render (duplicated strip) */
.strip-preview[hidden] { display: none; }
.strip-preview img {
  height: calc(150px * var(--scale));
  width: auto; max-width: none;
  user-select: none; touch-action: none;
  pointer-events: none; /* pointer handled by the container */
}
.strip-preview img + img { margin-left: calc(-10px * var(--scale)); }
.strip-preview:active { cursor: grabbing; }
.strip-empty { width: 100%; text-align: center; color: #9aa0b5; font-size: 14px; margin: 60px 0; }

/* Insertion gap indicator (overlaid on the rendered strip) */
.gap-indicator {
  position: absolute; width: 6px; border-radius: 3px;
  background: var(--cyan); box-shadow: 0 0 8px var(--cyan);
  pointer-events: none; z-index: 10;
}

/* Floating drag ghost (a real sticker image) */
.drag-ghost {
  position: fixed; z-index: 5000; pointer-events: none;
  height: 110px; width: auto;
  opacity: 0.92; transform: translate(-50%, -50%) rotate(-2deg);
  filter: drop-shadow(0 6px 10px rgba(30, 20, 70, 0.35));
}

/* ── Code views (description / pseudo / C) under the strip ── */
.code-views {
  display: flex; flex-direction: column; gap: 12px;
  padding: 0 22px 10px;
}
.code-panel {
  background: #fff; border: 1px solid #e3e7f2; border-radius: 12px;
  padding: 12px 16px;
}
.code-panel h2 {
  margin: 0 0 6px; font-size: 13px; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--indigo);
}
.cv-summary {
  margin: 0 0 10px; font-size: 19px; line-height: 1.5; font-weight: 600;
  color: #2c2f3c;
}
.cv-subhead {
  margin: 12px 0 6px; font-size: 12px; text-transform: uppercase;
  letter-spacing: 0.05em; color: #7a7f93;
}
.cv-steps { margin: 0 0 12px; padding-left: 26px; }
.cv-steps li { font-size: 16px; line-height: 1.55; color: #2c2f3c; margin-bottom: 4px; }
.cv-steps li.cv-step-loop { list-style: none; margin-left: 8px; color: #4a4f66; }
.cv-example {
  margin-top: 10px; padding: 10px 14px; border-radius: 10px;
  background: #fff8e8; border: 1px solid #f2e2b8;
  font-size: 16px; line-height: 1.5; color: #4a4230;
}
.cv-example.cv-try { background: #eefaf3; border-color: #c4e8d2; color: #2c4a38; }
.cv-badge { font-weight: 800; margin-right: 4px; }
.cv-notes { margin: 8px 0 0; font-size: 12px; color: #b0761a; }
.cv-code {
  margin: 0; padding: 10px 12px; overflow-x: auto;
  background: #f6f7fc; border-radius: 8px;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 14px; line-height: 1.5; color: #2c2f3c;
}

.blocks-footnote {
  margin: 0; padding: 8px 16px 12px; font-size: 12px; color: #8a8fa5;
}

@media (max-width: 720px) {
  .blocks-sidebar { width: 180px; }
  .palette-sticker { height: 60px; }
}