/* Steps ticked together, and moved by their grip (step-select.js). */

/* The bar over the list while steps are ticked: how many and which, then what can be done to them. */
#workspace .steps-selection { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 8px 12px 0 18px; padding: 8px 10px; border: 1px solid var(--accent-border); border-radius: 8px; background: var(--accent-wash); flex: none; }
#workspace .steps-selection[hidden] { display: none; }
#workspace .steps-selection-count { font-size: 12px; font-weight: 600; color: var(--accent-ink); min-width: 0; overflow-wrap: anywhere; }
#workspace .steps-selection-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
/* Its buttons are compact, so Copy, Paste and Make a group fit beside the others in the editor's narrow pane. */
#workspace .steps-selection-actions .btn-small { min-height: 26px; padding: 2px 8px; font-size: 12px; }
#workspace .steps-selection .btn-danger-text { color: var(--fail-ink); }

/* The box in front of a step's card, and the card it ticks. */
#workspace .step-check-cell { display: flex; align-items: center; flex: none; padding: 0 2px 0 4px; cursor: pointer; }
#workspace .step-check-cell input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); cursor: pointer; }
#workspace .step-card.is-selected { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }

/* The grip a step is dragged by; Up and Down on it move the step too. */
#workspace .step-grip { flex: none; align-self: stretch; width: 22px; min-height: 28px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--faint); font-size: 14px; line-height: 1; cursor: grab; touch-action: none; }
#workspace .step-grip:hover { color: var(--accent); background: var(--accent-soft); }
#workspace .step-grip:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; color: var(--accent); }
#workspace .step-grip:active { cursor: grabbing; }
#workspace .step-grip[aria-disabled="true"] { cursor: not-allowed; color: var(--muted); }

/* While a step is dragged it fades, and the row under the pointer draws a line where it will land. */
#workspace .is-dragging { opacity: .45; }
#workspace [data-drop] { position: relative; }
#workspace [data-drop]::after { content: ""; position: absolute; left: 0; right: 0; height: 3px; border-radius: 2px; background: var(--accent); pointer-events: none; z-index: 2; }
#workspace [data-drop="before"]::after { top: 0; }
#workspace [data-drop="after"]::after { bottom: 0; }

/* The recorder's rows: the grip and the box in front, and the step's controls on one line beside it (test-editor.css). */
#workspace .record-progress-step > .step-grip, #workspace .record-step > .step-grip { align-self: flex-start; min-height: 24px; }
#workspace .record-progress-step > .step-check-cell { align-self: flex-start; min-height: 24px; padding: 0 2px; }
#workspace .record-progress-step.is-selected { outline: 1px solid var(--accent); outline-offset: -1px; }
/* The recorder's bar sits over its list of steps, in the narrower rail. */
#workspace #record-steps-selection { margin: 6px 8px 0; }

/* A failed step's failure mode, set where its failure is shown (app.js failureModeControl). A failure folded to one
   line, so the screen keeps its room, shows it again with Show details. */
.failure-mode-control { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0; font-size: 12px; color: var(--muted); }
.failure-mode-control select { width: auto; min-width: 0; max-width: 100%; font-size: 12px; }
#workspace .run-held-explain .btn { margin-left: 4px; min-height: 26px; padding: 2px 8px; }

@media (max-width: 760px) {
  #workspace .step-grip { width: 32px; min-height: 44px; }
  #workspace .step-check-cell { padding: 0 6px; }
  #workspace .step-check-cell input { width: 20px; height: 20px; }
  #workspace .steps-selection { margin: 8px 8px 0; }
}