/* Root */
.rel-dia { --bg:#fff; --line:#d1d9e0; --radius:14px;
    --blue:#147ad6; --blue-soft:#d9ebff;
    --green:#22a76a; --green-soft:#dff5ea;
    --yellow:#f0b429; --yellow-soft:#fff2d9;
    color:#0f172a;
}

.rel-dia__notice{
    display:flex; gap:10px; align-items:flex-start;
    background:#eaf3ff; border:1px solid #cfe3ff; border-radius:10px;
    padding:10px 12px; font-size:14px; margin-bottom:12px;
}
.rel-dia__notice .i{
    display:inline-grid; place-items:center; width:18px; height:18px;
    border-radius:999px; background:#147ad6; color:#fff; font-weight:700;
}

/* Canvas */
.rel-dia__canvas{
    position:relative; background:#fff; border:1px solid var(--line);
    border-radius:16px; padding:28px; min-height:420px;
    overflow:hidden;
}

/* Stĺpce */
.rel-col{ position:relative; z-index:2; }
.rel-col--left{ position:absolute; left:24px; top:24px; bottom:24px; width:30%; display:flex; flex-direction:column; justify-content: center; gap: 10px; }
.rel-col--center{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3; }
.rel-col--right{ position:absolute; right:24px; top:24px; bottom:24px; width:30%; display:flex; flex-direction:column; justify-content: center; }

.rel-group{ position:relative; min-height:48px; }
.rel-group + .rel-group{ margin-top:22px; }

/* Stred */
.rel-center{
    background:var(--blue); color:#fff; border-radius:999px;
    padding:12px 20px; font-weight:700;
    /*box-shadow:0 1px 2px rgba(0,0,0,.08);*/
    max-width: 300px;
    white-space: normal;
    text-align: center;
}
.rel-center a{ color:#fff !important; text-decoration:none; }

/* Piluly – budú vertikálne vyrovnané JS-om (translateY), bez prekryvov */
.rel-pill{
    position:relative;
    max-width: 95%;
    border-radius:999px; padding:12px 18px;
    /*box-shadow: inset 0 0 0 1px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.05);*/
    font-size:14px; line-height:1.3;
    will-change: transform;
    text-align: center;
}
.rel-pill a{ text-decoration:none; }
.rel-pill--related{ background:var(--blue-soft); color:#0f355a; }
.rel-pill--related a{ color:#0f355a; }
.rel-pill--follow{ background:var(--green-soft); color:#0f3a26; }
.rel-pill--follow a{ color:#0f3a26; }
.rel-pill--impl{ background:var(--yellow-soft); color:#5a4100; }
.rel-pill--impl a{ color:#5a4100; }

/* SVG konektory */
.rel-svg{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.rel-path{ fill:none; stroke:#c7ced6; stroke-width:2; }

/* Legenda */
.rel-legend{ display:flex; gap:32px; align-items:center; font-weight:600; margin-top:24px; flex-wrap:wrap; }
.key{ width:16px; height:16px; border-radius:999px; display:inline-block; margin-right:8px; border:1px solid rgba(0,0,0,.08); }
.key--main{ background:var(--blue); }
.key--related{ background:var(--blue-soft); }
.key--follow{ background:var(--green-soft); }
.key--impl{ background:var(--yellow-soft); }

/* Responsívny režim – vertikálny layout, žiadne čiary, nič sa neprekrýva */
@media (max-width: 900px){
    .rel-dia__canvas{ padding:16px; }
    .rel-col--left, .rel-col--right, .rel-col--center{ position:static; width:auto; transform:none; }
    .rel-col--right{ display:block; }
    .rel-group{ margin-top:12px; }
    .rel-center{ display:block; text-align:center; margin:8px auto 16px; white-space:normal; }
    .rel-pill{ max-width:100%; }
    .rel-svg{ display:none; } /* na mobile bez čiar pre čistotu */
}