/* Block Builder — Harper */

html, body, #root {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

body {
  background:
    radial-gradient(ellipse 80% 60% at 60% 40%, rgba(106, 43, 240, 0.12), transparent 60%),
    radial-gradient(ellipse 60% 50% at 30% 80%, rgba(45, 212, 160, 0.08), transparent 60%),
    var(--bg-0);
  color: var(--fg-1);
  font-family: var(--font-sans);
  user-select: none;
}

/* ---------- Stage ---------- */

.stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  cursor: grab;
}
.stage.panning { cursor: grabbing; }
.stage.placing { cursor: crosshair; }

.stage-inner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: 0 0;
  will-change: transform;
}

/* ---------- Top chrome ---------- */

.app-header {
  position: fixed;
  top: 0;
  left: 0;
  /* Clear the right-rail (320px wide + 20px margin = 340px) so scene
     tabs never slide behind the Scene Properties panel. */
  right: 360px;
  /* Auto height so the header grows when scene chips wrap to a new row,
     instead of clipping them. min-height keeps the empty header at the
     same 56px footprint it always was. */
  min-height: 56px;
  display: flex;
  /* Top-align so the first row of chips stays at a stable y-position
     regardless of how many rows the scene-tabs container has. The title
     and chips both sit on the same first-row baseline. */
  align-items: flex-start;
  gap: 16px;
  /* First-row vertical centering: padding-top puts the first row in
     line with the 56px header's natural mid-line; padding-bottom is
     just enough to give wrapped rows a little air. */
  padding: 17px 20px 12px;
  background: linear-gradient(180deg, rgba(7, 9, 12, 0.85), rgba(7, 9, 12, 0.55) 70%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 20;
  pointer-events: none;
}
.app-header > * { pointer-events: auto; }

.app-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.app-title .wm {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 18px;
  color: var(--fg-0);
  letter-spacing: -0.01em;
}
.app-title .wm em {
  color: var(--teal-400);
  font-style: normal;
}
.app-title .eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.app-title .eyebrow::before { content: '// '; color: var(--fg-3); }

.header-spacer { flex: 0 0 0; min-width: 0; }

.header-stat {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.header-stat strong {
  color: var(--teal-400);
  font-weight: 500;
  margin-right: 4px;
}

/* ---------- Zoom / action chrome (bottom right, left of right-rail) ---------- */

.zoom-dock {
  position: fixed;
  bottom: 20px;
  /* Sits to the left of the full-height right rail (320px wide + 20px gutter). */
  right: 360px;
  display: flex;
  gap: 6px;
  padding: 6px;
  background: rgba(17, 22, 29, 0.8);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  z-index: 15;
}
.zoom-btn {
  background: transparent;
  border: 0;
  color: var(--fg-2);
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  font-family: var(--font-mono);
  font-size: 14px;
}
.zoom-btn:hover { background: var(--bg-3); color: var(--fg-0); }
.zoom-readout {
  display: flex;
  align-items: center;
  padding: 0 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-2);
  border-left: 1px solid var(--border-2);
  border-right: 1px solid var(--border-2);
  margin: 0 2px;
  min-width: 52px;
  justify-content: center;
}

/* ---------- New Block panel — slides in from the right rail ---------- */

.builder {
  position: fixed;
  /* Sits flush to the right rail (320px) with a small visual gap.
     Top edge aligns with the Add Block button (top of the right rail at 20px)
     so the two panels read as a single horizontal bar. */
  top: 20px;
  right: 352px;
  width: 280px;
  max-height: calc(100vh - 40px);
  background: rgba(17, 22, 29, 0.96);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  backdrop-filter: blur(12px);
  z-index: 25;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: opacity var(--dur-med) var(--ease-out),
              transform var(--dur-med) var(--ease-out);
}
.builder.collapsed {
  opacity: 0;
  pointer-events: none;
  transform: translateX(12px);
}

.builder-plus {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--teal-400);
  cursor: pointer;
  border-radius: var(--r-lg);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  position: absolute;
  top: 0;
  left: 0;
}
.builder-plus:hover { background: rgba(45, 212, 160, 0.08); }
.builder-plus svg {
  width: 22px;
  height: 22px;
  transition: transform var(--dur-med) var(--ease-out);
}
.builder:not(.collapsed) .builder-plus svg { transform: rotate(45deg); }

