/* Each stage is its own column, so a label can never collide with its
   neighbour: the connecting line is two half-segments that grow to fill
   whatever width the labels need, rather than the labels being squeezed onto
   a fixed grid. */
.stages.svelte-dedtn4{display:flex;align-items:flex-start}
.stage.svelte-dedtn4{display:flex;flex-direction:column;align-items:center;min-width:0}
.track.svelte-dedtn4{display:flex;align-items:center;width:100%}
.line.svelte-dedtn4{height:2px;background:var(--border);flex:1 1 auto;min-width:7px}
.line--hidden.svelte-dedtn4{visibility:hidden}
.dot.svelte-dedtn4{width:9px;height:9px;border-radius:100px;border:2px solid var(--border-dark);background:#fff;flex:none;margin:0 2px}

.stage--done.svelte-dedtn4 .dot:where(.svelte-dedtn4){background:#2e7d32;border-color:#2e7d32}
.stage--done.svelte-dedtn4 .line:where(.svelte-dedtn4){background:#2e7d32}
.stage--now.svelte-dedtn4 .dot:where(.svelte-dedtn4){background:#1565c0;border-color:#1565c0;box-shadow:0 0 0 3px rgba(21,101,192,.18)}
.stage--now.svelte-dedtn4 .line--left:where(.svelte-dedtn4){background:#2e7d32}
.stage--todo.svelte-dedtn4 .dot:where(.svelte-dedtn4){border-color:var(--border-dark);background:#fff}
.stage--na.svelte-dedtn4 .dot:where(.svelte-dedtn4){border-color:var(--border);background:var(--background-light);width:7px;height:7px}
.stage--bad.svelte-dedtn4 .dot:where(.svelte-dedtn4){background:#c62828;border-color:#c62828}

.label.svelte-dedtn4{font-size:11px;line-height:1.3;color:var(--text-grey);white-space:nowrap;margin-top:6px;padding:0 6px}
.label--na.svelte-dedtn4{opacity:.5;text-decoration:line-through}
.label--now.svelte-dedtn4{color:#1565c0;font-weight:600}

.caption.svelte-dedtn4{font-size:12px;color:var(--text-grey);margin-top:6px}
.caption--now.svelte-dedtn4{color:#1565c0;font-weight:500}
.caption--bad.svelte-dedtn4{color:#c62828;font-weight:500}
.caption--warn.svelte-dedtn4{color:#e65100;font-weight:600}

/* Compact variant for the runs list: dots only, so the segments stay tight
   instead of stretching across the column. */
.row.svelte-dedtn4 .stage:where(.svelte-dedtn4){flex:0 0 auto}
.row.svelte-dedtn4 .line:where(.svelte-dedtn4){flex:0 0 14px;min-width:0}
/* No label to centre under, so the outer half-segments would only indent the
   row. */
.row.svelte-dedtn4 .line--hidden:where(.svelte-dedtn4){flex:0 0 0}
.row.svelte-dedtn4 .caption:where(.svelte-dedtn4){margin-top:5px}

/* Equal columns, but capped: stretched across the full panel the dots drift so
   far apart they stop reading as one track. */
.head.svelte-dedtn4 .stages:where(.svelte-dedtn4){max-width:420px}
.head.svelte-dedtn4 .stage:where(.svelte-dedtn4){flex:1 1 0}
.head.svelte-dedtn4 .dot:where(.svelte-dedtn4){width:11px;height:11px}