/* ─────────────────────────────────────────────────────────────────
   css/abs-canvas.css

   Free-Canvas Phase 2 — T2.1 editor CONTROLLER chrome.

   This stylesheet owns ONLY the editor's own overlay chrome (the thin
   selection outline painted by abs-canvas-core.js). Tile geometry and
   the canvas box itself are styled by the renderer's injected
   `#tile-abs-styles` (row-renderer-absolute.js) — we never restyle
   tiles or positions here, so authoring geometry stays single-source.

   The outline is pointer-events:none so it can NEVER steal a pointer
   from the drag/resize modules (T2.3/T2.4) that sit on the tiles
   underneath it.

   LABEL: PROTOTYPE (Free-Canvas authoring is PROTOTYPE).
   ───────────────────────────────────────────────────────────────── */

/* The selection outline is an absolutely-positioned sibling of the
   `.tile-abs` wrappers, inside `.tile-abs-canvas` (position:relative).
   abs-canvas-core.js copies the selected wrapper's left/top/width/height
   onto it, so it tracks the renderer's geometry exactly. */
.tile-abs-canvas .abs-sel-outline {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  box-sizing: border-box;
  /* Non-interactive chrome: drag/resize handles live on the tile below. */
  pointer-events: none;
  /* Sit above tiles but below any handles the geometry modules add
     (those use higher z-indices or render outside the canvas). */
  z-index: 5;
  /* Hidden until the controller adds .visible. */
  display: none;
  border: 2px solid #2f6fed;
  border-radius: 6px;
  /* Soft halo so the outline reads on both light tiles and white bg. */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9),
              0 0 0 4px rgba(47, 111, 237, 0.18);
}

.tile-abs-canvas .abs-sel-outline.visible {
  display: block;
}

/* Respect reduced-motion: the outline is static (no transition) by
   default, but guard against any future animated state. */
@media (prefers-reduced-motion: reduce) {
  .tile-abs-canvas .abs-sel-outline {
    transition: none !important;
  }
}