/* Vertical workflow: phases run from top to bottom inside a scrollable panel. */
.flow-card { overflow: hidden; }

.flow-scroll {
    width: 100%;
    max-height: 72vh;
    min-height: 420px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 14px 10px 20px;
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
}

.flow-timeline {
    direction: rtl;
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    height: auto;
    padding: 6px 16px;
}

.flow-timeline::before { display: none; }

.flow-stage {
    direction: rtl;
    position: relative;
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    grid-template-rows: auto;
    align-items: center;
    justify-items: stretch;
    min-height: 124px;
    padding: 9px 0;
}

.flow-stage::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: 78px;
    bottom: -46px;
    right: 41px;
    width: 2px;
    background: color-mix(in srgb, var(--phase) 65%, #56677b);
}

.flow-stage:last-child::after { display: none; }
.flow-branch { display: none; }

.flow-node {
    direction: rtl;
    position: relative;
    z-index: 2;
    top: auto;
    left: auto;
    transform: none;
    grid-column: 1;
    grid-row: 1;
    width: 76px;
    height: 58px;
    margin: 0 auto;
    border-radius: 12px;
    font-size: .72rem;
    flex-direction: column;
    gap: 3px;
}

.flow-check { width: 21px; height: 21px; }

.flow-detail,
.flow-stage:nth-child(odd) .flow-detail,
.flow-stage:nth-child(even) .flow-detail {
    position: relative;
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    width: auto;
    min-height: 94px;
    padding: 13px 16px;
    text-align: right;
}

.flow-detail b { display: block; font-size: 1rem; }
.flow-detail p { margin: 6px 0; font-size: .82rem; }
.flow-detail time { display: block; }

.flow-stage em {
    position: static;
    display: inline-block;
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    justify-self: left;
    margin: 0 0 10px 12px;
    padding: 3px 8px;
    border-radius: 10px;
    background: #101720b8;
}

.flow-scroll::-webkit-scrollbar { width: 10px; }
.flow-scroll::-webkit-scrollbar-track { background: #101720; border-radius: 20px; }
.flow-scroll::-webkit-scrollbar-thumb { background: #53657a; border: 2px solid #101720; border-radius: 20px; }
.flow-scroll::-webkit-scrollbar-thumb:hover { background: #71869e; }

@media (max-width: 800px) {
    .flow-scroll { max-height: 68vh; padding-inline: 2px; }
    .flow-timeline { padding-inline: 4px; }
    .flow-stage { grid-template-columns: 70px minmax(0, 1fr); min-height: 116px; }
    .flow-stage::after { right: 34px; }
    .flow-node { width: 64px; height: 54px; font-size: .65rem; }
    .flow-detail { min-height: 88px; padding: 10px 12px; }
    .flow-detail b { font-size: .9rem; }
    .flow-detail p { font-size: .74rem; }
}

/* Final vertical alignment and connector geometry. */
.flow-timeline {
    max-width: 980px;
    margin-inline: auto;
    padding: 8px 20px 28px;
}

.flow-stage {
    grid-template-columns: 110px minmax(0, 1fr);
    min-height: 138px;
    padding: 10px 0;
}

.flow-stage::after {
    top: 50%;
    bottom: auto;
    right: 54px;
    height: 100%;
    width: 3px;
    border-radius: 4px;
    background: #415166;
}

.flow-stage.completed::after {
    background: #35ce9b;
}

.flow-node {
    width: 88px;
    min-height: 66px;
    height: auto;
    padding: 7px 5px;
    border: 1px solid color-mix(in srgb, var(--phase) 70%, #fff);
}

.flow-check {
    flex: 0 0 23px;
    width: 23px;
    height: 23px;
}

.flow-stage.running .flow-check {
    color: #07131d;
    background: var(--phase);
    border-color: #fff9;
}

.flow-detail,
.flow-stage:nth-child(odd) .flow-detail,
.flow-stage:nth-child(even) .flow-detail {
    min-width: 0;
    min-height: 108px;
    max-width: 100%;
    overflow: hidden;
}

.flow-detail b,
.flow-detail p,
.flow-detail time {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.flow-detail p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

@media (max-width: 800px) {
    .flow-timeline { padding-inline: 2px; }
    .flow-stage { grid-template-columns: 82px minmax(0, 1fr); }
    .flow-stage::after { right: 40px; }
    .flow-node { width: 72px; }
}