/* ============================================================
   Automated Workflows — 3-lane demo (vanilla port)
   Light theme, cool palette, no gradients. Container-query
   driven. All classes prefixed `wf-`.
   ============================================================ */

.wf-section-wrap {
    --wf-bg:           #F7F5FB;
    --wf-bg-card:      #FFFFFF;
    --wf-line:         #E4DEF1;
    --wf-line-soft:    #ECE6F5;
    --wf-line-deep:    #D9CCEF;
    --wf-ink:          #1B1530;
    --wf-ink-soft:     #4A3F66;
    --wf-ink-faint:    #8A7FA6;
    --wf-accent:       #5A2A8C;
    --wf-accent-soft:  #6E56CF;
    --wf-accent-tint:  #EFE7F8;
    --wf-success:      #10B981;
    --wf-warn:         #D97560;
    --wf-mono:         'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
    --wf-display:      'Plus Jakarta Sans', -apple-system, system-ui, sans-serif;

    padding: 80px 0 96px;
    background:
        radial-gradient(120% 80% at 80% 0%, rgba(110, 86, 207, 0.08) 0%, transparent 55%),
        radial-gradient(100% 60% at 0% 100%, rgba(217, 117, 96, 0.04) 0%, transparent 50%),
        var(--wf-bg);
}

.wf-section-wrap__container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 3rem;
}

.wf-section-wrap__head { margin-bottom: 2.5rem; }

.wf-section-wrap__label {
    font-family: var(--wf-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wf-ink-faint);
    margin-bottom: 1.25rem;
    display: block;
}

.wf-section-wrap__headline {
    font-family: var(--wf-display);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 300;
    color: var(--wf-ink);
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0 0 1rem 0;
    max-width: 820px;
    position: relative;
    display: inline-block;
}

.wf-section-wrap__headline::after {
    content: '';
    display: block;
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, var(--neural-purple, #3c1361), var(--neural-orange, #d97706));
    margin-top: 0.875rem;
}

.wf-section-wrap__sub {
    font-family: var(--wf-display);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--wf-ink-soft);
    max-width: 720px;
    margin: 1rem 0 0;
}

/* ── Shell ────────────────────────────────────────── */
.wf-shell {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    position: relative;
    padding: 24px;
    border-radius: 24px;
    background: var(--wf-bg-card);
    border: 1px solid var(--wf-line);
    box-shadow:
        0 1px 2px rgba(60, 19, 97, 0.04),
        0 20px 60px -30px rgba(60, 19, 97, 0.18);
    overflow: hidden;
}

.wf-diagram {
    position: relative;
    width: 100%;
    aspect-ratio: 1200 / 600;
    container-type: inline-size;
    container-name: wf;
    font-family: var(--wf-display);
    color: var(--wf-ink);
}

/* Account boundary */
.wf-bound {
    position: absolute;
    inset: 4px;
    border: 1px dashed var(--wf-line);
    border-radius: 18px;
    pointer-events: none;
}

.wf-bound__label,
.wf-bound__status {
    position: absolute;
    top: -0.55cqi;
    background: var(--wf-bg-card);
    padding: 0 0.6cqi;
    font-family: var(--wf-mono);
    font-size: 0.85cqi;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--wf-ink-faint);
}

.wf-bound__label { left: 2cqi; }

.wf-bound__status {
    right: 2cqi;
    display: inline-flex;
    align-items: center;
    gap: 0.5cqi;
}

.wf-bound__status-dot {
    width: 0.5cqi;
    height: 0.5cqi;
    border-radius: 999px;
    background: var(--wf-success);
    display: inline-block;
}

/* ── Lanes container ──────────────────────────────── */
.wf-lanes {
    position: absolute;
    inset: 4cqi 3cqi 3cqi 3cqi;
    display: flex;
    flex-direction: column;
    gap: 1.4cqi;
}

.wf-lane {
    background: var(--wf-bg-card);
    border: 1px solid var(--wf-line);
    border-radius: 1cqi;
    padding: 1.3cqi 1.6cqi 1.2cqi;
    display: grid;
    grid-template-columns: 17% 1fr;
    gap: 1.8cqi;
    align-items: center;
    min-height: 0;
    position: relative;
}

