/* Workflow designer (Workflow editor canvas, palette, step settings). Colours come from the --workflow-* tokens in app.css. */

.workflow-editor .family-flow { --family: var(--workflow-family-flow); }
.workflow-editor .family-capture { --family: var(--workflow-family-capture); }
.workflow-editor .family-evaluate { --family: var(--workflow-family-evaluate); }
.workflow-editor .family-create { --family: var(--workflow-family-create); }
.workflow-editor .family-guide { --family: var(--workflow-family-guide); }
.workflow-editor .family-safety { --family: var(--workflow-family-safety); }
.workflow-editor .family-people { --family: var(--workflow-family-people); }

.workflow-toolbar-group {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.workflow-button.icon-only {
    padding-inline: 7px;
}

.workflow-button.active {
    border-color: color-mix(in srgb, var(--workflow-family-capture) 60%, var(--cockpit-border));
    background: color-mix(in srgb, var(--workflow-family-capture) 18%, transparent);
}

/* ------------------------------------------------------------ layout */

.workflow-editor {
    container: workflow-editor / inline-size;
}

/* Palette | canvas | docked side panel (step list, Try it) | step settings. Every panel has its own column, so
   nothing covers the canvas; a closed panel's column is 0 wide. */
.workflow-editor-body {
    --workflow-palette-width: 260px;
    --workflow-canvas-min: 360px;
    --workflow-side-width: 0px;
    --workflow-inspector-width: 0px;
    position: relative;
    display: grid;
    grid-template-columns:
        var(--workflow-palette-width)
        minmax(var(--workflow-canvas-min), 1fr)
        var(--workflow-side-width)
        var(--workflow-inspector-width);
    grid-template-rows: minmax(0, 1fr);
    min-height: 0;
}

.workflow-editor-body > .workflow-palette { grid-column: 1; grid-row: 1; }
.workflow-editor-body > .workflow-canvas-shell { grid-column: 2; grid-row: 1; }
.workflow-editor-body > .workflow-side-panel { grid-column: 3; grid-row: 1; }
.workflow-editor-body > .workflow-inspector { grid-column: 4; grid-row: 1; }

.workflow-editor-body.inspector-open {
    --workflow-canvas-min: 300px;
    --workflow-inspector-width: minmax(320px, 400px);
}

.workflow-editor-body.side-open {
    --workflow-canvas-min: 300px;
    --workflow-side-width: minmax(280px, 340px);
}

.workflow-editor-body.palette-collapsed {
    --workflow-palette-width: 54px;
}

.workflow-canvas-shell {
    position: relative;
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
}

/* ------------------------------------------------------------ palette */

.workflow-palette {
    min-height: 0;
    overflow: auto;
    border-right: 1px solid var(--cockpit-border);
    background-color: var(--cockpit-darkgray);
}

.workflow-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 10px 10px 6px;
}

.workflow-panel-heading div:first-child {
    display: grid;
    gap: 2px;
}

.workflow-panel-heading small {
    color: color-mix(in srgb, var(--cockpit-text) 60%, transparent);
}

.workflow-palette-actions {
    display: flex;
    gap: 4px;
}

.workflow-palette-actions > button {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--cockpit-border);
    border-radius: 4px;
    color: var(--cockpit-icon);
    background: transparent;
    cursor: pointer;
}

.workflow-palette-search {
    position: relative;
    margin: 0 10px 8px;
}

.workflow-palette-search > span {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cockpit-icon);
    font-size: 0.65rem;
}

.workflow-palette-search input {
    box-sizing: border-box;
    width: 100%;
    padding: 6px 8px 6px 26px;
    border: 1px solid var(--cockpit-border);
    border-radius: 6px;
    color: var(--cockpit-text);
    background: var(--cockpit-black);
    font: inherit;
}

.workflow-palette-group {
    padding: 4px 8px 8px;
}

.workflow-palette-group h4 {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 6px 2px;
    color: color-mix(in srgb, var(--cockpit-text) 75%, transparent);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.workflow-family-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--family);
}

.workflow-palette-item {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-bottom: 4px;
    padding: 6px 7px;
    border: 1px solid transparent;
    border-radius: 7px;
    color: var(--cockpit-text);
    background: color-mix(in srgb, var(--cockpit-white) 3%, transparent);
    font: inherit;
    text-align: left;
    cursor: grab;
}

.workflow-palette-item:hover,
.workflow-palette-item:focus-visible {
    border-color: color-mix(in srgb, var(--family) 55%, transparent);
    background: color-mix(in srgb, var(--family) 10%, transparent);
    outline: none;
}

.workflow-palette-item.disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.workflow-palette-item.disabled small {
    color: color-mix(in srgb, var(--workflow-family-flow) 80%, var(--cockpit-text));
}

