/* Conexiuni / path investigation — aligns with domains + catalog ink system */
.paths {
    --p-ink: #14213d;
    --p-muted: #6b7280;
    --p-line: #e4e8ee;
    --p-acc: #1d4e89;
    --p-surface: #f6f7f9;
    --p-white: #fff;
    color: var(--p-ink);
    max-width: 52rem;
    margin: 0 auto;
}

.paths__crumb { margin-bottom: 0.85rem; }

.paths__header {
    margin-bottom: 1.15rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--p-line);
}

.paths__title {
    margin: 0 0 0.35rem;
    font-size: clamp(1.45rem, 2.2vw, 1.75rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.paths__lead {
    margin: 0;
    max-width: 38rem;
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--p-muted);
}

.paths__form {
    background: var(--p-white);
    border: 1px solid var(--p-line);
    border-radius: 0.55rem;
    padding: 1rem 1.1rem 1.15rem;
    margin-bottom: 1rem;
}

.paths__modes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--p-line);
}

.paths__mode {
    cursor: pointer;
    border: 1px solid var(--p-line);
    background: var(--p-surface);
    border-radius: 999px;
    padding: 0.35rem 0.85rem;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--p-muted);
    user-select: none;
}

.paths__mode.is-active {
    background: #e8f0fa;
    border-color: #b6c6db;
    color: var(--p-acc);
}

.paths__mode:focus-within {
    outline: 2px solid var(--p-acc);
    outline-offset: 2px;
}

.paths__smart { margin-bottom: 1rem; }

.paths__label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--p-muted);
    margin-bottom: 0.3rem;
}

.paths__input,
.paths__select {
    width: 100%;
    border: 1px solid var(--p-line);
    border-radius: 0.4rem;
    padding: 0.55rem 0.7rem;
    font-size: 0.95rem;
    color: var(--p-ink);
    background: #fff;
}

.paths__input:focus,
.paths__select:focus {
    outline: 2px solid rgba(29, 78, 137, 0.35);
    border-color: var(--p-acc);
}

.paths__input--smart {
    font-size: 1rem;
    padding: 0.65rem 0.8rem;
}

.paths__hint {
    margin: 0.35rem 0 0;
    font-size: 0.8rem;
    color: var(--p-muted);
}

.paths__pair {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}

@media (min-width: 768px) {
    .paths__pair {
        grid-template-columns: 1fr auto 1fr;
        align-items: start;
    }
}

.paths__swap-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 1.5rem;
}

.paths__swap {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    border: 1px solid var(--p-line);
    background: var(--p-surface);
    color: var(--p-acc);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.paths__swap:hover {
    border-color: #b6c6db;
    background: #e8f0fa;
}

.paths__filters {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem;
    margin-bottom: 0.95rem;
}

@media (min-width: 640px) {
    .paths__filters {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .paths__filter--check {
        grid-column: 1 / -1;
    }
}

.paths__check {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.88rem;
    color: var(--p-ink);
    cursor: pointer;
    margin-top: 0.4rem;
}

.paths__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.paths__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 0.4rem;
    border: 1px solid var(--p-line);
    background: var(--p-surface);
    color: var(--p-ink);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.5rem 0.95rem;
    text-decoration: none;
    cursor: pointer;
    line-height: 1.2;
}

.paths__btn--primary {
    background: var(--p-acc);
    border-color: var(--p-acc);
    color: #fff;
}

.paths__btn--primary:hover {
    filter: brightness(1.05);
    color: #fff;
}

.paths__btn--ghost {
    background: transparent;
}

.paths__btn--sm {
    font-size: 0.82rem;
    padding: 0.35rem 0.65rem;
    font-weight: 500;
}

.paths__examples {
    margin: 0 0 1.25rem;
    font-size: 0.86rem;
    color: var(--p-muted);
    text-align: center;
}

.paths__examples-label { margin-right: 0.25rem; }

.paths__ex {
    color: var(--p-acc);
    text-decoration: none;
    margin: 0 0.35rem;
    font-weight: 500;
}

.paths__ex:hover { text-decoration: underline; }

.paths__chip {
    display: inline-flex;
    align-items: center;
    padding: 0.08rem 0.4rem;
    border-radius: 0.28rem;
    border: 1px solid var(--p-line);
    background: var(--p-surface);
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--p-ink);
}