/* Lane label column */
.wf-label {
    display: flex;
    flex-direction: column;
    gap: 0.5cqi;
    min-width: 0;
}

.wf-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5cqi;
    font-family: var(--wf-mono);
    font-size: 0.82cqi;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--wf-ink-faint);
}

.wf-trigger svg {
    width: 1.15cqi;
    height: 1.15cqi;
    flex-shrink: 0;
    stroke: var(--wf-accent);
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.wf-name {
    font-family: var(--wf-display);
    font-weight: 300;
    font-size: 1.55cqi;
    letter-spacing: -0.3px;
    color: var(--wf-ink);
    line-height: 1.15;
}

/* Autonomy meter */
.wf-meter {
    margin-top: 0.5cqi;
    display: flex;
    align-items: center;
    gap: 0.55cqi;
}

.wf-meter__cap {
    font-family: var(--wf-mono);
    font-size: 0.72cqi;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--wf-ink-faint);
    white-space: nowrap;
}

.wf-meter__track {
    position: relative;
    flex: 1;
    height: 0.35cqi;
    background: var(--wf-line);
    border-radius: 0.25cqi;
    overflow: visible;
}

.wf-meter__track::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: var(--wf-accent-soft);
    border-radius: 0.25cqi;
    opacity: 0.5;
    width: calc(var(--wf-autonomy, 0.5) * 100%);
}

.wf-meter__dot {
    position: absolute;
    top: 50%;
    width: 0.9cqi;
    height: 0.9cqi;
    border-radius: 999px;
    background: var(--wf-accent);
    border: 0.15cqi solid var(--wf-bg-card);
    box-shadow: 0 0 0 0.18cqi var(--wf-accent-tint);
    transform: translate(-50%, -50%);
    left: calc(var(--wf-autonomy, 0.5) * 100%);
}

/* Pipeline column */
.wf-pipeline {
    display: grid;
    grid-template-columns: repeat(var(--wf-steps, 4), 1fr);
    gap: 0;
    align-items: stretch;
    min-width: 0;
    position: relative;
    overflow: hidden;
    border-radius: 0.7cqi;
    padding: 0.4cqi 0;
}

/* Sweeping glow */
.wf-flow-glow {
    position: absolute;
    top: 50%;
    left: 0;
    width: 22%;
    height: 240%;
    border-radius: 50%;
    background: rgba(110, 86, 207, 0.42);
    filter: blur(2.4cqi);
    transform: translate(-50%, -50%);
    pointer-events: none;
    animation: wf-sweep var(--wf-glow-duration, 7s) ease-in-out infinite;
    z-index: 0;
}

@keyframes wf-sweep {
    0%   { left: -8%;  opacity: 0; }
    8%   {             opacity: 1; }
    92%  {             opacity: 1; }
    100% { left: 108%; opacity: 0; }
}

.wf-step {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0.7cqi 1cqi 0.7cqi 1cqi;
    background: #FBFAFE;
    border: 1px solid var(--wf-line);
    border-radius: 0.7cqi;
    margin-right: 1.4cqi;
    transition: background 0.3s, border-color 0.3s, transform 0.3s;
    min-width: 0;
    z-index: 1;
}

.wf-step:last-child { margin-right: 0; }

.wf-step-head {
    display: flex;
    align-items: center;
    gap: 0.5cqi;
    margin-bottom: 0.35cqi;
}

.wf-step-marker {
    width: 1.4cqi;
    height: 1.4cqi;
    border-radius: 999px;
    background: var(--wf-bg-card);
    border: 0.12cqi solid var(--wf-line-deep);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--wf-mono);
    font-size: 0.78cqi;
    color: var(--wf-ink-faint);
    flex-shrink: 0;
    position: relative;
}