.workflow-palette-copy {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.workflow-palette-copy strong {
    overflow: hidden;
    font-size: 0.68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workflow-palette-copy small {
    display: -webkit-box;
    overflow: hidden;
    color: color-mix(in srgb, var(--cockpit-text) 62%, transparent);
    font-size: 0.56rem;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.workflow-palette-empty {
    padding: 8px 12px;
    color: color-mix(in srgb, var(--cockpit-text) 60%, transparent);
}

.palette-collapsed .workflow-panel-heading > div:first-child,
.palette-collapsed .workflow-palette-search,
.palette-collapsed .workflow-palette-actions > button:first-child,
.palette-collapsed .workflow-palette-group h4,
.palette-collapsed .workflow-palette-copy,
.palette-collapsed .workflow-palette-item .workflow-badge {
    display: none;
}

.palette-collapsed .workflow-palette-item {
    grid-template-columns: 28px;
    justify-content: center;
    padding: 4px;
}

.workflow-step-chip {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    border-radius: 7px;
    color: #15171b;
    background: var(--family, var(--workflow-family-guide));
    font-size: 14px;
}

.workflow-badge {
    padding: 1px 6px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 0.52rem;
    font-weight: 600;
    white-space: nowrap;
}

.workflow-badge.offline { color: var(--workflow-badge-offline); }
.workflow-badge.queued { color: var(--workflow-badge-queued); }
.workflow-badge.online-only { color: var(--workflow-badge-online-only); }

/* ------------------------------------------------------------ canvas */

.workflow-canvas {
    /* A margin around the drawing: steps, ports and line handles at its edge stay reachable. */
    --workflow-canvas-gutter: 64px;
    position: relative;
    min-height: 0;
    overflow: auto;
    background-color: var(--workflow-canvas);
    outline: none;
}

.workflow-canvas:focus-visible {
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--workflow-family-capture) 60%, transparent);
}

.workflow-canvas.right-panning,
.workflow-canvas.right-panning * {
    cursor: grabbing !important;
    user-select: none !important;
}

.workflow-canvas.marquee-selecting,
.workflow-canvas.marquee-selecting * {
    cursor: crosshair !important;
    user-select: none !important;
}

.dara-canvas-marquee {
    position: absolute;
    z-index: 20;
    box-sizing: border-box;
    border: 1px dashed color-mix(in srgb, var(--workflow-family-capture) 80%, white);
    background-color: color-mix(in srgb, var(--workflow-family-capture) 14%, transparent);
    pointer-events: none;
}

.workflow-canvas-frame {
    position: relative;
    box-sizing: content-box;
    min-width: 1px;
    min-height: 1px;
    padding: var(--workflow-canvas-gutter);
}

.workflow-canvas-surface {
    position: absolute;
    left: var(--workflow-canvas-gutter);
    top: var(--workflow-canvas-gutter);
    transform-origin: 0 0;
    will-change: transform;
}

.workflow-canvas-grid,
.workflow-connections {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.workflow-drop-hint {
    position: absolute;
    left: 60px;
    top: 60px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    border: 1px dashed var(--workflow-step-border);
    border-radius: 10px;
    color: color-mix(in srgb, var(--cockpit-text) 70%, transparent);
}

/* lines */

.workflow-connection {
    fill: none;
    stroke: var(--workflow-line);
    stroke-width: 1.6px;
    stroke-linejoin: round;
    pointer-events: none;
}

.workflow-connection-arrow {
    fill: var(--workflow-line);
}

.workflow-connection-hit {
    fill: none;
    stroke: transparent;
    stroke-width: 14px;
    pointer-events: stroke;
    cursor: pointer;
}

.workflow-connection-group:hover .workflow-connection,
.workflow-connection-group.selected .workflow-connection {
    stroke: color-mix(in srgb, var(--workflow-family-capture) 85%, white);
    stroke-width: 2.4px;
}

.workflow-connection-group.pending .workflow-connection {
    stroke-dasharray: 5 4;
}

.workflow-connection-group.validation-error .workflow-connection { stroke: var(--workflow-family-safety); }
.workflow-connection-group.validation-warning .workflow-connection { stroke: var(--workflow-family-flow); }

.workflow-exit-label rect {
    stroke: color-mix(in srgb, black 30%, transparent);
    stroke-width: 1px;
}

.workflow-exit-label text {
    fill: #fff;
    font-size: 10px;
    font-weight: 600;
    pointer-events: none;
}

.workflow-loop-frame rect {
    fill: color-mix(in srgb, var(--workflow-family-flow) 6%, transparent);
    stroke: var(--workflow-family-flow);
    stroke-dasharray: 7 5;
    stroke-width: 1.4px;
}

.workflow-loop-frame text {
    fill: var(--workflow-family-flow);
    font-size: 11px;
    font-weight: 600;
}

.workflow-bend-handle {
    position: absolute;
    z-index: 6;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border: 2px solid color-mix(in srgb, var(--workflow-family-capture) 85%, white);
    border-radius: 3px;
    background: var(--workflow-canvas);
    cursor: move;
}

.workflow-guide {
    position: absolute;
    z-index: 4;
    pointer-events: none;
    background: color-mix(in srgb, var(--workflow-family-flow) 80%, white);
}

.workflow-guide.vertical { top: 0; bottom: 0; width: 1px; }
.workflow-guide.horizontal { left: 0; right: 0; height: 1px; }

/* steps */

.workflow-node {
    position: absolute;
    z-index: 3;
    box-sizing: border-box;
    color: var(--cockpit-text);
    cursor: grab;
    user-select: none;
    outline: none;
}

.workflow-node.step {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    border: 1px solid var(--workflow-step-border);
    border-radius: 12px;
    background: var(--workflow-step);
    box-shadow: 0 2px 6px color-mix(in srgb, black 35%, transparent);
}

.workflow-node.shape-subprocedure {
    border: 4px double color-mix(in srgb, var(--family) 70%, var(--workflow-step-border));
}

.workflow-node.step:hover {
    border-color: color-mix(in srgb, var(--family) 50%, var(--workflow-step-border));
}

.workflow-node.step.selected,
.workflow-node.step:focus-visible {
    border-color: var(--family);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--family) 45%, transparent);
}