.paths__picked { display: inline-block; margin-top: 0.35rem; }

.paths__err {
    margin: 0.3rem 0 0;
    color: #b42318;
    font-size: 0.82rem;
}

.paths__suggest {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% - 0.15rem);
    z-index: 30;
    max-height: 300px;
    overflow: auto;
    background: #fff;
    border: 1px solid var(--p-line);
    border-radius: 0.45rem;
    box-shadow: 0 8px 24px rgba(20, 33, 61, 0.1);
}

.paths__suggest-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    padding: 0.55rem 0.7rem;
    cursor: pointer;
    border-bottom: 1px solid var(--p-line);
}

.paths__suggest-item:last-child { border-bottom: 0; }
.paths__suggest-item:hover,
.paths__suggest-item.is-active { background: var(--p-surface); }

.paths__suggest-av {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 0.4rem;
    object-fit: cover;
    background: #e8ecf1;
    flex-shrink: 0;
}

.paths__suggest-av--person { border-radius: 50%; }

.paths__suggest-name {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.paths__suggest-meta {
    display: block;
    font-size: 0.75rem;
    color: var(--p-muted);
}

.paths__banner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 1rem;
    padding: 0.85rem 1rem;
    background: var(--p-surface);
    border: 1px solid var(--p-line);
    border-radius: 0.5rem;
}

.paths__banner-title {
    margin: 0 0 0.25rem;
    font-size: 1.05rem;
    font-weight: 650;
}

.paths__banner-sub,
.paths__banner-meta {
    margin: 0;
    font-size: 0.82rem;
    color: var(--p-muted);
}

.paths__banner-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: flex-start;
}

.paths__alert {
    padding: 0.9rem 1rem;
    border-radius: 0.45rem;
    background: #fff;
    border: 1px solid var(--p-line);
    font-size: 0.92rem;
    margin-bottom: 1rem;
}

.paths__alert--warn {
    background: #fff8eb;
    border-color: #f0d9a8;
}

.paths__path {
    background: #fff;
    border: 1px solid var(--p-line);
    border-radius: 0.55rem;
    padding: 1rem;
    margin-bottom: 0.85rem;
}

.paths__path-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.paths__path-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 650;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.paths__path-hops,
.paths__path-score {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--p-muted);
    background: var(--p-surface);
    border: 1px solid var(--p-line);
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
}

.paths__link-btn {
    border: 0;
    background: none;
    color: var(--p-acc);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
}

.paths__chain {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.25rem;
}

.paths__node {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem 0.55rem;
    background: var(--p-surface);
    border: 1px solid var(--p-line);
    border-radius: 0.4rem;
}

.paths__node-link {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--p-ink);
    text-decoration: none;
}

.paths__node-link:hover { color: var(--p-acc); text-decoration: underline; }

.paths__edge {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    max-width: 11rem;
    padding: 0 0.2rem;
    text-align: center;
}

.paths__edge-link {
    text-decoration: none;
    color: var(--p-acc);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.25;
}

.paths__edge-link:hover { text-decoration: underline; }

.paths__edge-role {
    display: block;
    font-weight: 500;
    color: var(--p-muted);
}

.paths__edge-meta {
    font-size: 0.68rem;
    color: var(--p-muted);
    margin-top: 0.1rem;
}

.paths__detail {
    margin-top: 0.85rem;
    font-size: 0.86rem;
    color: var(--p-muted);
}

.paths__detail summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--p-ink);
}