.builder-body {
  padding: 0 0 16px;
  min-height: 48px;
  opacity: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  flex: 1;
  transition: opacity var(--dur-med) var(--ease-out);
}
.builder-body::-webkit-scrollbar { width: 8px; }
.builder-body::-webkit-scrollbar-track { background: transparent; }
.builder-body::-webkit-scrollbar-thumb { background: var(--bg-4); border-radius: 4px; }
.builder-body::-webkit-scrollbar-thumb:hover { background: var(--border-3); }
.builder.collapsed .builder-body { opacity: 0; pointer-events: none; }

.builder-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 16px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--teal-400);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  border-bottom: 1px solid var(--border-1);
}
.builder-title > span:first-child::before { content: '// '; color: var(--fg-3); }
.builder-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 1px solid var(--border-1);
  border-radius: 4px;
  color: var(--fg-3);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.builder-close:hover {
  color: var(--teal-400);
  border-color: rgba(45, 212, 160, 0.55);
  background: rgba(45, 212, 160, 0.08);
}
.builder-close svg { display: block; }

.builder-section {
  border-top: 1px solid var(--border-1);
  margin: 0;
  padding: 12px 16px;
}
.builder-section:first-of-type { border-top: 0; padding-top: 12px; }

.builder-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-3);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.type-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  background: var(--bg-0);
  border: 1px solid var(--border-1);
  border-radius: var(--r-md);
  padding: 3px;
}
.type-toggle button {
  background: transparent;
  border: 0;
  color: var(--fg-2);
  padding: 8px 6px;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  transition: background var(--dur-fast), color var(--dur-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.type-toggle button.active {
  background: var(--bg-3);
  color: var(--fg-0);
}
.type-toggle button:hover:not(.active) { color: var(--fg-1); }
.type-toggle button svg { width: 14px; height: 14px; }

.builder-divider {
  height: 1px;
  background: var(--border-1);
  margin: 8px -16px;
}

.builder-collapse-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: calc(100% + 32px);
  margin: 0 -16px 0;
  padding: 10px 16px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-1);
  color: var(--fg-1);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.12s ease, background 0.12s ease;
}
.builder-collapse-toggle::before {
  content: '// ';
  color: var(--fg-3);
  letter-spacing: 0;
  margin-right: -2px;
}
.builder-collapse-toggle:hover { color: var(--fg-0); background: rgba(45, 212, 160, 0.04); }
.builder-collapse-toggle.open { color: var(--teal-400); }
.builder-collapse-toggle.open::before { color: var(--teal-500); }

.builder-collapse-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--teal-400);
  transition: transform 0.18s ease;
  transform: rotate(-90deg);
}
.builder-collapse-toggle.open .builder-collapse-caret { transform: rotate(0deg); }

.builder-collapse-meta {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--fg-3);
  text-transform: none;
}
.builder-collapse-toggle.open .builder-collapse-meta { color: var(--teal-500); }

.builder-collapse-toggle + .builder-section { border-top: 0; padding-top: 12px; }