.workflow-node .workflow-node-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.workflow-node .workflow-node-copy strong {
    overflow: hidden;
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workflow-node .workflow-node-copy small {
    overflow: hidden;
    color: color-mix(in srgb, var(--cockpit-text) 58%, transparent);
    font-size: 10.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workflow-node .pending {
    font-style: italic;
}

.workflow-node.compact .workflow-shape {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.workflow-shape .shape-outline {
    fill: var(--workflow-step);
    stroke: var(--family);
    stroke-width: 2px;
}

.workflow-shape .shape-outline.thin { stroke-width: 1.5px; }
.workflow-shape .shape-outline.thick { stroke-width: 5px; }

.workflow-shape .shape-glyph {
    fill: none;
    stroke: var(--family);
    stroke-linecap: round;
    stroke-width: 2.4px;
}

.workflow-shape .shape-glyph-fill { fill: var(--family); }

.workflow-shape .shape-text {
    fill: var(--family);
    font-size: 22px;
    font-weight: 700;
}

.workflow-node.compact.selected .shape-outline,
.workflow-node.compact:focus-visible .shape-outline {
    filter: drop-shadow(0 0 4px var(--family));
    stroke-width: 3px;
}

.workflow-node.compact.selected .shape-outline.thick { stroke-width: 6px; }

.workflow-node-name {
    position: absolute;
    overflow: hidden;
    max-width: 170px;
    color: var(--cockpit-text);
    font-size: 11.5px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workflow-node-name.beside-circle {
    left: calc(100% + 6px);
    top: 50%;
    transform: translateY(-50%);
}

.workflow-node-name.beside-diamond {
    left: calc(50% + 14px);
    bottom: calc(100% + 2px);
}

.workflow-node.validation-error.step,
.workflow-node.validation-error .shape-outline { border-color: var(--workflow-family-safety); stroke: var(--workflow-family-safety); }
.workflow-node.validation-warning.step { border-color: var(--workflow-family-flow); }
.workflow-node.execution-active.step,
.workflow-node.execution-active .shape-outline { box-shadow: 0 0 0 3px color-mix(in srgb, var(--workflow-family-people) 60%, transparent); filter: drop-shadow(0 0 6px var(--workflow-family-people)); }
.workflow-node.execution-failed.step,
.workflow-node.execution-failed .shape-outline { box-shadow: 0 0 0 3px color-mix(in srgb, var(--workflow-family-safety) 60%, transparent); filter: drop-shadow(0 0 6px var(--workflow-family-safety)); }
.workflow-node.pending.step { border-style: dashed; }

.workflow-node.workflow-drag-ghost {
    opacity: 0.85;
}

.workflow-entry-label {
    position: absolute;
    left: 10px;
    top: -9px;
    padding: 0 6px;
    border-radius: 4px;
    color: #15171b;
    background: var(--workflow-family-flow);
    font-size: 9px;
    font-weight: 700;
}

/* connection points: hidden until the step is hovered, selected or a line is being drawn */

.workflow-node-port {
    position: absolute;
    z-index: 5;
    box-sizing: border-box;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border: 2px solid var(--family, var(--workflow-line));
    border-radius: 50%;
    opacity: 0;
    transition: opacity 90ms ease-out;
}

.workflow-node-port.input { background: var(--workflow-canvas); }
.workflow-node-port.output { background: var(--family, var(--workflow-line)); cursor: crosshair; }

.workflow-node:hover .workflow-node-port,
.workflow-node.selected .workflow-node-port,
.workflow-node:focus-within .workflow-node-port,
.workflow-node.connect-target .workflow-node-port.input,
.workflow-node-port.connecting {
    opacity: 1;
}

.workflow-node-port.output:not(.connected) {
    opacity: 0.55;
}

.workflow-node:hover .workflow-node-port.output:not(.connected) { opacity: 1; }

.workflow-node.connect-target:hover {
    box-shadow: 0 0 0 2px var(--workflow-family-people);
}

.workflow-node-port.connecting {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--family) 45%, transparent);
}

.workflow-port-label {
    position: absolute;
    top: 10px;
    left: 50%;
    display: none;
    padding: 1px 5px;
    border-radius: 6px;
    color: var(--cockpit-text);
    background: color-mix(in srgb, var(--workflow-step) 92%, black);
    font-size: 9.5px;
    white-space: nowrap;
    transform: translateX(-50%);
    pointer-events: none;
}

.workflow-node-port.side-left .workflow-port-label { left: auto; right: 10px; top: -8px; transform: none; }
.workflow-node-port.side-right .workflow-port-label { left: 10px; top: -8px; transform: none; }
.workflow-node:hover .workflow-port-label,
.workflow-node.selected .workflow-port-label { display: block; }
/* A connected exit is named by the pill on its line. */
.workflow-node .workflow-node-port.connected .workflow-port-label { display: none; }

/* minimap */

.workflow-minimap {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 8;
    width: 180px;
    height: 120px;
    overflow: hidden;
    border: 1px solid var(--workflow-step-border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--workflow-canvas) 88%, black);
    box-shadow: 0 2px 10px color-mix(in srgb, black 45%, transparent);
    cursor: pointer;
}

.workflow-minimap svg {
    width: 100%;
    height: 100%;
}

.workflow-minimap rect:not(.workflow-minimap-viewport) {
    fill: var(--family);
    opacity: 0.85;
}

.workflow-minimap-viewport {
    fill: color-mix(in srgb, white 8%, transparent);
    stroke: color-mix(in srgb, white 75%, transparent);
    stroke-width: 12px;
    vector-effect: non-scaling-stroke;
}

.workflow-minimap .workflow-minimap-viewport { stroke-width: 1.5px; }

/* ------------------------------------------------------------ step settings */

.workflow-inspector {
    min-width: 0;
    min-height: 0;
    overflow: auto;
    border-left: 1px solid var(--cockpit-border);
    background: var(--cockpit-darkgray);
}

.workflow-inspector-panel {
    display: grid;
    gap: 10px;
    padding: 12px;
    font-size: 0.68rem;
}

.workflow-inspector-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.workflow-inspector-title {
    display: grid;
    flex: 1;
    min-width: 0;
}

.workflow-inspector-title small {
    color: color-mix(in srgb, var(--cockpit-text) 60%, transparent);
}

.workflow-inspector-help {
    margin: 0;
    color: color-mix(in srgb, var(--cockpit-text) 68%, transparent);
    line-height: 1.4;
}

.workflow-icon-button {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 5px;
    color: var(--cockpit-icon);
    background: transparent;
    cursor: pointer;
}

.workflow-icon-button:hover,
.workflow-icon-button:focus-visible {
    border-color: var(--cockpit-border);
    background: color-mix(in srgb, white 6%, transparent);
}

.workflow-form-field {
    display: grid;
    gap: 4px;
}

.workflow-form-field > label,
.workflow-form-group > legend,
.workflow-advanced label {
    color: color-mix(in srgb, var(--cockpit-text) 82%, transparent);
    font-weight: 600;
}

.workflow-form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 8px;
}

