/* ─────────────────────────────────────────────────────────────────
   css/insertion-line.css
   "Notion-style" insertion line + circular "+" affordance.

   B.W2 — universal Add affordance for the TinkySpeak builder.
   Owned by /js/builder/insertion-line.js.

   Visual contract:
     • soft blue 4px horizontal line spanning the grid's width
     • circular "+" button at the line's center (28-32px)
     • visible focus ring for keyboard users
     • fade in/out via opacity 100ms (respect prefers-reduced-motion)
     • z-index above tiles (.tile is local stacking) but below modals
       (the BottomSheet primitive uses z-index ~9990; we sit at 50)
   ───────────────────────────────────────────────────────────────── */

.insertion-line {
  /* The element is absolutely positioned by the JS mount; coords are
     written inline (top, left, width). We OWN visual style only. */
  position: absolute;
  height: 4px;
  background: #4A90E2;            /* soft blue, matches builder primary */
  border-radius: 2px;
  opacity: 0;                     /* invisible until JS toggles .visible */
  transition: opacity 100ms ease-out;
  pointer-events: none;           /* don't steal hover from tiles */
  z-index: 50;                    /* above grid items, below modals */
  /* Subtle glow so it reads as "live drop target" not just a strip */
  box-shadow: 0 0 8px rgba(74, 144, 226, 0.45);
}

.insertion-line.visible {
  opacity: 1;
  pointer-events: auto;           /* once visible, allow clicks on "+" */
}

.insertion-line__plus {
  /* Centered both ways on the 4px line. */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #4A90E2;
  color: #ffffff;
  border: 2px solid #ffffff;
  cursor: pointer;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  /* Smooth hover bump unless user opted out. */
  transition: transform 100ms ease-out, background 100ms ease-out;
}

.insertion-line__plus:hover {
  background: #2E5090;            /* deeper blue on hover */
  transform: translate(-50%, -50%) scale(1.08);
}

.insertion-line__plus:focus-visible {
  /* Visible focus ring for keyboard users — required for a11y. */
  outline: 3px solid #FFD700;
  outline-offset: 3px;
}

.insertion-line__plus:active {
  transform: translate(-50%, -50%) scale(0.95);
}

@media (prefers-reduced-motion: reduce) {
  .insertion-line {
    transition: none;
  }
  .insertion-line__plus {
    transition: none;
  }
  .insertion-line__plus:hover {
    transform: translate(-50%, -50%);
  }
  .insertion-line__plus:active {
    transform: translate(-50%, -50%);
  }
}