/* sanj.flow — frontend (site paper / ink)
 * Copyright (c) 2026 sanj <sanj@fromsanj.ru>
 * https://fromsanj.ru/
 */
.flow-wrap {
    --flow-bg: var(--mi-paper, #f4f4f2);
    --flow-ink: var(--mi-ink, #111111);
    --flow-muted: var(--mi-muted, #555555);
    --flow-line: var(--mi-line, #d8d8d8);
    --flow-fill: var(--mi-fill, #e9e9e6);
    --flow-font: var(--mi-sans, "Segoe UI", system-ui, sans-serif);

    background: var(--flow-bg);
    border: 1px solid var(--flow-line);
    margin: 2em 0;
    padding: 20px 12px 28px;
    position: relative;
    overflow: hidden;
    font-family: var(--flow-font);
    color: var(--flow-ink);
}

.flow-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(0, 0, 0, 0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
    z-index: 0;
}

.flow-svg {
    display: block;
    max-width: 100%;
    min-width: 0;
    height: auto;
    position: relative;
    z-index: 1;
}

.flow-arrow {
    fill: var(--flow-line);
}

.flow-arrow--dead {
    fill: var(--flow-muted);
    opacity: 0.55;
}

.flow-edge {
    stroke: var(--flow-line);
    stroke-width: 1.6;
    opacity: 0.9;
}

.flow-edge.is-dead {
    stroke: var(--flow-muted);
    stroke-dasharray: 5 5;
    opacity: 0.55;
}

.flow-edge-label {
    fill: var(--flow-muted);
    font-family: var(--flow-font);
    font-size: 11px;
    font-weight: 500;
}

.flow-node {
    opacity: 0;
    transition: opacity 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.flow-node.is-visible {
    opacity: 1;
}

.flow-node__img {
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.06));
}

.flow-node__label {
    fill: var(--flow-ink);
    font-family: var(--flow-font);
    font-size: 12px;
    font-weight: 600;
}

.flow-node__sub {
    fill: var(--flow-muted);
    font-family: var(--flow-font);
    font-size: 10px;
}

/* LED blink */
.flow-led {
    fill: #c8c8c4;
    opacity: 0.35;
}

.flow-node.is-visible .flow-led--a {
    animation: flow-blink 1.8s ease-in-out infinite;
}

.flow-node.is-visible .flow-led--b {
    animation: flow-blink 1.8s ease-in-out 0.35s infinite;
}

.flow-node.is-visible .flow-led--c {
    animation: flow-blink 1.8s ease-in-out 0.7s infinite;
}

.flow-node.is-active .flow-led {
    fill: var(--flow-ink);
}

.flow-node.is-error .flow-led {
    fill: #8a2a2a;
}

.flow-node.is-done .flow-led {
    fill: #2a6a3a;
}

@keyframes flow-blink {
    0%,
    100% {
        opacity: 0.25;
    }
    50% {
        opacity: 1;
    }
}

/* Packet dots on animated edges — injected by JS */
.flow-packet {
    fill: var(--flow-ink);
    opacity: 0.45;
}

.flow-wrap > .flow-svg.flow-svg--mobile {
    display: none;
}

@media (max-width: 768px) {
    .flow-wrap {
        padding: 16px 8px 24px;
        overflow: hidden;
    }

    .flow-wrap > .flow-svg.flow-svg--desktop {
        display: none;
    }

    .flow-wrap > .flow-svg.flow-svg--mobile {
        display: block;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        height: auto;
    }
}