.dim-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.canvas-presets {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.canvas-preset {
  flex: 1 1 0;
  /* Fixed card height regardless of cube size inside, so the 2x and 3x
     swatches read as same-sized siblings (the larger cube SVG just
     fills more of the inner preview area). */
  height: 76px;
  appearance: none;
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: var(--r-sm);
  color: var(--fg-2);
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 10px 10px;
  overflow: hidden;
  transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
}
.canvas-preset svg {
  display: block;
  /* Clamp the iso preview so larger cubes don't blow out the card height. */
  max-width: 100%;
  max-height: 56px;
  width: auto;
  height: auto;
}
.canvas-preset-multiplier {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--fg-2);
  min-width: 18px;
  text-align: left;
}
.canvas-preset-preview {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.canvas-preset-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  line-height: 1;
}
.canvas-preset:hover { border-color: var(--border-2); color: var(--fg-0); }
.canvas-preset.active {
  background: rgba(45, 212, 160, 0.1);
  border-color: var(--teal-400);
  color: var(--teal-400);
}
.dim-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dim-cell > span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--fg-3);
  text-transform: uppercase;
  text-align: center;
}
.dim-stepper {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: stretch;
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: 6px;
  overflow: hidden;
  height: 30px;
}
.dim-stepper:focus-within,
.dim-stepper:hover {
  border-color: var(--teal-400);
}
.dim-value {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--fg-0);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 4px;
}
.dim-arrows {
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border-1);
}
.dim-arrow {
  background: transparent;
  border: 0;
  color: var(--fg-2);
  cursor: pointer;
  flex: 1;
  width: 18px;
  font-size: 8px;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dim-arrow:hover { color: var(--teal-400); background: var(--bg-2); }
.dim-arrow + .dim-arrow { border-top: 1px solid var(--border-1); }

.color-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.dim-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.dim-row:last-child { margin-bottom: 0; }

.dim-option {
  appearance: none;
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  color: var(--fg-2);
  padding: 6px;
  border-radius: var(--r-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.dim-option svg { display: block; }
.dim-option:hover { border-color: var(--border-2); }
.dim-option.active {
  background: rgba(45, 212, 160, 0.1);
  border-color: var(--teal-400);
}
.color-swatch {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--r-sm);
  border: 2px solid transparent;
  background: transparent;
  cursor: pointer;
  padding: 2px;
  transition: border-color var(--dur-fast), transform var(--dur-fast);
}
.color-swatch:hover { transform: translateY(-1px); }
.color-swatch.active {
  border-color: var(--teal-400);
  box-shadow: 0 0 0 2px rgba(45, 212, 160, 0.15);
}
.color-swatch svg {
  display: block;
  width: 100%;
  height: 100%;
}

.label-input {
  width: 100%;
  background: var(--bg-0);
  border: 1px solid var(--border-2);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: 13px;
  padding: 8px 10px;
  border-radius: var(--r-md);
  box-sizing: border-box;
  outline: none;
  transition: border-color var(--dur-fast);
}
.label-input:focus { border-color: var(--teal-400); }
.label-input::placeholder { color: var(--fg-4); }

.place-btn {
  width: 100%;
  background: var(--teal-400);
  color: var(--color-on-primary);
  border: 0;
  padding: 10px 12px;
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background var(--dur-fast);
}
.place-btn:hover { background: var(--teal-300); }
.place-btn:active { background: var(--teal-500); }
.place-btn svg { width: 14px; height: 14px; }

.hint-text {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
  line-height: 1.5;
  margin-top: 10px;
}
.hint-text::before { content: '// '; color: var(--fg-4); }

/* ---------- Right rail (full-height: Add Block btn + Canvas + Layers) ---------- */

.right-rail {
  position: fixed;
  top: 20px;
  right: 20px;
  bottom: 20px;
  width: 320px;
  background: rgba(17, 22, 29, 0.92);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  backdrop-filter: blur(12px);
  /* Above the app-header (z-index: 20) so the Add Block button at the top
     of the rail isn't dimmed by the header's blur layer. */
  z-index: 25;
  display: flex;
  flex-direction: column;
  /* Single scroll container — the whole stack (title + Canvas + Layers +
     Export) scrolls together when content exceeds the rail's height,
     instead of each section scrolling independently. */
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

/* Panel title — sits at the top of the right rail. Mirrors the
   "Animation" title on the scene-transitions panel below so the two
   read as a matched pair. Stays pinned to the top while the rail
   scrolls so the panel identity is always visible. */
.rail-panel-header {
  display: flex;
  align-items: center;
  height: 56px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border-1);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  background: rgba(17, 22, 29, 0.92);
  backdrop-filter: blur(12px);
  z-index: 2;
}
.rail-panel-title {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
}
.rail-panel-title::before { content: '// '; color: var(--fg-3); }

/* Each section (Canvas, Layers, Export) inside the rail. Sections stack
   cleanly with a single border between them — open or closed — so the
   panel reads as an orderly accordion, not a cramped overlap. */
.rail-section {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--border-1);
  min-height: 0;
  flex: 0 0 auto;
}
.rail-section-layers {
  /* Cap the layers list so it doesn't push Export off-screen when many
     blocks are present. The list itself scrolls inside this cap. */
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
.rail-section-layers .layers-list {
  max-height: 100%;
  overflow-y: auto;
}
.rail-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Fixed header height so every section header — open or closed —
     occupies exactly the same vertical real estate. Prevents the rail
     from "jumping" when sections expand/collapse. */
  height: 44px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border-1);
  /* Make the header itself a clickable button. */
  background: transparent;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  width: 100%;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
  transition: background var(--dur-fast) var(--ease-out);
}
.rail-section-header:hover { background: rgba(45, 212, 160, 0.04); }
.rail-section.closed .rail-section-header { border-bottom-color: transparent; }
.rail-section-title {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--teal-400);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.rail-section-title::before { content: ''; }
.rail-section-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-3);
  transform: rotate(0deg);
  transition: transform var(--dur-med) var(--ease-out), color var(--dur-fast);
}
.rail-section.closed .rail-section-caret { transform: rotate(-90deg); }
.rail-section-header:hover .rail-section-caret { color: var(--teal-400); }
.rail-section-body {
  padding: 12px 16px;
}

