/* ===== LAYOUTS/SIGNAL-CHAIN-HORIZONTAL.CSS ===== */
/* Horizontal signal chain variant (desktop only) */

@media (min-width: 681px) {
    .signal-chain--horizontal {
        display: grid;
        grid-template-columns: repeat(5, var(--node-w));
        column-gap: var(--connector-h);
        row-gap: var(--connector-h);
        justify-content: center;
        align-items: center;
        flex-direction: unset;
        padding-right: 20px;
    }

    /* Grid placement */
    .signal-chain--horizontal > .signal-bus {
        grid-row: 1;
        grid-column: 1 / -1;
    }
    .signal-chain--horizontal > .signal-bus-bar {
        display: none;
    }
    .signal-chain--horizontal > .signal-node-eq {
        grid-row: 2;
        grid-column: 1;
    }
    .signal-chain--horizontal > .signal-node-select {
        grid-row: 2;
        grid-column: 2;
    }
    .signal-chain--horizontal > .signal-node-rec {
        grid-row: 2;
        grid-column: 3;
        z-index: 2;
    }
    .signal-chain--horizontal > .signal-node-vol {
        grid-row: 2;
        grid-column: 4;
    }
    .signal-chain--horizontal > .signal-node-mode {
        grid-row: 2;
        grid-column: 5;
    }
    .signal-chain--horizontal > .signal-node-path {
        grid-row: 3;
        grid-column: 5;
    }
    .signal-chain--horizontal > .signal-node-amp {
        grid-row: 3;
        grid-column: 4;
    }
    .signal-chain--horizontal > .signal-node-prot {
        grid-row: 3;
        grid-column: 3;
    }
    .signal-chain--horizontal > .signal-node-relay {
        grid-row: 3;
        grid-column: 2;
    }
    .signal-chain--horizontal > .signal-node-out {
        grid-row: 3;
        grid-column: 1;
    }

    /* Direct children fill grid cells */
    .signal-chain--horizontal > * {
        width: 100%;
    }

    /* Connectors: Row 1 (horizontal, rightward) */
    .signal-chain--horizontal > .signal-node-eq::after,
    .signal-chain--horizontal > .signal-node-select::after,
    .signal-chain--horizontal > .signal-node-rec::after,
    .signal-chain--horizontal > .signal-node-vol::after {
        top: 50%;
        left: 100%;
        width: var(--connector-h);
        height: 2px;
        transform: translateY(-50%);
    }

    /* Bus connector: vertical down */
    .signal-chain--horizontal > .signal-bus::after {
        left: calc(var(--node-w) / 2);
        transform: none;
    }

    /* PATH incoming from MODE */
    .signal-chain--horizontal > .signal-node-path::before {
        content: none;
    }

    /* Connectors: Row 2 (horizontal, leftward) */
    .signal-chain--horizontal > .signal-node-path::after,
    .signal-chain--horizontal > .signal-node-amp::after,
    .signal-chain--horizontal > .signal-node-prot::after,
    .signal-chain--horizontal > .signal-node-relay::after {
        top: 50%;
        left: auto;
        right: 100%;
        width: var(--connector-h);
        height: 2px;
        transform: translateY(-50%);
    }

    /* OUT top stem: not needed in horizontal */
    .signal-chain--horizontal > .signal-node-out::before {
        content: none;
    }

    /* Fork (PATH) in horizontal mode */
    .signal-chain--horizontal .signal-fork {
        padding-top: 0;
    }

    .signal-chain--horizontal .signal-fork-paths {
        flex-direction: column;
        padding: 0 var(--fork-leg);
        width: 100%;
    }

    .signal-chain--horizontal .signal-fork-path {
        width: 100%;
    }

    /* Split bar → vertical on left */
    .signal-chain--horizontal .signal-fork-paths::before {
        left: 0;
        right: auto;
        bottom: 0;
        width: 2px;
        height: auto;
    }

    /* Merge bar → vertical on right */
    .signal-chain--horizontal .signal-fork-paths::after {
        top: 0;
        left: auto;
        right: 0;
        width: 2px;
        height: auto;
    }

    /* Fork path legs → horizontal */
    .signal-chain--horizontal .signal-fork-path::before {
        bottom: auto;
        left: auto;
        right: 100%;
        top: 50%;
        width: var(--fork-leg);
        height: 2px;
        transform: translateY(-50%);
    }

    .signal-chain--horizontal .signal-fork-path::after {
        top: 50%;
        left: 100%;
        width: var(--fork-leg);
        height: 2px;
        transform: translateY(-50%);
    }

    /* Split (OUT) in horizontal mode */
    .signal-chain--horizontal .signal-split {
        padding-top: 0;
    }

    .signal-chain--horizontal .signal-split-paths {
        flex-direction: column;
        padding-top: 0;
        padding-left: var(--fork-leg);
        width: 100%;
    }

    .signal-chain--horizontal .signal-split-path {
        width: 100%;
    }

    /* Fan-out bar → vertical on left */
    .signal-chain--horizontal .signal-split-paths::before {
        left: 0;
        right: auto;
        bottom: 0;
        width: 2px;
        height: auto;
    }

    /* Split path legs → horizontal */
    .signal-chain--horizontal .signal-split-path::before {
        bottom: auto;
        left: auto;
        right: 100%;
        top: 50%;
        width: var(--fork-leg);
        height: 2px;
        transform: translateY(-50%);
    }

    /* REC side-car repositioning */
    .signal-chain--horizontal .signal-rec-modes {
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        margin-top: 8px;
        margin-left: 0;
        width: max-content;
    }

    .signal-chain--horizontal .signal-rec-modes::before {
        right: auto;
        top: auto;
        bottom: 100%;
        left: 50%;
        width: 0;
        height: 8px;
        border-top: none;
        border-left: 1.5px dashed var(--signal-rail);
        transform: translateX(-50%);
    }

    /* Horizontal compact: spacer row for REC dropdown */
    .signal-chain--horizontal.signal-chain--compact {
        grid-template-rows: auto auto 60px auto;
    }

    .signal-chain--horizontal.signal-chain--compact > .signal-node-path {
        grid-row: 4;
    }
    .signal-chain--horizontal.signal-chain--compact > .signal-node-amp {
        grid-row: 4;
    }
    .signal-chain--horizontal.signal-chain--compact > .signal-node-prot {
        grid-row: 4;
    }
    .signal-chain--horizontal.signal-chain--compact > .signal-node-relay {
        grid-row: 4;
    }
    .signal-chain--horizontal.signal-chain--compact > .signal-node-out {
        grid-row: 4;
    }

    .signal-chain--horizontal.signal-chain--compact > .signal-node-mode::after {
        height: calc(60px + var(--connector-h) * 2);
    }
}