/* =====================================================================
   Cut up a poem: los textos, la mesa con los recortes y la hoja.
   Pasos, botones, editor, lámina e impresión vienen de css/catch-poem.css.
   ===================================================================== */
.post .prose + .cp-step { margin-top: var(--space-5xl); }

/* ---------- 1 · Los textos ---------- */
.cl-inputs { display: grid; gap: var(--space-xl); }
.cl-input { position: relative; }
.cl-input .cp-field { margin: 0; }
.cl-input textarea { height: var(--cl-input-h); }
.cl-remove {
  position: absolute; top: 0; right: 0;
  padding: 0; font: inherit; font-size: var(--text-sm); color: var(--color-text-soft);
  background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: var(--underline-offset);
}
.cl-remove:hover { color: var(--color-accent); }
.cl-remove:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

/* ---------- 2 · La mesa ---------- */
.cl-table {
  position: relative; overflow: hidden;
  background: var(--color-wash); border-block: var(--border-hair) solid var(--color-rule);
  user-select: none; -webkit-user-select: none;
}
.cl-table.hand, .cl-table.hand * { cursor: none; }
.cl-sheet {
  position: absolute;
  background: var(--color-light); border: var(--border-hair) solid var(--color-rule);
  box-shadow: var(--cl-shadow);
}

/* un recorte: el papel (con los bordes cortados a tijera) dentro de un marco que gira y da la sombra */
.cl-piece {
  position: absolute; top: 0; left: 0;
  filter: drop-shadow(var(--cl-shadow));
  transform: rotate(var(--rot, 0deg)) scale(var(--lift, 1));
  transition: transform var(--dur-fast) var(--ease), filter var(--dur-fast) var(--ease);
  touch-action: none; cursor: grab;
}
.cl-piece .paper { padding: 0.18em 0.45em 0.12em; white-space: nowrap; line-height: var(--leading-tight); }
.cl-piece.lifted { --lift: 1.08; filter: drop-shadow(var(--cl-shadow-lifted)); cursor: grabbing; }
/* con la mano dibujada, ningún otro cursor (tampoco el de «agarrar» del sistema) */
.cl-table.hand .cl-piece, .cl-table.hand .cl-piece.lifted { cursor: none; }
.cl-piece:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

/* la mano: abierta, y cerrada mientras sujeta un recorte; cambia con un pequeño gesto */
.cl-hand {
  position: absolute; z-index: var(--z-chrome); top: 0; left: 0;
  width: var(--cl-hand); height: var(--cl-hand); margin: calc(var(--cl-hand) * -0.3) 0 0 calc(var(--cl-hand) * -0.45);
  pointer-events: none; opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}
.cl-table.hand .cl-hand { opacity: 1; }
.cl-hand g { fill: var(--color-light); stroke: var(--color-ink); stroke-width: 1.8; stroke-linejoin: round; transform-origin: 24px 30px; transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
/* nunca se ven las dos manos a la vez: la que se va desaparece al instante, la que llega se anima */
.cl-hand .closed { opacity: 0; transform: scale(0.85); transition: none; }
.cl-hand.grab .open { opacity: 0; transition: none; }
.cl-hand.grab .closed { opacity: 1; transform: scale(1) rotate(-6deg); transition: transform var(--dur-fast) var(--ease); }
.cl-hand.drop .open { animation: cl-wave var(--dur-slow) var(--ease); }
@keyframes cl-wave { 0% { transform: scale(1.12) rotate(8deg); } 40% { transform: scale(0.96) rotate(-6deg); } 100% { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .cl-piece, .cl-hand g { transition: none; }
  .cl-hand.drop .open { animation: none; }
}