/* Layers list (now lives inside .rail-section-layers). The list flows
   inline with the other rail sections — the rail itself is the single
   scroll container, so the list sizes to its content with no internal
   scroll cap. */
.layers-list {
  padding: 6px;
}
.layers-empty {
  padding: 24px 16px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
  line-height: 1.6;
}
.layer-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--dur-fast);
}
.layer-row:hover { background: var(--bg-3); }
.layer-row.selected {
  background: rgba(45, 212, 160, 0.08);
  outline: 1px solid rgba(45, 212, 160, 0.35);
}
.layer-drag {
  color: var(--fg-4);
  cursor: grab;
}
.layer-drag:active { cursor: grabbing; }
.layer-swatch {
  position: relative;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  flex-shrink: 0;
  padding: 0;
  cursor: pointer;
}
.layer-swatch.open {
  outline: 2px solid var(--teal-400);
  outline-offset: 2px;
}
/* Diamond variant — for the accent block's swatch in the layer list.
   Rotates the square 45° so it reads as a diamond, visually flagging the
   accent row. The swatch keeps its size; we just rotate the inner square. */
.layer-swatch.diamond {
  transform: rotate(45deg);
  border-radius: 2px;
}
.layer-swatch.diamond.open {
  outline-offset: 3px;
}
/* The accent layer row gets a subtle teal tint at the very top of the
   list, plus a top border to separate it from the regular blocks. */
.layer-row.accent {
  background: linear-gradient(
    to right,
    color-mix(in oklab, var(--teal-400) 10%, transparent),
    transparent 70%
  );
  border-bottom: 1px dashed color-mix(in oklab, var(--teal-400) 40%, transparent);
}
.layer-row.accent.selected {
  background: linear-gradient(
    to right,
    color-mix(in oklab, var(--teal-400) 22%, transparent),
    color-mix(in oklab, var(--teal-400) 6%, transparent) 80%
  );
}

/* AI-suggested accent alternatives — small horizontal chip strip rendered
   directly under the accent layer row when /SceneAgent returned alternatives.
   Click a chip to promote that {color, label} into the accent slot. */