.workflow-form-group {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 8px 10px 10px;
    border: 1px solid var(--cockpit-border);
    border-radius: 8px;
}

.workflow-form-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.workflow-form-inline > input,
.workflow-form-inline > select,
.workflow-form-inline > .workflow-variable-picker {
    flex: 1 1 120px;
    min-width: 0;
}

.workflow-inspector-panel input[type=text],
.workflow-inspector-panel input[type=number],
.workflow-inspector-panel input:not([type]),
.workflow-inspector-panel select,
.workflow-inspector-panel textarea {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: 5px 7px;
    border: 1px solid var(--cockpit-border);
    border-radius: 5px;
    color: var(--cockpit-text);
    background: var(--cockpit-black);
    font: inherit;
}

.workflow-inspector-panel [aria-invalid=true] {
    border-color: var(--workflow-family-safety);
}

.workflow-inspector-panel input:focus-visible,
.workflow-inspector-panel select:focus-visible,
.workflow-inspector-panel textarea:focus-visible,
.workflow-form-button:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--workflow-family-capture) 70%, transparent);
    outline-offset: 1px;
}

.workflow-radio,
.workflow-check {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.workflow-form-hint {
    color: color-mix(in srgb, var(--cockpit-text) 55%, transparent);
    font-size: 0.6rem;
}

.workflow-field-problem {
    margin: 0;
    color: color-mix(in srgb, var(--workflow-family-safety) 90%, white);
    font-size: 0.62rem;
}

.workflow-form-button {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: 5px;
    padding: 4px 9px;
    border: 1px solid var(--cockpit-border);
    border-radius: 5px;
    color: var(--cockpit-text);
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.workflow-form-button:hover:not(:disabled) { background: color-mix(in srgb, white 6%, transparent); }
.workflow-form-button.primary { border-color: var(--workflow-family-capture); color: var(--workflow-family-capture); }
.workflow-form-button.danger { color: var(--workflow-family-safety); }
.workflow-form-button:disabled { opacity: 0.45; cursor: not-allowed; }

.workflow-form-table {
    width: 100%;
    border-collapse: collapse;
}

.workflow-form-table th {
    padding: 2px 3px;
    color: color-mix(in srgb, var(--cockpit-text) 60%, transparent);
    font-size: 0.58rem;
    font-weight: 600;
    text-align: left;
}

.workflow-form-table td {
    padding: 2px 3px;
    vertical-align: top;
}

.workflow-band-table td:first-child {
    display: flex;
    align-items: center;
    gap: 5px;
}

.workflow-band-swatch {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

.workflow-band-fallback {
    margin-top: 3px;
}

.workflow-form-range {
    display: flex;
    gap: 4px;
}

.workflow-condition-row {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 5px;
    align-items: start;
}

.workflow-exit-pill {
    padding: 1px 7px;
    border-radius: 9px;
    color: #fff;
    background: var(--workflow-exit-neutral);
    font-size: 0.6rem;
    font-weight: 600;
}

.workflow-exit-pill.tone-yes { background: var(--workflow-exit-yes); }
.workflow-exit-pill.tone-no { background: var(--workflow-exit-no); }

.workflow-variable-picker {
    display: grid;
    gap: 4px;
}

.workflow-variable-new {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.workflow-variable-new > input { flex: 2 1 100px; }
.workflow-variable-new > select { flex: 1 1 80px; }

.workflow-ready {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 8px 10px;
    border-radius: 8px;
    line-height: 1.4;
}

.workflow-ready.ready {
    border: 1px solid color-mix(in srgb, var(--workflow-ready) 55%, transparent);
    color: var(--cockpit-text);
    background: color-mix(in srgb, var(--workflow-ready) 13%, transparent);
}

.workflow-ready.ready > .fa-solid { color: var(--workflow-ready); }

.workflow-ready.not-ready {
    border: 1px solid color-mix(in srgb, var(--workflow-family-flow) 55%, transparent);
    background: color-mix(in srgb, var(--workflow-family-flow) 12%, transparent);
}

.workflow-ready.not-ready > .fa-solid { color: var(--workflow-family-flow); }

.workflow-advanced {
    display: grid;
    gap: 6px;
}

.workflow-advanced summary {
    color: color-mix(in srgb, var(--cockpit-text) 70%, transparent);
    cursor: pointer;
}

.workflow-advanced[open] {
    gap: 6px;
}

.workflow-code {
    font-family: Consolas, 'Cascadia Mono', monospace;
    font-size: 0.62rem;
}

.workflow-advanced pre {
    max-height: 180px;
    overflow: auto;
    padding: 6px;
    border-radius: 5px;
    background: var(--cockpit-black);
    white-space: pre-wrap;
}

/* command steps (schema form inside the step settings) */

.workflow-command-config {
    display: grid;
    gap: 8px;
}

.workflow-command-config > header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.workflow-command-config > header span:last-child {
    display: grid;
}

.workflow-command-fields {
    display: grid;
    gap: 8px;
}

.workflow-command-field {
    display: grid;
    gap: 4px;
    padding: 6px 8px;
    border: 1px solid var(--cockpit-border);
    border-radius: 6px;
}

.workflow-command-field label,
.workflow-command-config .workflow-advanced label {
    display: grid;
    gap: 3px;
}

.workflow-command-field input,
.workflow-command-field select,
.workflow-command-config textarea {
    box-sizing: border-box;
    width: 100%;
    padding: 4px 6px;
    border: 1px solid var(--cockpit-border);
    border-radius: 4px;
    color: var(--cockpit-text);
    background: var(--cockpit-black);
    font: inherit;
}

/* Play Animation / Play Audio authoring: drop zones and option colors. */
.workflow-command-field select option {
    color: var(--cockpit-text);
    background: var(--cockpit-darkgray);
}

.workflow-play-animation-drop {
    display: flex;
    align-items: center;
    min-height: 2.4rem;
    box-sizing: border-box;
    padding: .45rem .7rem;
    border: 1px dashed var(--cockpit-border);
    border-radius: 6px;
    background: var(--cockpit-darkgray);
    color: color-mix(in srgb, var(--cockpit-text) 72%, transparent);
}

.workflow-play-animation-drop:not(.empty) {
    border-style: solid;
    color: var(--cockpit-text);
}

.workflow-play-animation-error {
    color: #ffb3b3;
}

/* A narrow editor (for example next to Details) keeps the canvas usable: the palette shows icons only. */
@container workflow-editor (max-width: 1150px) {
    .workflow-editor-body.inspector-open,
    .workflow-editor-body.side-open {
        --workflow-palette-width: 54px;
        --workflow-canvas-min: 240px;
    }

    .workflow-editor-body.inspector-open {
        --workflow-inspector-width: minmax(280px, 340px);
    }

    .workflow-editor-body.side-open.inspector-open {
        --workflow-side-width: minmax(240px, 300px);
    }

    .workflow-editor-body:is(.inspector-open, .side-open) .workflow-palette-copy,
    .workflow-editor-body:is(.inspector-open, .side-open) .workflow-palette-item .workflow-badge,
    .workflow-editor-body:is(.inspector-open, .side-open) .workflow-palette-search,
    .workflow-editor-body:is(.inspector-open, .side-open) .workflow-palette-group h4,
    .workflow-editor-body:is(.inspector-open, .side-open) .workflow-panel-heading > div:first-child {
        display: none;
    }

    .workflow-editor-body:is(.inspector-open, .side-open) .workflow-palette-item {
        grid-template-columns: 28px;
        justify-content: center;
        padding: 4px;
    }
}

@container workflow-editor (max-width: 760px) {
    /* Too narrow for side columns: the side panel and step settings slide over the canvas as drawers. */
    .workflow-editor-body,
    .workflow-editor-body.inspector-open,
    .workflow-editor-body.side-open {
        --workflow-palette-width: 54px;
        --workflow-canvas-min: 0px;
        --workflow-side-width: 0px;
        --workflow-inspector-width: 0px;
    }

    .workflow-editor-body > .workflow-side-panel {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 11;
        width: min(340px, 90%);
    }

    .workflow-palette-copy,
    .workflow-palette-item .workflow-badge,
    .workflow-palette-search,
    .workflow-palette-group h4,
    .workflow-panel-heading > div:first-child {
        display: none;
    }

    .workflow-palette-item {
        grid-template-columns: 28px;
        justify-content: center;
        padding: 4px;
    }

    .workflow-inspector {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 12;
        width: min(340px, 90%);
    }
}

/* ------------------------------------------------------------ step settings: exits on their own row (B4 fix) */

.workflow-band-table td:nth-child(2) input,
.workflow-band-table td:nth-child(3) input {
    width: 5.2em;
}

.workflow-exit-row td {
    padding-top: 0;
    padding-bottom: 7px;
    border-bottom: 1px solid color-mix(in srgb, var(--cockpit-border) 60%, transparent);
}

.workflow-exit-row-content {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.workflow-exit-row-label {
    flex: 0 0 auto;
    color: color-mix(in srgb, var(--cockpit-text) 60%, transparent);
    font-size: 0.6rem;
}

.workflow-exit-row-content .workflow-then-go-to,
.workflow-exits .workflow-then-go-to {
    flex: 1 1 auto;
    min-width: 9em;
}

.workflow-form-table td:has(> .workflow-then-go-to) {
    min-width: 9em;
}

/* ------------------------------------------------------------ Procedure authoring (B3/B4) */

.workflow-editor {
    position: relative;
}

.workflow-canvas-top {
    position: absolute;
    bottom: 8px;
    left: 8px;
    right: 210px;
    z-index: 9;
    display: grid;
    gap: 6px;
    justify-items: start;
    pointer-events: none;
}

.workflow-canvas-top > * {
    pointer-events: auto;
}

.workflow-procedure-bar,
.workflow-offer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 5px 10px;
    border: 1px solid var(--cockpit-border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--cockpit-darkgray) 94%, transparent);
    box-shadow: 0 2px 8px rgb(0 0 0 / 0.25);
}

.workflow-procedure-tag {
    padding: 2px 8px;
    border-radius: 10px;
    color: #fff;
    background: var(--workflow-family-capture);
    font-weight: 600;
}

.workflow-procedure-template {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 6px;
    border: 1px solid transparent;
    border-radius: 5px;
    color: var(--cockpit-text);
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.workflow-procedure-template:hover {
    border-color: var(--cockpit-border);
}

.workflow-procedure-bar small {
    color: color-mix(in srgb, var(--cockpit-text) 60%, transparent);
}

.workflow-offer {
    border-color: color-mix(in srgb, var(--workflow-family-capture) 60%, var(--cockpit-border));
}

/* Docked in its own column of the editor body (see .workflow-editor-body), like Step settings. */
.workflow-side-panel {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    min-height: 0;
    padding: 10px 12px;
    overflow: auto;
    border-left: 1px solid var(--cockpit-border);
    background: var(--cockpit-darkgray);
    font-size: 0.68rem;
}

.workflow-incompatible {
    border-color: color-mix(in srgb, #e5484d 70%, var(--cockpit-border));
}

.workflow-incompatible ul {
    flex-basis: 100%;
    margin: 0;
    padding-left: 22px;
}

.workflow-link-button {
    padding: 0;
    border: 0;
    color: var(--workflow-family-capture);
    background: transparent;
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.workflow-side-panel > header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.workflow-side-panel-title {
    display: grid;
    flex: 1;
    min-width: 0;
}

.workflow-side-panel-title small {
    color: color-mix(in srgb, var(--cockpit-text) 60%, transparent);
}

.workflow-side-panel input[type=text],
.workflow-side-panel select,
.workflow-dialog input[type=text],
.workflow-dialog select {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: 5px 7px;
    border: 1px solid var(--cockpit-border);
    border-radius: 5px;
    color: var(--cockpit-text);
    background: var(--cockpit-black);
    font: inherit;
}

.workflow-step-list ol {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.workflow-step-list li > button {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--cockpit-border);
    border-radius: 7px;
    color: var(--cockpit-text);
    background: var(--cockpit-black);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.workflow-step-list li > button:hover {
    border-color: var(--workflow-family-capture);
}

.workflow-step-number {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: #fff;
    background: var(--workflow-family-capture);
    font-weight: 700;
}

.workflow-step-list-copy {
    display: grid;
    min-width: 0;
}

.workflow-step-list-copy small {
    color: color-mix(in srgb, var(--cockpit-text) 60%, transparent);
}

.workflow-sim-step {
    display: grid;
    gap: 6px;
    padding: 8px;
    border: 1px solid var(--workflow-family-capture);
    border-radius: 8px;
    background: color-mix(in srgb, var(--workflow-family-capture) 10%, transparent);
}

.workflow-sim-step p {
    margin: 0;
}

/* A control step (hold point, instruction …) shows its symbol instead of a number. */
.workflow-step-symbol {
    color: var(--workflow-family-capture);
    background: transparent;
    border: 1px solid var(--workflow-family-capture);
    font-size: 11px;
    font-weight: 400;
}

.workflow-sim-title {
    display: flex;
    align-items: center;
    gap: 6px;
}

.workflow-sim-done {
    margin: 0;
    color: var(--workflow-exit-yes, #3fb950);
    font-weight: 600;
}

.workflow-simulator h5 {
    margin: 4px 0 0;
    font-size: 0.66rem;
}

.workflow-sim-effects {
    display: grid;
    gap: 3px;
    margin: 0;
    padding-left: 16px;
}

.workflow-sim-effects .empty {
    list-style: none;
    margin-left: -16px;
    color: color-mix(in srgb, var(--cockpit-text) 55%, transparent);
}

.workflow-node.sim-path {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--workflow-family-capture) 55%, transparent);
}

.workflow-node.sim-current {
    box-shadow: 0 0 0 3px var(--workflow-family-capture), 0 0 14px color-mix(in srgb, var(--workflow-family-capture) 60%, transparent);
}

.workflow-connection-group.sim-path .workflow-connection {
    stroke: var(--workflow-family-capture);
    stroke-width: 3px;
}

.workflow-problems {
    display: grid;
    gap: 6px;
    max-height: 32vh;
    padding: 8px 12px;
    overflow: auto;
    border-top: 1px solid var(--cockpit-border);
    background: var(--cockpit-darkgray);
}

.workflow-problems-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.workflow-problems-header small {
    flex: 1;
    color: color-mix(in srgb, var(--cockpit-text) 60%, transparent);
}

.workflow-problems ul {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.workflow-problems li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border: 1px solid var(--cockpit-border);
    border-radius: 6px;
}

.workflow-problems li.error > .fa-solid { color: var(--workflow-family-safety); }
.workflow-problems li.warning > .fa-solid { color: var(--workflow-family-evaluate); }

.workflow-problem-copy {
    display: grid;
    flex: 1;
    min-width: 0;
}

.workflow-problem-copy small {
    color: color-mix(in srgb, var(--cockpit-text) 50%, transparent);
    font-size: 0.58rem;
}

.workflow-dialog-backdrop {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgb(0 0 0 / 0.45);
}

.workflow-dialog {
    display: grid;
    gap: 10px;
    width: min(480px, 100%);
    max-height: 100%;
    padding: 14px 16px;
    overflow: auto;
    border: 1px solid var(--cockpit-border);
    border-radius: 12px;
    background: var(--cockpit-darkgray);
    box-shadow: 0 10px 30px rgb(0 0 0 / 0.45);
    font-size: 0.7rem;
}

.workflow-dialog > header,
.workflow-dialog > footer {
    display: flex;
    align-items: center;
    gap: 8px;
}

.workflow-dialog > header strong {
    flex: 1;
    font-size: 0.8rem;
}

.workflow-dialog > footer {
    justify-content: flex-end;
}

.workflow-dialog .workflow-form-field {
    display: grid;
    gap: 4px;
}

.workflow-dialog-guidance {
    margin: 0;
    line-height: 1.45;
}

.workflow-problems li .workflow-form-button {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* step 2: line editing, pointer drags, placeholders, palette drag image, step status on the canvas */

.workflow-segment-handle {
    position: absolute;
    z-index: 7;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border: 2px solid color-mix(in srgb, var(--workflow-family-capture) 85%, white);
    border-radius: 4px;
    background: var(--workflow-canvas);
    box-shadow: 0 0 0 2px color-mix(in srgb, black 35%, transparent);
    touch-action: none;
}

.workflow-segment-handle.horizontal { cursor: ns-resize; width: 22px; margin-left: -11px; }
.workflow-segment-handle.vertical { cursor: ew-resize; height: 22px; margin-top: -11px; }
.workflow-segment-handle:hover { background: color-mix(in srgb, var(--workflow-family-capture) 40%, var(--workflow-canvas)); }

.workflow-canvas .workflow-node[data-drag-kind] { cursor: grab; touch-action: none; }
.workflow-canvas.workflow-pointer-dragging,
.workflow-canvas.workflow-pointer-dragging .workflow-node { cursor: grabbing; user-select: none; }

.workflow-node.workflow-placeholder {
    opacity: 0.75;
    border-style: dashed;
    pointer-events: none;
}

.workflow-node.workflow-placeholder.compact {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--workflow-line);
    border-radius: 50%;
}

.workflow-node.workflow-placeholder.compact .workflow-node-copy { display: none; }

.workflow-node-problems {
    position: absolute;
    right: -8px;
    top: -10px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    border-radius: 9px;
    color: #15171b;
    background: var(--workflow-family-flow);
    font-size: 10px;
    font-weight: 700;
}

.workflow-node-badge {
    position: absolute;
    left: -8px;
    bottom: -9px;
    z-index: 3;
    padding: 1px 5px;
    font-size: 9px;
}

.workflow-palette-ghost {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #e8eaed;
    pointer-events: none;
}

.workflow-palette-ghost-shape {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 100%;
    padding: 0 12px;
    border: 2px solid #8cc8ff;
    border-radius: 10px;
    background: rgba(30, 34, 40, 0.92);
}

.workflow-palette-ghost.shape-step .workflow-palette-ghost-shape,
.workflow-palette-ghost.shape-subprocedure .workflow-palette-ghost-shape { justify-content: flex-start; }

.workflow-palette-ghost.shape-start .workflow-palette-ghost-shape,
.workflow-palette-ghost.shape-end .workflow-palette-ghost-shape,
.workflow-palette-ghost.shape-abort .workflow-palette-ghost-shape,
.workflow-palette-ghost.shape-wait .workflow-palette-ghost-shape { border-radius: 50%; padding: 0; }

.workflow-palette-ghost.shape-decision .workflow-palette-ghost-shape,
.workflow-palette-ghost.shape-switch .workflow-palette-ghost-shape,
.workflow-palette-ghost.shape-parallel .workflow-palette-ghost-shape,
.workflow-palette-ghost.shape-loop .workflow-palette-ghost-shape,
.workflow-palette-ghost.shape-merge .workflow-palette-ghost-shape { transform: rotate(45deg) scale(0.72); border-radius: 6px; padding: 0; }

.workflow-palette-ghost.shape-decision .workflow-palette-ghost-shape > span,
.workflow-palette-ghost.shape-switch .workflow-palette-ghost-shape > span,
.workflow-palette-ghost.shape-parallel .workflow-palette-ghost-shape > span,
.workflow-palette-ghost.shape-loop .workflow-palette-ghost-shape > span,
.workflow-palette-ghost.shape-merge .workflow-palette-ghost-shape > span { transform: rotate(-45deg); }

.workflow-palette-ghost-name {
    position: absolute;
    left: 100%;
    margin-left: 6px;
    white-space: nowrap;
}

/* Drawing a line from an exit (workflowDesigner.js): every step that can take it shows its input, the step under the
   pointer is highlighted, the line follows the pointer. */
.workflow-canvas.workflow-connecting .workflow-node:not([data-connect-source]) .workflow-node-port.input {
    opacity: 1;
    transform: scale(1.35);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--workflow-family-people) 40%, transparent);
}
.workflow-canvas.workflow-connecting .workflow-node:not([data-connect-source]):has(.workflow-node-port.input) {
    outline: 1px dashed color-mix(in srgb, var(--workflow-family-people) 70%, transparent);
    outline-offset: 3px;
}
.workflow-canvas.workflow-connecting .workflow-node[data-connect-hover] {
    outline: 2px solid var(--workflow-family-people);
    outline-offset: 3px;
}
.workflow-canvas.workflow-connecting,
.workflow-canvas.workflow-connecting * { cursor: crosshair; user-select: none; }
.workflow-connect-preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    z-index: 30;
}
.workflow-connect-preview path {
    fill: none;
    stroke: var(--workflow-family-people);
    stroke-width: 2;
    stroke-dasharray: 6 4;
}

/* Procedure publish dialog ("Publish to objects…", "Run on an object…") */
.procedure-publish-dialog { width: min(560px, 94vw); max-height: 88vh; overflow-y: auto; }
.procedure-publish-entries { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.procedure-publish-entries li { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.procedure-publish-entries li small { margin-left: auto; opacity: 0.7; }
.procedure-publish-search { width: 100%; box-sizing: border-box; margin: 6px 0 4px; }
.procedure-publish-choices { list-style: none; margin: 0; padding: 0; max-height: 180px; overflow-y: auto; border: 1px solid var(--workflow-line, #444); border-radius: 6px; }
.procedure-publish-choices button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 8px; background: transparent; border: 0; color: inherit; text-align: left; cursor: pointer; font-size: 12px; }
.procedure-publish-choices button:hover,
.procedure-publish-choices button:focus-visible { background: color-mix(in srgb, white 7%, transparent); }
.procedure-publish-none { padding: 6px 8px; font-size: 12px; opacity: 0.65; }
.procedure-publish-chosen { display: flex; align-items: center; gap: 8px; margin: 6px 0; padding: 4px 8px; border: 1px solid var(--workflow-family-capture); border-radius: 6px; font-size: 12px; }
.procedure-publish-chosen .workflow-icon-button { margin-left: auto; }
.procedure-publish-result { margin: 10px 0 0; padding: 8px 10px; border-radius: 6px; background: color-mix(in srgb, var(--workflow-family-capture) 15%, transparent); font-size: 12px; }

/* ------------------------------------------------------------ line ends and minimap drag (2026-10-23) */

/* The ends of the selected line: drag one onto another step to reconnect the line there. */
.workflow-line-end {
    position: absolute;
    z-index: 8;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid var(--workflow-family-people);
    border-radius: 50%;
    background: var(--workflow-canvas);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--workflow-family-people) 25%, transparent);
    cursor: grab;
    touch-action: none;
}
.workflow-line-end.target { background: var(--workflow-family-people); }
.workflow-line-end:hover { transform: scale(1.2); }
.workflow-connection-group.workflow-reconnecting .workflow-connection { opacity: 0.35; stroke-dasharray: 4 4; }
/* Moving a line's start: the steps show their exits instead of their inputs. */
.workflow-canvas.workflow-reconnecting-source .workflow-node .workflow-node-port.input { opacity: 0; transform: none; box-shadow: none; }
.workflow-canvas.workflow-reconnecting-source .workflow-node:not([data-connect-source]) .workflow-node-port.output { opacity: 1; }
.workflow-canvas.workflow-reconnecting-source .workflow-node:not([data-connect-source]):has(.workflow-node-port.input) { outline: none; }
.workflow-canvas.workflow-reconnecting-source .workflow-node:not([data-connect-source]):has(.workflow-node-port.output) {
    outline: 1px dashed color-mix(in srgb, var(--workflow-family-people) 70%, transparent);
    outline-offset: 3px;
}

.workflow-minimap { cursor: grab; touch-action: none; }
.workflow-minimap.dragging { cursor: grabbing; }
.workflow-minimap.dragging .workflow-minimap-viewport { fill: color-mix(in srgb, white 16%, transparent); }

/* Expression fields: suggestions under the field (ExpressionInput). */
.expression-input {
    position: relative;
    display: grid;
    gap: 4px;
}

.expression-input textarea,
.expression-input input {
    width: 100%;
    box-sizing: border-box;
}

.expression-suggestions {
    display: grid;
    max-height: 180px;
    margin: 0;
    padding: 2px;
    overflow: auto;
    list-style: none;
    border: 1px solid var(--cockpit-border);
    border-radius: 5px;
    background: var(--cockpit-black);
}

.expression-suggestions button {
    display: flex;
    align-items: baseline;
    gap: 6px;
    width: 100%;
    padding: 3px 6px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--cockpit-text);
    font-size: 0.62rem;
    text-align: left;
    cursor: pointer;
}

.expression-suggestions button:hover,
.expression-suggestions button:focus-visible {
    background: color-mix(in srgb, var(--cockpit-text) 12%, transparent);
}

.expression-suggestion-kind,
.expression-suggestion-detail {
    color: color-mix(in srgb, var(--cockpit-text) 55%, transparent);
}

.expression-suggestion-detail {
    margin-left: auto;
    font-family: Consolas, 'Cascadia Mono', monospace;
}