.wf-step-label {
    font-family: var(--wf-display);
    font-weight: 500;
    font-size: 1.05cqi;
    color: var(--wf-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wf-step-detail {
    font-family: var(--wf-mono);
    font-size: 0.82cqi;
    letter-spacing: 0.3px;
    color: var(--wf-ink-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Step states */
.wf-step.is-done {
    background: var(--wf-bg-card);
    border-color: var(--wf-line);
}

.wf-step.is-done .wf-step-marker {
    background: rgba(16, 185, 129, 0.10);
    border-color: var(--wf-success);
    color: var(--wf-success);
}

.wf-step.is-active {
    background: var(--wf-bg-card);
    border-color: var(--wf-accent);
    box-shadow: 0 0 0 0.18cqi rgba(110, 86, 207, 0.10);
}

.wf-step.is-active .wf-step-marker {
    border-color: var(--wf-accent);
    background: var(--wf-accent-tint);
    color: var(--wf-accent);
}

.wf-step.is-active .wf-step-marker::after {
    content: '';
    position: absolute;
    inset: -0.22cqi;
    border-radius: 999px;
    border: 0.12cqi solid var(--wf-accent);
    animation: wf-step-ring 1.6s ease-out infinite;
}

@keyframes wf-step-ring {
    0%   { transform: scale(1);   opacity: 0.8; }
    100% { transform: scale(1.7); opacity: 0; }
}

/* Human-gate styling */
.wf-step.is-human {
    border-style: dashed;
    border-color: var(--wf-warn);
    background: rgba(217, 117, 96, 0.04);
}

.wf-step.is-human .wf-step-marker {
    border-color: var(--wf-warn);
    background: rgba(217, 117, 96, 0.10);
    color: var(--wf-warn);
}

.wf-step.is-human.is-waiting .wf-step-marker::after {
    content: '';
    position: absolute;
    inset: -0.22cqi;
    border-radius: 999px;
    border: 0.12cqi solid var(--wf-warn);
    animation: wf-step-ring 1.8s ease-out infinite;
}

.wf-step.is-human.is-done {
    background: var(--wf-bg-card);
    border-style: solid;
    border-color: var(--wf-line);
}

.wf-step.is-human.is-done .wf-step-marker {
    background: rgba(16, 185, 129, 0.10);
    border-color: var(--wf-success);
    color: var(--wf-success);
}

/* Connector arrows between steps */
.wf-step::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -1.4cqi;
    width: 1.4cqi;
    height: 1px;
    background: var(--wf-line-deep);
    transform: translateY(-50%);
}

.wf-step:last-child::after { display: none; }

.wf-step::before {
    content: '';
    position: absolute;
    top: 50%;
    right: -0.55cqi;
    width: 0;
    height: 0;
    border-left: 0.45cqi solid var(--wf-line-deep);
    border-top: 0.3cqi solid transparent;
    border-bottom: 0.3cqi solid transparent;
    transform: translateY(-50%);
}

.wf-step:last-child::before { display: none; }

/* Lane status pill (top-right of each lane) */
.wf-lane-status {
    position: absolute;
    top: 1.2cqi;
    right: 1.4cqi;
    display: inline-flex;
    align-items: center;
    gap: 0.4cqi;
    padding: 0.25cqi 0.7cqi 0.25cqi 0.5cqi;
    background: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    border-radius: 999px;
    font-family: var(--wf-mono);
    font-size: 0.8cqi;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--wf-ink-faint);
    z-index: 3;
}

.wf-lane-status__dot {
    width: 0.45cqi;
    height: 0.45cqi;
    border-radius: 999px;
    background: var(--wf-success);
    box-shadow: 0 0 0 0.22cqi rgba(16, 185, 129, 0.15);
    animation: wf-dot-pulse 2.4s ease-in-out infinite;
}

@keyframes wf-dot-pulse {
    0%, 100% { box-shadow: 0 0 0 0.22cqi rgba(16, 185, 129, 0.15); }
    50%      { box-shadow: 0 0 0 0.4cqi rgba(16, 185, 129, 0.04); }
}

/* ── Responsive ──────────────────────────── */
@media (max-width: 880px) {
    .wf-section-wrap { padding: 56px 0 72px; }
    .wf-section-wrap__container { padding: 0 1.5rem; }
    .wf-shell { padding: 12px; border-radius: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .wf-flow-glow,
    .wf-step.is-active .wf-step-marker::after,
    .wf-step.is-human.is-waiting .wf-step-marker::after,
    .wf-lane-status__dot {
        animation: none !important;
    }
}