.accent-suggestions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px 14px 10px 14px;
  border-bottom: 1px dashed color-mix(in oklab, var(--teal-400) 30%, transparent);
  background: color-mix(in oklab, var(--teal-400) 4%, transparent);
}
.accent-suggestions-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-4, #6e7681);
  margin-right: 2px;
}
.accent-suggestion-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  background: rgba(33, 38, 45, 0.6);
  border: 1px solid var(--border-1, #30363d);
  color: var(--fg-2, #c9d1d9);
  font-family: var(--font-sans);
  font-size: 11px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.accent-suggestion-chip:hover {
  background: rgba(56, 62, 70, 0.85);
  border-color: var(--teal-400);
  color: var(--fg-1, #f0f6fc);
}
.accent-suggestion-chip:focus-visible {
  outline: 1px solid var(--teal-400);
  outline-offset: 2px;
}
.accent-suggestion-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  transform: rotate(45deg);
}

/* Accent-mode toggle in the New Block panel (above Dimensions) */
.accent-toggle-section { padding-top: 14px; padding-bottom: 14px; }
.accent-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  padding: 10px 12px;
  color: var(--fg-1);
  cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast);
  text-align: left;
}
.accent-toggle:hover { background: var(--bg-3); }
.accent-toggle.on {
  background: color-mix(in oklab, var(--teal-400) 10%, var(--bg-2));
  border-color: var(--teal-400);
  color: var(--fg-0);
}
.accent-toggle-track {
  position: relative;
  flex: 0 0 auto;
  width: 30px;
  height: 18px;
  background: var(--bg-3);
  border: 1px solid var(--border-2);
  border-radius: 999px;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.accent-toggle.on .accent-toggle-track {
  background: var(--teal-500);
  border-color: var(--teal-400);
}
.accent-toggle-thumb {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 14px;
  height: 14px;
  background: var(--fg-0);
  border-radius: 999px;
  transition: transform var(--dur-fast);
}
.accent-toggle.on .accent-toggle-thumb { transform: translateX(12px); }
.accent-toggle-labels {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.accent-toggle-name {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.accent-toggle-hint {
  font-size: 10px;
  color: var(--fg-3);
  letter-spacing: 0.01em;
}
.accent-toggle.on .accent-toggle-hint { color: var(--teal-200); }
.layer-label-input {
  flex: 1;
  font: inherit;
  font-size: 13px;
  color: var(--fg-0);
  background: var(--bg-3);
  border: 1px solid var(--teal-400);
  border-radius: 4px;
  padding: 2px 6px;
  outline: none;
  min-width: 0;
}
.layer-popover {
  z-index: 50;
  background: var(--bg-1);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  padding: 8px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.5);
  cursor: default;
}
.layer-popover-color {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  width: 130px;
}
.layer-popover-size { /* sized by content */ }
.layer-popover-size .dim-row { margin-bottom: 6px; }
.layer-popover-size .dim-row:last-child { margin-bottom: 0; }
.dim-btn { padding: 4px; }
.dim-btn.active { background: rgba(45, 212, 160, 0.15); color: var(--teal-400); }
.dim-btn svg { width: auto; height: auto; }
.layer-label {
  flex: 1;
  font-size: 13px;
  color: var(--fg-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.layer-type {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.layer-actions {
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity var(--dur-fast);
}
.layer-row:hover .layer-actions, .layer-row.selected .layer-actions { opacity: 1; }
.icon-btn {
  background: transparent;
  border: 0;
  color: var(--fg-3);
  width: 22px;
  height: 22px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.icon-btn:hover { background: var(--bg-4); color: var(--fg-1); }
.icon-btn.danger:hover { color: var(--color-danger); }
.icon-btn svg { width: 13px; height: 13px; }

/* ---------- Ghost / preview ---------- */
.ghost {
  pointer-events: none;
  opacity: 0.65;
  filter: drop-shadow(0 0 12px rgba(45, 212, 160, 0.4));
}

/* ---------- Bottom-left footer (logout + key hints) ---------- */
/* Anchor to bottom-left so we never collide with the zoom dock on the right. */
.bottom-bar {
  position: fixed;
  bottom: 20px;
  left: 20px;
  display: flex;
  gap: 10px;
  align-items: center;
  z-index: 13;
}
.logout-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  background: rgba(17, 22, 29, 0.7);
  border: 1px solid var(--border-1);
  border-radius: var(--r-pill);
  backdrop-filter: blur(8px);
  color: var(--fg-3);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.logout-btn:hover {
  color: var(--fg-1, #f0f6fc);
  border-color: var(--border-2);
  background: rgba(33, 38, 45, 0.85);
}
.logout-btn:focus-visible {
  outline: 1px solid var(--primary, #00d4aa);
  outline-offset: 2px;
}
.logout-btn svg {
  flex-shrink: 0;
}
.key-hints {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 8px 14px;
  background: rgba(17, 22, 29, 0.7);
  border: 1px solid var(--border-1);
  border-radius: var(--r-pill);
  backdrop-filter: blur(8px);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
}
.key-hints kbd {
  display: inline-block;
  background: var(--bg-3);
  border: 1px solid var(--border-2);
  border-radius: 4px;
  padding: 1px 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-2);
  margin-right: 3px;
}

/* ---------- SVG block text ---------- */
.block-label {
  font-family: var(--font-sans);
  font-weight: 700;
  fill: #ffffff;
  paint-order: stroke;
  stroke: rgba(0,0,0,0.25);
  stroke-width: 0.5;
  pointer-events: none;
}


/* New-Block-panel tabs (Primary / Accent / External). Replaces the old
   single accent-toggle row. Sits in its own builder-section at the top. */
.builder-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  border-top: 1px solid var(--border-1);
  padding: 12px 16px;
}
.builder-section + .builder-tabs,
.builder-tabs:first-of-type { border-top: 0; padding-top: 12px; }
.builder-tab {
  appearance: none;
  border: 1px solid var(--border-1);
  background: var(--bg-2);
  color: var(--fg-2);
  border-radius: 6px;
  padding: 7px 6px;
  font: 600 11px/1 var(--font-sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.builder-tab:hover { background: var(--bg-3); color: var(--fg-1); }
.builder-tab.active {
  background: color-mix(in oklab, var(--teal-400) 14%, var(--bg-2));
  border-color: var(--teal-400);
  color: var(--fg-0);
}

/* External-block direction picker. 2x2 grid of swatches showing the side
   of the canvas the external block sits on. */
.ext-dir-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.ext-dir-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.ext-dir-option:hover:not(.full) { background: var(--bg-3); }
.ext-dir-option.active {
  background: color-mix(in oklab, var(--teal-400) 12%, var(--bg-2));
  border-color: var(--teal-400);
}
.ext-dir-option.full {
  opacity: 0.45;
  cursor: not-allowed;
}
.ext-dir-option svg { flex: 0 0 auto; }
.ext-dir-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font: 600 11px/1.1 var(--font-sans);
  color: var(--fg-1);
  letter-spacing: 0.02em;
  min-width: 0;
}
.ext-dir-count {
  font-size: 10px;
  font-weight: 500;
  color: var(--fg-3);
  letter-spacing: 0.01em;
}
.ext-dir-option.active .ext-dir-label { color: var(--fg-0); }

.place-btn:disabled {
  background: var(--bg-3);
  color: var(--fg-4);
  cursor: not-allowed;
}
.place-btn:disabled:hover { background: var(--bg-3); }


/* Subsection headers in the Layers list — only rendered when both
   primary blocks AND externals exist. Same vocabulary as the Canvas/
   Layers section headers but smaller and inline. */
.layers-subhead {
  font: 600 10px/1 var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
  padding: 10px 8px 6px;
  border-top: 1px solid var(--border-1);
  margin-top: 4px;
}
.layers-subhead:first-child {
  border-top: 0;
  margin-top: 0;
  padding-top: 6px;
}

/* External-row tweaks — dim the swatch since externals are warm-gray
   and should read as a quieter group than primaries. */
.layer-row.external .layer-swatch {
  border-radius: 3px;
}

/* Add Block action row — pinned to the bottom of the layers list as
   dashed teal outline, "+" affordance, no swatch. The row is visually
   distinct from the data rows above (which represent real blocks) so
   it's clear this is an action, not a layer. */
.layers-add-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: calc(100% - 4px);
  margin: 6px 2px 4px;
  padding: 9px 10px;
  background: transparent;
  border: 1px dashed rgba(45, 212, 160, 0.45);
  border-radius: var(--r-sm);
  color: var(--teal-400);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.layers-add-row:hover {
  background: rgba(45, 212, 160, 0.08);
  border-color: rgba(45, 212, 160, 0.75);
  color: #d8fff0;
}
.layers-add-row.open {
  background: rgba(45, 212, 160, 0.14);
  border-style: solid;
  border-color: rgba(45, 212, 160, 0.65);
  color: #d8fff0;
}
.layers-add-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(45, 212, 160, 0.20);
  color: #fff;
  flex-shrink: 0;
  transition: transform var(--dur-med) var(--ease-out), background var(--dur-fast);
}
.layers-add-row:hover .layers-add-icon { background: rgba(45, 212, 160, 0.45); }
.layers-add-row.open .layers-add-icon {
  /* Rotate the "+" to an "x" when the panel is open or a placement
     is armed — doubles as a clear "click to close/cancel" affordance. */
  transform: rotate(45deg);
  background: rgba(45, 212, 160, 0.55);
}
.layers-add-icon svg { display: block; }
.layers-add-label { line-height: 1; }

/* Side-picker popover (4 dirs, same shape as the New Block panel) */
.layer-popover-side { padding: 10px; min-width: 220px; }

/* Font-size button — shows "Aa" glyph; tracks active state like other layer-action icons. */
.font-btn { padding: 0 4px; }
.font-btn-glyph {
  font-family: var(--font-display), 'Acumin Pro', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: -0.02em;
  line-height: 1;
}
.font-btn.active { background: rgba(45, 212, 160, 0.15); color: var(--teal-400); }

/* Font-size slider popover */
.layer-popover-font {
  padding: 10px 12px;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.font-popover-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.font-popover-min, .font-popover-max {
  font-family: var(--font-display), 'Acumin Pro', sans-serif;
  font-weight: 700;
  color: var(--fg-2);
  line-height: 1;
}
.font-popover-min { font-size: 11px; }
.font-popover-max { font-size: 18px; }
.font-popover-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: var(--bg-4);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.font-popover-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--teal-400);
  border: 2px solid var(--bg-1);
  cursor: pointer;
}
.font-popover-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--teal-400);
  border: 2px solid var(--bg-1);
  cursor: pointer;
}
.font-popover-reset {
  flex: 1;
  background: transparent;
  border: 1px solid var(--bg-4);
  border-radius: 4px;
  color: var(--fg-2);
  font-size: 11px;
  font-family: var(--font-mono), monospace;
  padding: 4px 8px;
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.font-popover-reset:hover {
  background: var(--bg-4);
  color: var(--fg-1);
  border-color: var(--fg-3);
}
.layer-popover-side .ext-dir-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}


/* Accent-tab color swatches — rotate the entire button 45° so each
   swatch reads as a diamond, visually echoing the accent block's tilt.
   We add extra row gap so the rotated corners don't collide with the
   neighbours above/below. */
.color-grid.diamond {
  gap: 14px 10px;
  padding: 6px 8px 10px;
}
.color-swatch.diamond {
  transform: rotate(45deg);
  transition: transform var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.color-swatch.diamond:hover { transform: rotate(45deg) translateY(-1px); }
.color-swatch.diamond.active {
  /* Override the .active rule's transform reset so the diamond stays
     tilted when selected. */
  transform: rotate(45deg);
}

/* ---------- Export section (right rail) ---------- */

.export-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.export-btn {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: var(--r-sm);
  color: var(--fg-1);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
}
.export-btn:hover {
  border-color: var(--teal-400);
  color: var(--fg-0);
  background: color-mix(in oklab, var(--teal-400) 8%, var(--bg-2));
}
.export-btn:active { transform: translateY(1px); }
.export-btn.flash {
  border-color: var(--teal-400);
  background: color-mix(in oklab, var(--teal-400) 22%, var(--bg-2));
  color: #fff;
}
.export-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: 6px;
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  color: var(--teal-400);
}
.export-btn:hover .export-btn-icon { color: var(--teal-300); border-color: var(--teal-400); }
.export-btn-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.export-btn-label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
}
.export-btn-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-3);
  letter-spacing: 0.04em;
  line-height: 1;
}
.export-btn:hover .export-btn-sub { color: var(--fg-2); }

