.issue-rel-backdrop {
    --rel-bg: #f6f8fb; --rel-surface: #fff; --rel-text: #182230; --rel-muted: #667085;
    --rel-border: #dce2ea; --rel-accent: #6941c6; --rel-soft: #f4f0ff;
    --rel-blocking: #bc433e; --rel-dependency: #3575ba; --rel-other: #748096;
    --rel-scheduling: #8357c5; --rel-hierarchy: #147d76;
    position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
    padding: 2vh 2vw; background: rgb(12 21 34 / 48%); color: var(--rel-text); backdrop-filter: blur(3px);
}
.issue-rel-dialog, .issue-rel-dialog * { box-sizing: border-box; }
.issue-rel-dialog {
    background: var(--rel-surface); border: 1px solid var(--rel-border); border-radius: 16px;
    box-shadow: 0 24px 80px rgb(10 24 42 / 28%); display: flex; flex-direction: column;
    width: min(1440px, 96vw); height: min(900px, 92dvh); min-height: min(440px, 96dvh);
    overflow: hidden; font-family: inherit; font-size: 14px;
}
.issue-rel-dialog.maximized { width: 100%; height: 96dvh; }
.issue-rel-header { display: flex; gap: 24px; justify-content: space-between; align-items: flex-start; padding: 20px 24px 16px; border-bottom: 1px solid var(--rel-border); flex: 0 0 auto; }
.issue-rel-heading { min-width: 0; }
.issue-rel-eyebrow { font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: .13em; color: var(--rel-muted); }
.issue-rel-heading h1 { font-size: 23px; letter-spacing: -.025em; line-height: 1.25; margin: 4px 0; color: var(--rel-text); }
.issue-rel-subtitle { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--rel-muted); font-size: 13px; }
.issue-rel-window-actions, .issue-rel-selection-actions, .issue-rel-depth, .issue-rel-zoom { display: flex; align-items: center; gap: 8px; }
.issue-rel-window-actions { flex: 0 0 auto; }
.issue-rel-icon-button, .issue-rel-button, .issue-rel-filters button {
    display: inline-flex; justify-content: center; align-items: center; gap: 7px; min-height: 34px;
    border: 1px solid var(--rel-border); border-radius: 7px; color: var(--rel-text); background: var(--rel-surface);
    cursor: pointer; font: inherit; font-size: 12px; font-weight: 650; white-space: nowrap; padding: 7px 11px;
}
.issue-rel-icon-button { padding: 6px; width: 34px; font-size: 20px; line-height: 1; }
.issue-rel-icon-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.issue-rel-dialog button:hover:not(:disabled) { background: var(--rel-soft); border-color: var(--rel-accent); }
.issue-rel-dialog button:focus-visible, .issue-rel-viewport:focus-visible { outline: 3px solid var(--rel-accent); outline-offset: 3px; }
.issue-rel-dialog button:disabled { opacity: .42; cursor: default; }
.issue-rel-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 24px; }
.issue-rel-filters { display: flex; flex-wrap: wrap; gap: 3px; padding: 3px; border-radius: 9px; background: var(--rel-bg); border: 1px solid var(--rel-border); }
.issue-rel-filters button { min-height: 30px; border-color: transparent; background: transparent; padding: 5px 10px; }
.issue-rel-filters button.active { background: var(--rel-surface); border-color: var(--rel-border); color: var(--rel-accent); box-shadow: 0 1px 4px rgb(16 24 40 / 7%); }
.issue-rel-depth > span { font-size: 12px; color: var(--rel-muted); padding-right: 3px; white-space: nowrap; }
.issue-rel-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 0 24px 12px; color: var(--rel-muted); font-size: 11px; }
.issue-rel-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.issue-rel-legend i { width: 18px; height: 0; border-top: 2px solid var(--rel-other); }
.issue-rel-legend i.blocking { border-color: var(--rel-blocking); }
.issue-rel-legend i.dependency { border-color: var(--rel-dependency); }
.issue-rel-legend i.scheduling { border-color: var(--rel-scheduling); }
.issue-rel-legend i.hierarchy { border-color: var(--rel-hierarchy); border-top-style: dotted; }
.issue-rel-legend i.other { border-top-style: dashed; }
.issue-rel-legend .issue-rel-hint { margin-left: auto; font-size: 11px; }
.issue-rel-notice { padding: 8px 24px; color: var(--rel-text); background: var(--rel-soft); border-top: 1px solid var(--rel-border); font-size: 12px; }
.issue-rel-viewport {
    position: relative; flex: 1 1 auto; min-height: 160px; overflow: auto; background-color: var(--rel-bg);
    background-image: radial-gradient(var(--rel-border) .9px, transparent .9px); background-size: 18px 18px;
    border-top: 1px solid var(--rel-border); border-bottom: 1px solid var(--rel-border); overscroll-behavior: contain;
}
.issue-rel-stage { position: relative; margin: 0 auto; }
.issue-rel-canvas { position: relative; transform-origin: top left; }
.issue-rel-lines { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.issue-rel-edge { --edge-color: var(--rel-other); }
.issue-rel-edge.blocking { --edge-color: var(--rel-blocking); }
.issue-rel-edge.dependency { --edge-color: var(--rel-dependency); }
.issue-rel-edge.scheduling { --edge-color: var(--rel-scheduling); }
.issue-rel-edge.hierarchy { --edge-color: var(--rel-hierarchy); }
.issue-rel-edge > path { fill: none; stroke: var(--edge-color); stroke-width: 1.8px; }
.issue-rel-edge.highlighted > path { stroke-width: 2.2px; }
.issue-rel-edge.muted { opacity: .5; }
.issue-rel-edge.other > path { stroke-dasharray: 5 5; }
.issue-rel-lines marker.blocking path { fill: var(--rel-blocking); }
.issue-rel-lines marker.dependency path { fill: var(--rel-dependency); }
.issue-rel-edge.hierarchy > path { stroke-dasharray: 2 4; }
.issue-rel-lines marker.scheduling path { fill: var(--rel-scheduling); }
.issue-rel-lines marker.hierarchy path { fill: var(--rel-hierarchy); }
.issue-rel-lines marker.other path { fill: var(--rel-other); }
.issue-rel-edge-label {
    margin: 0 auto; display: table; max-width: 182px; pointer-events: auto;
    border: 1px solid color-mix(in srgb, var(--edge-color) 32%, var(--rel-surface));
    color: var(--edge-color); background: var(--rel-surface); border-radius: 6px;
    padding: 4px 7px; font-size: 12px; font-weight: 700; text-align: center; line-height: 1.25; overflow-wrap: anywhere;
}
.issue-rel-node {
    position: absolute; display: flex; flex-direction: column; align-items: stretch; text-align: left;
    width: 224px; height: 96px; gap: 5px; padding: 9px 14px;
    border: 1px solid var(--rel-border); border-radius: 10px; background: var(--rel-surface);
    color: var(--rel-text); box-shadow: 0 3px 10px rgb(16 24 40 / 6%); font-family: inherit; cursor: pointer;
}
.issue-rel-node.focus-node { border: 2px solid var(--rel-accent); background: var(--rel-soft); padding: 8px 13px; }
.issue-rel-node.selected { outline: 3px solid color-mix(in srgb, var(--rel-accent) 22%, transparent); outline-offset: 3px; }
.issue-rel-node-top { line-height: 14px; display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 11px; }
.issue-rel-node-top strong { color: var(--rel-accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.issue-rel-focus-badge { line-height: 12px; font-size: 9px; color: var(--rel-accent); padding: 1px 5px; background: color-mix(in srgb, var(--rel-accent) 9%, var(--rel-surface)); border-radius: 4px; font-weight: 700; }
.issue-rel-node-title { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 14px; font-weight: 650; line-height: 1.35; overflow-wrap: anywhere; flex: 1; }
.issue-rel-node-status { line-height: 12px; align-self: flex-start; display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--rel-muted); font-size: 10px; font-weight: 600; }
.issue-rel-no-matches { position: absolute; left: 20px; top: 16px; border: 1px solid var(--rel-border); padding: 7px 12px; border-radius: 6px; background: var(--rel-surface); color: var(--rel-muted); font-size: 12px; }
.issue-rel-empty { padding: 36px; color: var(--rel-muted); }
.issue-rel-navigation { display: flex; align-items: center; justify-content: space-between; padding: 8px 24px; gap: 12px; }
.issue-rel-navigation > span { color: var(--rel-muted); font-size: 11px; }
.issue-rel-zoom { gap: 6px; }
.issue-rel-zoom > span { min-width: 42px; text-align: center; font-size: 11px; color: var(--rel-muted); font-variant-numeric: tabular-nums; }
.issue-rel-selection { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--rel-border); padding: 13px 24px; }
.issue-rel-selection > div:first-child { min-width: 0; display: grid; gap: 4px; }
.issue-rel-selection-key { color: var(--rel-accent); font-size: 11px; font-weight: 750; }
.issue-rel-selection-key span { color: var(--rel-muted); font-weight: 500; }
.issue-rel-selection strong { display: block; color: var(--rel-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.issue-rel-selection-actions { flex: 0 0 auto; }
.issue-rel-button.primary, .issue-rel-button.primary:hover:not(:disabled) { background: var(--rel-accent); border-color: var(--rel-accent); color: #fff; }
.issue-rel-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark) .issue-rel-backdrop {
    --rel-accent: #12836f; --rel-soft: #eaf8f1; --rel-bg: #f1f8f5; --rel-border: #c8dfd6;
}
:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .issue-rel-backdrop {
    --rel-bg: #101820; --rel-surface: #1d2935; --rel-text: #edf4f1; --rel-muted: #a9b7c4;
    --rel-border: #3b4a58; --rel-accent: #7be1c6; --rel-soft: #233e3b;
    --rel-blocking: #ff9b91; --rel-dependency: #8dbdff; --rel-other: #b6bed0;
    --rel-scheduling: #c6a4ff; --rel-hierarchy: #77d4c6; color-scheme: dark;
}
:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .issue-rel-button.primary { color: #102c26; }
@media (max-width: 1100px) {
    .kanban-issue-popup-header { flex-wrap: wrap; }
    .kanban-issue-popup-header-actions { flex-wrap: wrap; justify-content: flex-end; min-width: 0; max-width: 100%; }
    .kanban-issue-popup-identity { min-width: 0; }
    .kanban-issue-popup-identity > span { overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 820px) {
    .issue-rel-header { padding: 14px 16px; }
    .issue-rel-heading h1 { font-size: 20px; }
    .issue-rel-toolbar { padding: 10px 16px; gap: 9px; }
    .issue-rel-legend { padding: 0 16px 10px; gap: 10px; }
    .issue-rel-legend .issue-rel-hint { display: none; }
    .issue-rel-navigation, .issue-rel-selection { padding: 10px 16px; }
    .issue-rel-selection { flex-wrap: wrap; gap: 10px; }
    .issue-rel-selection > div:first-child { flex-basis: 100%; }
    .issue-rel-selection-actions { width: 100%; justify-content: flex-end; }
}
@media (max-width: 480px) {
    .issue-rel-backdrop { padding: 1vh 1vw; }
    .issue-rel-dialog, .issue-rel-dialog.maximized { width: 98vw; height: 98dvh; border-radius: 10px; }
    .issue-rel-header { padding: 12px; gap: 10px; }
    .issue-rel-heading h1 { font-size: 18px; }
    .issue-rel-eyebrow { font-size: 9px; }
    .issue-rel-subtitle { font-size: 11px; }
    .issue-rel-toolbar { padding: 8px 10px; }
    .issue-rel-filters { width: 100%; gap: 0; }
    .issue-rel-filters button { flex: 1; padding: 5px 6px; font-size: 10px; }
    .issue-rel-depth { flex-wrap: wrap; gap: 5px; }
    .issue-rel-depth .issue-rel-button { font-size: 10px; padding: 5px 8px; min-height: 30px; }
    .issue-rel-legend { padding: 0 12px 8px; font-size: 9px; gap: 10px; }
    .issue-rel-navigation { padding: 6px 10px; gap: 6px; }
    .issue-rel-navigation > span { font-size: 9px; }
    .issue-rel-zoom { gap: 2px; }
    .issue-rel-zoom .issue-rel-button { font-size: 10px; padding: 5px; }
    .issue-rel-selection { padding: 10px 12px; }
    .issue-rel-selection-actions .issue-rel-button { flex: 1; padding: 7px; font-size: 10px; }
}

@media (max-height: 560px) {
    .issue-rel-dialog { overflow-y: auto; }
    .issue-rel-viewport { flex: 0 0 230px; }
    .issue-rel-header, .issue-rel-toolbar, .issue-rel-legend, .issue-rel-navigation, .issue-rel-selection { flex-shrink: 0; }
}

.issue-rel-group {
    position: absolute;
    border: 1px dashed var(--rel-border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--rel-surface) 42%, transparent);
    pointer-events: none;
}
.issue-rel-group > span {
    position: absolute;
    left: 20px;
    top: 12px;
    color: var(--rel-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .015em;
}