/* "Try the pipeline" (js/pipeline-demo.js): the Growth board's demo controls.
   Without JS the board stays the static example from css/tiles.css. */
html:not(.js) .pipeline-demo-only,
html:not(.js) .pipeline-move { display:none; }

/* Caption, then Reset beside it, then the move note on its own line. */
.js .pipeline-figure { display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline; column-gap:12px; }
.js .pipeline-figure > .pipeline { flex:1 1 100%; }
.js .pipeline-caption { order:1; }
.js .pipeline-reset { order:2; }
.js .pipeline-note { order:3; flex:1 1 100%; }
.pipeline-caption > .pipeline-demo-only::before { content:"\00B7" / ""; margin-right:4px; }

.pipeline-reset {
  margin-top:16px; padding:2px 4px; min-height:24px; border:0; border-radius:var(--radius-sm); background:none;
  font:inherit; font-size:14px; line-height:1.43; color:var(--tile-link); cursor:pointer;
}
.pipeline-reset:hover { text-decoration:underline; }
.pipeline-note { margin:0; font-size:14px; line-height:1.43; color:var(--tile-fg); text-wrap:balance; }
.pipeline-note:not(:empty) { margin-top:4px; }

/* Each card's Move button reads as a small action, not body text. */
.pipeline-card > .pipeline-move {
  display:block; width:calc(100% + 8px); margin:4px -4px -2px; padding:3px 4px; min-height:24px;
  border:0; border-radius:var(--radius-sm); background:none; text-align:left;
  font:inherit; font-size:11px; font-weight:600; line-height:1.25; color:var(--tile-link); cursor:pointer;
}
.pipeline-card > .pipeline-move:hover { background:var(--tile-hairline); }

/* Drag: movable cards can be picked up; the column under the card lights up. */
.js .pipeline-col:not(:last-child) > .pipeline-card { cursor:grab; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.pipeline-card.is-dragging { position:relative; z-index:1; cursor:grabbing; box-shadow:0 0 0 1px var(--tile-link), 0 12px 24px rgba(0,0,0,0.16); }
.pipeline-col { border-radius:var(--radius-md); transition:background-color 0.15s ease; }
.pipeline-col.is-drop-target { background:var(--tile-hairline); }

/* Phones: four columns are too narrow for a 44px Move target, so the board goes 2 x 2
   (as the 768 homepage tile does) and each button, Reset too, gets a 44px hit area. */
@media (max-width: 480px) {
  .pipeline { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .pipeline-card > .pipeline-move { min-height:44px; padding:0 4px; font-size:12px; display:flex; align-items:center; }
  .pipeline-reset { min-height:44px; margin-top:6px; padding:0 12px; }
}

/* Wider screens keep the compact 24px buttons; invisible halos reach 44px. Move
   buttons sit 24px apart, so two 10px halos never meet. Presses on a button never
   start a drag, so the halo only trims 10px of each card's grab area. */
@media (min-width: 481px) {
  .pipeline-card > .pipeline-move { position:relative; }
  .pipeline-card > .pipeline-move::after { content:''; position:absolute; inset:-10px 0; }
  .pipeline-reset { position:relative; }
  .pipeline-reset::after { content:''; position:absolute; inset:-10px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pipeline-col { transition:none; }
}