/* The move-plan strip's own look. WHERE it sits is not here — the left column's height
   distribution lives in play/play-panels.css, the focus-mode column in shell/app-frame.css, and the
   puzzle mount in screens/puzzle.css, because each of those is a rule about that screen. */
.move-plan {
  display: flex; flex-direction: column; gap: 6px;
  width: 100%; box-sizing: border-box;
  padding: 6px 10px;
  background: var(--bg-0); border: 1px solid var(--border); border-radius: var(--radius-m);
  font-size: 0.78rem; color: var(--ink-2);
}
.move-plan.is-running { border-color: var(--laurel); }
/* Armed: every board click is being queued rather than played, so the strip breathes on a 3s
   cycle — the one cue that says which mode the board is in. Border and shadow only; a moving
   background under a step list is unreadable. */
.move-plan.is-armed {
  border-color: var(--bronze);
  animation: mp-armed-pulse 3s ease-in-out infinite;
}
@keyframes mp-armed-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bronze) 0%, transparent); border-color: color-mix(in srgb, var(--bronze) 55%, var(--border)); }
  50%      { box-shadow: 0 0 0 3px color-mix(in srgb, var(--bronze) 26%, transparent); border-color: var(--bronze-2); }
}
@media (prefers-reduced-motion: reduce) {
  .move-plan.is-armed {
    animation: none;
    border-color: var(--bronze-2);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--bronze) 22%, transparent);
  }
}
/* A COLUMN: the arm control takes the whole width because it is the one thing you press to
   start, and Approve / Clear split the row under it instead of shrink-wrapping to their labels. */
.mp-head { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.mp-arm { width: 100%; justify-content: center; }
.mp-arm.is-on { border-color: var(--bronze); color: var(--ink); background: var(--bg-2); }
.mp-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.mp-count { font-variant-numeric: lining-nums tabular-nums; color: var(--ink-3); white-space: nowrap; }
.mp-note { color: var(--ink-3); }
.mp-note-warn { color: var(--porphyry-2); }
.mp-acts { display: flex; gap: 6px; }
.mp-acts > .btn { flex: 1 1 0; min-width: 0; justify-content: center; }
/* Where there is no measured height to grow into — the puzzle screen, and the stacked layout —
   the cap shows seven 28px rows before it scrolls. The desktop left column overrides it above. */
.mp-steps {
  display: flex; flex-direction: column; gap: 2px;
  margin: 0; padding: 0; list-style: none;
  max-height: 210px; overflow-y: auto;
}
.mp-step { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.mp-step.is-bad .mp-step-label { color: var(--porphyry-2); }
.mp-step-n {
  flex: 0 0 auto; min-width: 1.4em; text-align: right;
  color: var(--ink-4); font-variant-numeric: lining-nums tabular-nums;
}
.mp-step-label { flex: 1 1 auto; min-width: 0; color: var(--ink-2); }
.mp-step-cost {
  flex: 0 0 auto; color: var(--bronze-2);
  font-variant-numeric: lining-nums tabular-nums;
}
.mp-step-x { flex: 0 0 auto; width: 26px; height: 24px; padding: 0; }
.mp-end { align-self: flex-start; }