/* ─────────────────────────────────── */
/* FEATURE: Connections                */
/* ─────────────────────────────────── */

/* ─────────────────────────────────── */
/* BLOCK: Connection list              */
/* ─────────────────────────────────── */

.connection-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

/* ─────────────────────────────────── */
/* BLOCK: Connection row               */
/* ─────────────────────────────────── */

.connection-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Stakeholder 1: readonly input, equal width to s2 */
.connection-row__s1 {
    flex: 1;
    min-width: 0;
    font-size: var(--font-sm);
    font-weight: var(--weight-normal);
    color: var(--color-grey-500);
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-grey-100);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: default;
}

/* Main line: s1 + direction + s2 + delete */
.connection-row__line {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Direction toggle: 3-state cycle button */
.connection-row__direction {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    border: 2px solid var(--color-grey-100);
    border-radius: var(--radius-md);
    background: none;
    color: var(--color-grey-500);
    transition:
        color var(--transition-fast),
        border-color var(--transition-fast);
}

.connection-row__direction:hover,
.connection-row__direction:active {
    border-color: var(--color-blue-dark);
    color: var(--color-blue-dark);
}

.connection-row__direction .material-symbols-outlined {
    font-size: var(--icon-sm);
}

.connection-row__direction[data-direction='1_to_2'] .material-symbols-outlined {
    transform: scaleX(-1);
}

/* Stakeholder 2 input area */
.connection-row__field {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    gap: var(--space-2);
}

.connection-row__input {
    font-size: var(--font-sm);
    font-weight: var(--weight-normal);
    color: var(--color-text);
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: none;
    width: 100%;
    transition: border-color var(--transition-fast);
}

.connection-row__input:hover,
.connection-row__input:focus {
    outline: none;
    border-color: var(--color-blue-dark);
    background-color: var(--color-blue-light);
}

.connection-row__input::placeholder {
    color: var(--color-grey-300);
}

.connection-row__input[readonly] {
    background-color: var(--color-grey-100);
    color: var(--color-grey-500);
    cursor: default;
}

/* Stakeholder 2: keep normal styling when a valid name is selected */
.connection-row__input[data-role='connection-s2-input'][readonly] {
    background-color: var(--color-white);
    color: var(--color-grey-900);
    cursor: default;
}

.connection-row__input[readonly]:hover,
.connection-row__input[readonly]:focus {
    border-color: var(--color-border);
    background-color: var(--color-grey-100);
}

/* Autocomplete tray (single horizontal line of pills) */
.connection-row__suggest {
    display: none;
    flex-wrap: nowrap;
    gap: var(--space-2);
    overflow: hidden;
}

.connection-row__suggest[data-active='true'] {
    display: flex;
}