/*
 * Builder insert gaps — hairline hover zones between question cards
 * on the builder canvas.
 *
 * The "+" button is invisible until the gap row (or the button itself)
 * is hovered/focused, so the canvas stays visually calm at rest.
 */

.builder-insert-gap {
  position: relative;
  height: 8px;
  /* Lift the gap (and its absolutely-positioned "+") above the
     adjacent block's outline. Without this, default paint order is
     gap_above → block → gap_below, so the selected block's orange
     outline paints OVER the top gap's "+" but UNDER the bottom
     gap's "+" — visible asymmetry: top button looks clipped/behind
     the line, bottom looks clean. Both gaps competing for z-index 1
     against the block's z-index auto (0) puts both on top. */
  z-index: 1;
}

.builder-insert-gap__btn {
  position: absolute;
  /* Pin the "+" centre to the chrome pill's centre (= drag-handle
     centre). Chrome outer width = padding 4px + border 1px +
     chrome-btn 24px + border 1px + padding 4px = 34px → centre at
     `block_left − 17px`. The gap is a sibling of blocks (same left
     edge), so `right: 100%` places the "+"'s right edge at
     `gap_left = block_left`. The "+" itself is 24px wide (centre
     12px from the right edge), so an extra 5px leftward push lands
     its centre at `block_left − 17px`. */
  top: 50%;
  right: 100%;
  margin-right: 5px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--tblr-border-color);
  border-radius: 999px;
  background: var(--tblr-bg-surface);
  color: var(--tblr-secondary);
  opacity: 0;
  transition: opacity 120ms ease-in-out,
              color 120ms ease-in-out,
              background-color 120ms ease-in-out;
}

/* Hover-reveal — the + button becomes visible only when its gap row
   (or the button itself) is hovered or focused. Selection no longer
   surfaces adjacent + buttons; the toolbar "Add content" action
   covers the "insert after the selected block" case. */
.builder-insert-gap:hover .builder-insert-gap__btn,
.builder-insert-gap__btn:focus-visible {
  opacity: 1;
}

/* The floating gap-+ between / above / below blocks is now the
   primary insertion affordance (the chrome + button was removed in
   the form-editor refactor). The gap <div>s also serve as drag-drop
   targets — keep the visible + shown. */
.builder-insert-gap--persistent { height: 32px; }