/* ============================================================
   .uk-flow — unified canonical step-flow diagram (loaded only on /docs/ui-kit)
   ============================================================
   Replaces two legacy declarations:
     .ip-flow + .ip-flow-step + .ip-flow-icon + -icon--highlight
              + -icon--vpn + .ip-flow-label + -detail + .ip-flow-arrow
        (tools.css; horizontal hop-by-hop request flow on /tools/ip-lookup)
     .escalation-flow + .escalation-step + .escalation-step.final
                      + .escalation-level + .escalation-method
                      + .escalation-wait + .escalation-arrow
        (docs.css; vertical escalation policy on /docs/monitoring)

   Both visualize step-by-step processes. Differences (direction, step
   presentation, arrow label) collapse into orthogonal modifiers.

   Slots:
     .uk-flow                     root (default horizontal flex)
       .uk-flow-step              one step (vertical stack of inner pieces)
         .uk-flow-step-icon       optional 56px icon circle
         .uk-flow-step-eyebrow    optional uppercase tracked label ("LEVEL 1")
         .uk-flow-step-title      main label (bold)
         .uk-flow-step-detail     muted small text (with inline code support)
       .uk-flow-arrow             empty connector; auto-renders chevron via
                                    CSS mask. Optional text content shows
                                    below the chevron ("No confirmation?")

   Root modifiers:
     --vertical          column flow (escalation-style)
     --card              card chrome around the entire flow (escalation-style
                         outer wrapper: bg-card + border + xl-radius + xl-padding)

   Step modifiers:
     --card              bordered box (escalation-step look)
     --highlight         primary glow (ip-flow focal step)
     --final             success-tinted terminal (escalation final step)

   Step-icon tone modifiers:
     --success           green tint (replaces .ip-flow-icon--vpn)
     (default tone is primary)

   Chevron auto-rotation: horizontal → right; vertical → down.
   Auto-responsive: at <= 768px, horizontal flow flips to column with
   rotated arrows.
   ============================================================ */

/* ---------- Root ---------- */
.uk-flow {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
    padding: var(--space-lg) 0;
}

.uk-flow--vertical {
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
}

.uk-flow--card {
    padding: var(--space-xl);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
}

/* ---------- Step ---------- */
.uk-flow-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 0 0 auto;
    width: 120px;
    gap: 2px;
}

.uk-flow--vertical .uk-flow-step {
    width: 200px;
}

.uk-flow-step--card {
    padding: var(--space-lg);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    gap: var(--space-xs);
}

.uk-flow-step--highlight .uk-flow-step-icon {
    background: rgba(var(--color-primary-rgb), 0.18);
    border-color: rgba(var(--color-primary-rgb), 0.4);
    box-shadow: 0 0 20px rgba(var(--color-primary-rgb), 0.12);
}

.uk-flow-step--final {
    border-color: var(--color-primary);
    background: rgba(var(--color-success-rgb), 0.05);
}

/* ---------- Step inner pieces ---------- */
.uk-flow-step-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    background: rgba(var(--color-primary-rgb), 0.1);
    border: 1px solid rgba(var(--color-primary-rgb), 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-sm);
    transition: all var(--transition-base);
    flex-shrink: 0;
}

.uk-flow-step-icon svg {
    width: 26px;
    height: 26px;
    color: var(--color-primary);
}

.uk-flow-step-icon--success {
    background: rgba(var(--color-success-rgb), 0.1);
    border-color: rgba(var(--color-success-rgb), 0.3);
}

.uk-flow-step-icon--success svg {
    color: var(--color-success);
}

.uk-flow-step-eyebrow {
    font-size: var(--font-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
}

.uk-flow-step-title {
    font-size: var(--font-md);
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
}

.uk-flow-step--card .uk-flow-step-title {
    font-size: var(--font-lg);
}

.uk-flow-step-detail {
    font-size: var(--font-xs);
    color: var(--color-text-muted);
    line-height: 1.4;
}

.uk-flow-step-detail code {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--color-primary-light);
    background: rgba(var(--color-primary-rgb), 0.1);
    padding: 1px 4px;
    border-radius: var(--radius-sm);
}

/* ---------- Arrow connector ---------- */
.uk-flow-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-shrink: 0;
    color: var(--color-text-muted);
    font-size: var(--font-xs);
    padding: 0 var(--space-sm);
    /* Lift the chevron level with the step icons in horizontal mode */
    padding-top: 16px;
}

.uk-flow--vertical .uk-flow-arrow {
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
}

.uk-flow-arrow::before {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M12 5l7 7-7 7'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M12 5l7 7-7 7'/></svg>") no-repeat center / contain;
    opacity: 0.5;
}

.uk-flow--vertical .uk-flow-arrow::before {
    transform: rotate(90deg);
}

/* ---------- Responsive: horizontal flow flips to column on narrow viewports ---------- */
@media (max-width: 768px) {
    .uk-flow:not(.uk-flow--vertical) {
        flex-direction: column;
        align-items: center;
        gap: var(--space-sm);
    }
    .uk-flow:not(.uk-flow--vertical) .uk-flow-arrow {
        padding-top: 0;
    }
    .uk-flow:not(.uk-flow--vertical) .uk-flow-arrow::before {
        transform: rotate(90deg);
    }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .uk-flow-step-icon {
        transition: none;
    }
}