/* The grid responds to the output panel width, including when its splitter moves. */
.generation-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
    grid-auto-rows: 1fr;
    gap: 6px;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--sans, system-ui, sans-serif);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
}

.generation-step {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    min-height: 50px;
    padding: 7px 9px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--panel);
    color: var(--text-dim);
    box-sizing: border-box;
}

.generation-step-marker {
    display: inline-flex;
    flex: 0 0 14px;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    font-family: system-ui, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

.generation-step-copy {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.generation-step-name {
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
}

.generation-step-status {
    font-size: 10px;
    font-weight: 400;
    line-height: 1.2;
    white-space: nowrap;
}

.generation-step--running {
    border-color: var(--copper);
    background: color-mix(in srgb, var(--copper) 8%, var(--panel));
    color: var(--copper);
}

.generation-step--running .generation-step-marker {
    width: 13px;
    height: 13px;
    flex-basis: 13px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: generation-step-spin 900ms linear infinite;
}

.generation-step--done {
    border-color: color-mix(in srgb, var(--ok) 55%, var(--line));
    background: color-mix(in srgb, var(--ok) 7%, var(--panel));
    color: var(--ok);
}

.generation-step--failed {
    border-color: var(--err);
    background: color-mix(in srgb, var(--err) 7%, var(--panel));
    color: var(--err);
}

.generation-step--skipped {
    border-style: dashed;
}

@keyframes generation-step-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .generation-step--running .generation-step-marker { animation: none; }
}