.export-hint {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-3);
  letter-spacing: 0.02em;
  line-height: 1.4;
}

/* Section labels inside the Export panel. The first label sits flush
   to the rail-section-body padding; subsequent labels need a top
   gap to separate the Crop and Type subsections. */
.export-section-label {
  margin-bottom: 6px;
}
.export-section-label + .export-mode-toggle,
.export-section-label + .export-grid {
  margin-top: 0;
}
.export-mode-toggle + .export-section-label,
.export-hint + .export-section-label {
  margin-top: 12px;
}

/* Crop-mode toggle (segmented). Sits above the PNG/SVG buttons. Uses
   the same border/teal-tint vocabulary as .builder-tab. */
.export-mode-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 4px;
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: var(--r-sm);
}
.export-mode-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: calc(var(--r-sm) - 2px);
  color: var(--fg-3);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast);
}
.export-mode-btn:hover { color: var(--fg-1); }
.export-mode-btn.on {
  color: var(--fg-0);
  background: color-mix(in oklab, var(--teal-400) 14%, var(--bg-2));
  border-color: var(--teal-400);
}
.export-mode-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
  flex: 0 0 auto;
}

/* The Export section sits below Layers — give it a top border so it
   reads as a distinct section rather than visually merging with the
   (flex-grow) Layers list above it. */
.rail-section-export { border-bottom: 0; }