.paths__steps {
    margin: 0.55rem 0 0;
    padding-left: 1.1rem;
}

.paths__step-line a { color: var(--p-acc); text-decoration: none; }
.paths__step-line a:hover { text-decoration: underline; }

.paths__step-desc {
    margin: 0.2rem 0;
    color: var(--p-ink);
}

.paths__step-meta {
    margin: 0;
    font-size: 0.8rem;
    color: var(--p-muted);
}

.paths__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.55rem;
}

@media (min-width: 640px) {
    .paths__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.paths__card {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--p-line);
    border-radius: 0.45rem;
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.paths__card:hover {
    border-color: #b6c6db;
    box-shadow: 0 3px 12px rgba(20, 33, 61, 0.06);
    color: inherit;
}

.paths__card--common { display: flex; }

.paths__card-name {
    font-weight: 650;
    font-size: 0.95rem;
    color: var(--p-ink);
    text-decoration: none;
}

.paths__card-name:hover { color: var(--p-acc); }

.paths__card-rel {
    font-size: 0.82rem;
    color: var(--p-acc);
    font-weight: 500;
}

.paths__card-meta {
    font-size: 0.75rem;
    color: var(--p-muted);
}

.paths__card-edge {
    display: inline-block;
    margin-top: 0.25rem;
    font-size: 0.78rem;
    color: var(--p-muted);
    text-decoration: none;
}

.paths__card-edge:hover { color: var(--p-acc); }

.paths__via {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.8rem;
    color: var(--p-muted);
    margin-top: 0.25rem;
}

.paths__via a {
    color: var(--p-acc);
    text-decoration: none;
}

.paths__via a:hover { text-decoration: underline; }

/* Common-node legend + bridge cards */
.paths__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem 1rem;
    margin: 0 0 0.55rem;
    padding: 0.55rem 0.75rem;
    background: var(--p-surface);
    border: 1px solid var(--p-line);
    border-radius: 0.45rem;
}

.paths__legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    font-size: 0.86rem;
}

