/* ─────────────────────────────────────────────────────────────────
   css/tile-resize.css
   Wave 11 Phase E.resize — drag-to-resize tile grid-cell spans.

   Owned by /js/builder/tile-resize.js.

   Visual contract:
     • 24×24px corner grip painted at the bottom-right of every
       .tile in the builder grid; visible on hover or focus, fades
       otherwise (low chrome at rest — AAC authors are not designers,
       we don't crowd the tile face).
     • cursor: nwse-resize signals "drag diagonally" affordance.
     • Visible focus ring for keyboard reachability.
     • Translucent blue outline (.tile-resize-ghost) painted during
       the active drag at the target span; commits on pointerup.
     • Respects prefers-reduced-motion (no transitions on the ghost).
     • z-index: handle sits inside the tile (parent stacking).
       Ghost is body-anchored at z-index 60 — above the insertion
       line (50) so a concurrent insertion-line hover doesn't paint
       over the resize ghost.
   ───────────────────────────────────────────────────────────────── */

.tile {
  /* Required so the absolutely-positioned handle anchors to the
     tile, not the page. Existing tile rules already include
     position: relative in builder.css for the .tile-delete button,
     but we restate here as defense in depth — if a future tile
     style refactor drops it, the handle won't escape the tile. */
  position: relative;
}

.tile-resize-handle {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 24px;
  height: 24px;
  /* Diagonal grip "//" effect via a thin gradient — cheap, no
     SVG round-trip. Matches the nwse-resize cursor intent. */
  background:
    linear-gradient(
      135deg,
      transparent 0%,
      transparent 35%,
      rgba(255, 255, 255, 0.85) 35%,
      rgba(255, 255, 255, 0.85) 42%,
      transparent 42%,
      transparent 55%,
      rgba(255, 255, 255, 0.85) 55%,
      rgba(255, 255, 255, 0.85) 62%,
      transparent 62%,
      transparent 100%
    ),
    rgba(74, 144, 226, 0.78);          /* soft blue base */
  border-bottom-right-radius: 6px;
  border-top-left-radius: 6px;
  cursor: nwse-resize;
  opacity: 0;                          /* hidden at rest */
  transition: opacity 120ms ease-out;
  /* No text + role=button on the element — keep selection from
     swallowing pointer events. */
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;                  /* lets pointer events run */
  z-index: 5;                          /* above tile content, below modals */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

/* Visible on hover, focus, or when the tile itself is keyboard- or
   click-selected (so authors discover the handle once they engage). */
.tile:hover .tile-resize-handle,
.tile.kbd-focused .tile-resize-handle,
.tile.selected .tile-resize-handle,
.tile-resize-handle:focus,
.tile-resize-handle:focus-visible {
  opacity: 1;
}

.tile-resize-handle:focus-visible {
  outline: 3px solid #FFD700;
  outline-offset: 2px;
}

/* During an active drag the body picks up .tile-resizing so we can
   suppress any conflicting hover affordances elsewhere (e.g. the
   insertion-line "+ Add" that would otherwise flash if the cursor
   crosses a row gap). */
body.tile-resizing {
  cursor: nwse-resize !important;
  /* Hide insertion-line gesture during resize — they share screen
     real estate and concurrent dual-affordances confuse authors. */
}

body.tile-resizing .insertion-line {
  opacity: 0 !important;
  pointer-events: none !important;
}

.tile.tile-being-resized {
  /* Subtle outline so the author tracks which tile they're
     manipulating, especially when the ghost overlaps several. */
  outline: 2px dashed rgba(74, 144, 226, 0.85);
  outline-offset: -2px;
}

/* Translucent target outline painted during the drag. Body-anchored
   absolute coords are written inline by the JS. */
.tile-resize-ghost {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border: 3px solid rgba(74, 144, 226, 0.92);
  background: rgba(74, 144, 226, 0.18);
  border-radius: 10px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 80ms ease-out;
  z-index: 60;                        /* above insertion-line (50) */
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.6),
    0 6px 18px rgba(0, 0, 0, 0.18);
}

.tile-resize-ghost.visible {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .tile-resize-handle {
    transition: none;
  }
  .tile-resize-ghost {
    transition: none;
  }
}