.paths__legend-dot {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.paths__legend-item--a .paths__legend-dot { background: #1d4e89; }
.paths__legend-item--b .paths__legend-dot { background: #0f6b4c; }

.paths__legend-who {
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: #fff;
    border-radius: 0.25rem;
    padding: 0.08rem 0.35rem;
    line-height: 1.2;
}

.paths__legend-item--a .paths__legend-who { background: #1d4e89; }
.paths__legend-item--b .paths__legend-who { background: #0f6b4c; }

.paths__legend-name {
    font-weight: 600;
    color: var(--p-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 16rem;
}

.paths__common-lead {
    margin: 0 0 0.85rem;
    font-size: 0.84rem;
    color: var(--p-muted);
}

.paths__common-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.paths__bridge {
    border: 1px solid var(--p-line);
    border-radius: 0.55rem;
    background: #fff;
    overflow: hidden;
}

.paths__bridge-center {
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--p-line);
    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
}

.paths__bridge-kicker {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--p-muted);
    width: 100%;
}

.paths__bridge-name {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--p-ink);
    text-decoration: none;
}

.paths__bridge-name:hover { color: var(--p-acc); text-decoration: underline; }

.paths__bridge-sides {
    display: grid;
    grid-template-columns: 1fr;
}

@media (min-width: 720px) {
    .paths__bridge-sides {
        grid-template-columns: 1fr 1fr;
    }
    .paths__bridge-side--a {
        border-right: 1px solid var(--p-line);
    }
}

.paths__bridge-side {
    padding: 0.75rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.paths__bridge-side--a {
    background: rgba(29, 78, 137, 0.04);
    border-left: 3px solid #1d4e89;
}

.paths__bridge-side--b {
    background: rgba(15, 107, 76, 0.04);
    border-left: 3px solid #0f6b4c;
}

.paths__bridge-tag {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--p-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.paths__bridge-side--a .paths__bridge-tag { color: #1d4e89; }
.paths__bridge-side--b .paths__bridge-tag { color: #0f6b4c; }

.paths__bridge-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 0.3rem;
    font-size: 0.86rem;
    line-height: 1.35;
}

.paths__bridge-person,
.paths__bridge-target {
    font-weight: 650;
    color: var(--p-ink);
    text-decoration: none;
}

.paths__bridge-person:hover,
.paths__bridge-target:hover {
    color: var(--p-acc);
    text-decoration: underline;
}

.paths__bridge-rel {
    font-weight: 600;
    color: var(--p-acc);
    text-decoration: none;
}

a.paths__bridge-rel:hover { text-decoration: underline; }

.paths__bridge-arrow {
    color: var(--p-muted);
    font-size: 0.8rem;
}

.paths__bridge-meta {
    font-size: 0.75rem;
    color: var(--p-muted);
}

/* Vertical path rail */
.paths__path-num {
    font-weight: 700;
}

.paths__rail {
    list-style: none;
    margin: 0;
    padding: 0 0 0 0.15rem;
    position: relative;
}

.paths__rail-entity,
.paths__rail-link {
    display: grid;
    grid-template-columns: 1.1rem 1fr;
    gap: 0.55rem 0.7rem;
    align-items: start;
}

.paths__rail-entity {
    padding: 0.15rem 0 0.35rem;
}

.paths__rail-link {
    padding: 0.15rem 0 0.55rem;
}

.paths__rail-dot {
    width: 0.7rem;
    height: 0.7rem;
    margin-top: 0.35rem;
    border-radius: 50%;
    background: var(--p-acc);
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--p-acc);
    justify-self: center;
}

.paths__rail-entity--start .paths__rail-dot {
    background: #1d4e89;
    box-shadow: 0 0 0 1px #1d4e89;
}

.paths__rail-entity--end .paths__rail-dot {
    background: #0f6b4c;
    box-shadow: 0 0 0 1px #0f6b4c;
}

.paths__rail-stem {
    width: 2px;
    min-height: 2.2rem;
    margin: 0 auto;
    background: linear-gradient(180deg, #c5d0de, #a8b6c8);
    border-radius: 1px;
    align-self: stretch;
}

.paths__rail-body {
    min-width: 0;
    padding: 0.35rem 0.55rem;
    border: 1px solid var(--p-line);
    border-radius: 0.4rem;
    background: var(--p-surface);
}

.paths__rail-body--link {
    background: #fff;
    border-style: dashed;
}

.paths__rail-entity--start .paths__rail-body {
    border-color: #b6c6db;
    background: rgba(29, 78, 137, 0.06);
}

.paths__rail-entity--end .paths__rail-body {
    border-color: #a8cfc0;
    background: rgba(15, 107, 76, 0.06);
}

.paths__rail-role {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--p-muted);
    margin-bottom: 0.12rem;
}

.paths__rail-name {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--p-ink);
    text-decoration: none;
    margin-right: 0.3rem;
}

.paths__rail-name:hover { color: var(--p-acc); text-decoration: underline; }

.paths__rail-rel {
    font-weight: 650;
    color: var(--p-acc);
    text-decoration: none;
    font-size: 0.9rem;
}

.paths__rail-rel:hover { text-decoration: underline; }

.paths__rail-rolelabel {
    font-weight: 500;
    color: var(--p-muted);
}

.paths__rail-meta,
.paths__rail-period {
    display: block;
    margin: 0.2rem 0 0;
    font-size: 0.76rem;
    color: var(--p-muted);
}

.paths__rail-desc {
    margin: 0.35rem 0 0;
    font-size: 0.86rem;
    color: var(--p-ink);
    line-height: 1.4;
}

.paths__field { position: relative; }

@media (max-width: 520px) {
    .paths__form { padding: 0.85rem; }
    .paths__legend-name { max-width: 12rem; }
}