/* The graph enhances the existing form; the list remains available at all times. */
.relation-workbench { border: 1px solid #cfd8e5; border-radius: 7px; overflow: hidden; margin: 1.2rem 0; background: #fff; }
.relation-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--line); }
.relation-toolbar strong { font-size: .9rem; }
.relation-caption { display: block; font-size: .72rem; color: var(--muted); margin-top: .2rem; }
.relation-tools { display: flex; gap: .5rem; flex-wrap: wrap; }
.relation-tools button { font-size: .75rem; padding: .5rem .7rem; }
.relation-layout { display: grid; grid-template-columns: 215px minmax(0, 1fr) 210px; }
.relation-palette, .relation-inspector { padding: 1rem; min-width: 0; background: #fff; }
.relation-palette { border-right: 1px solid var(--line); }
.relation-inspector { border-left: 1px solid var(--line); }
.relation-layout h3 { font-size: .8rem; margin: 0 0 1rem; }
.relation-palette input { font-size: .75rem; padding: .6rem; border-color: var(--line); }
.relation-hint { color: var(--muted); font-size: .73rem; line-height: 1.65; }
.relation-palette-list { max-height: 400px; overflow: auto; margin: 0 -.25rem; padding: .25rem; }
.relation-palette-list summary { font-size: .7rem; font-weight: 650; padding: .8rem 0 .6rem; cursor: pointer; }
.relation-palette-card { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: .5rem; padding: .7rem; margin-bottom: .5rem; border: 1px solid var(--line); border-radius: 5px; background: #fff; cursor: grab; }
.relation-palette-card > div { min-width: 0; }
.relation-palette-card strong { display: block; font-size: .75rem; font-weight: 600; overflow-wrap: anywhere; }
.relation-palette-card small { display: block; color: var(--muted); font-size: .65rem; margin-top: .2rem; }
.relation-palette-card.is-linked { background: #f8faff; border-color: #c3d6ee; }
.relation-palette-add { grid-column: 2; padding: .2rem .3rem; min-height: 32px; color: var(--accent); font-size: .7rem; background: #eef4fc; text-align: left; }
.relation-type-icon { display: grid; place-items: center; flex-shrink: 0; width: 26px; height: 26px; border-radius: 5px; color: var(--node-color); background: var(--node-tint); font-size: 1.1rem; }
.kind-group { --node-color: #7551b8; --node-tint: #f1ebfc; }
.kind-item { --node-color: #157963; --node-tint: #e7f5f0; }
.kind-page { --node-color: #2269b5; --node-tint: #e9f2fe; }
.kind-article { --node-color: #9b610d; --node-tint: #fff3dc; }
.kind-group .relation-type-icon { border-radius: 9px 2px; }
.kind-article .relation-type-icon { border-radius: 50%; }
.relation-canvas-column { min-width: 0; background: #f8fafd; }
.relation-canvas-heading { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .7rem 1rem; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .7rem; }
.relation-grid-label { color: #68788e; }
.relation-viewport { position: relative; height: 430px; overflow: auto; background-color: #f8fafd; background-image: radial-gradient(#c9d4e4 .85px, transparent .85px); background-size: 24px 24px; cursor: grab; overscroll-behavior: contain; touch-action: pan-x pan-y; }
.relation-viewport:active { cursor: grabbing; }
.relation-viewport:focus-visible { outline-offset: -3px; }
.relation-stage { position: relative; min-width: 100%; min-height: 100%; }
.relation-edges { position: absolute; top: 0; left: 0; pointer-events: none; }
.relation-edge { fill: none; stroke: #9baec5; stroke-width: 1.7; }
.relation-edge.is-member { stroke: #719f95; stroke-width: 2.5; }
.relation-edge.is-invalid { stroke: #be3d4b; stroke-dasharray: 6 4; }
.relation-node { position: absolute; width: 240px; height: 96px; transform-origin: top left; display: flex; flex-direction: column; align-items: flex-start; padding: 11px 14px; border: 1px solid #d0d9e5; border-left: 4px solid var(--node-color); border-radius: 6px; background: #fff; color: var(--ink); box-shadow: 0 3px 8px #1e365412; text-align: left; cursor: grab; touch-action: none; user-select: none; }
.relation-node:hover { border-color: var(--node-color); filter: none !important; }
.relation-node.is-selected { outline: 2px solid #216ac5; outline-offset: 3px; box-shadow: 0 3px 12px #1765c125; }
.relation-node.is-invalid { border-color: #be3d4b; }
.relation-node.is-inactive { background: #f0f2f5; border-left-color: #7b8797; }
.relation-node:focus-visible { outline: 3px solid #b04c00; outline-offset: 3px; }
.relation-node-heading { display: flex; align-items: center; gap: .5rem; font-size: .63rem; color: var(--muted); font-weight: 500; }
.relation-node .relation-type-icon { width: 19px; height: 19px; font-size: .85rem; }
.relation-node strong { display: block; width: 100%; margin: 5px 0 3px; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 650; }
.relation-node small { font-size: .65rem; font-weight: 400; color: var(--muted); }
.relation-node.is-invalid small { color: #ae2a3b; }
.relation-output-port { position: absolute; z-index: 2; color: #fff; background: #1765c1; border: 2px solid #fff; border-radius: 50%; width: 18px; height: 18px; font-size: 8px; display: grid; place-items: center; cursor: crosshair; }
.is-zoomed-out .relation-node small { visibility: hidden; }
.relation-canvas-controls { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .6rem; padding: .6rem; min-height: 80px; border-top: 1px solid var(--line); background: #fff; }
.relation-zoom { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.relation-zoom button { padding: .3rem .6rem; font-size: .7rem; min-width: 36px; min-height: 36px; }
.relation-zoom output { color: var(--muted); min-width: 45px; font-size: .7rem; text-align: center; }
.relation-minimap { width: 110px; height: 66px; flex-shrink: 0; background: #f8fafd; border: 1px solid var(--line); border-radius: 4px; cursor: crosshair; }
.relation-minimap rect { fill: var(--node-color); opacity: .65; }
.relation-minimap rect.is-selected { opacity: 1; }
.relation-minimap .relation-minimap-window { fill: #1765c10c; stroke: #1765c1; stroke-width: 6; opacity: 1; }
.relation-inspector h4 { font-size: .95rem; overflow-wrap: anywhere; margin: .8rem 0; }
.relation-kind-badge { display: inline-block; background: var(--node-tint); color: var(--node-color); border: 1px solid currentColor; padding: .15rem .5rem; border-radius: 4px; font-size: .65rem; }
.relation-inspector dl { border-top: 1px solid var(--line); padding-top: .3rem; }
.relation-inspector dt { margin-top: .8rem; font-size: .65rem; }
.relation-inspector dd { font-size: .75rem; margin-top: .2rem; }
.relation-inspector label { font-size: .7rem; margin-top: 1rem; }
.relation-inspector input { font-size: .8rem; padding: .5rem; margin-top: .3rem; }
.relation-remove { color: #ac2f40; font-size: .75rem; margin-top: 1rem; width: 100%; }
.relation-statusbar { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 1rem; border-top: 1px solid var(--line); font-size: .65rem; color: var(--muted); }
.relation-statusbar > span:last-child { flex-shrink: 0; }
.relation-native { margin: 1rem 0; }
.relation-native > summary { padding: .75rem 0; font-size: .85rem; font-weight: 600; color: var(--accent); cursor: pointer; }
.is-drop-target { outline: 2px dashed var(--accent); outline-offset: -3px; background-color: #eaf3ff; }
@media (max-width: 1350px) {
  .relation-layout { grid-template-columns: 190px minmax(0, 1fr); }
  .relation-inspector { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); }
  .relation-inspector dl { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem; }
  .relation-inspector .relation-remove { width: auto; }
  .relation-inspector input { max-width: 360px; display: block; }
}
@media (max-width: 600px) {
  .relation-layout { grid-template-columns: minmax(0, 1fr); }
  .relation-palette { border-right: 0; border-bottom: 1px solid var(--line); }
  .relation-palette-list { max-height: 180px; }
  .relation-palette-card { grid-template-columns: 26px minmax(0, 1fr) auto; }
  .relation-palette-add { grid-column: 3; grid-row: 1; text-align: center; }
  .relation-viewport { height: 340px; } .relation-statusbar { flex-direction: column; gap: .3rem; }
  .relation-toolbar { padding: 1rem; } .relation-tools { width: 100%; }
}
@media print { .relation-workbench { display: none !important; } .relation-native > * { display: block !important; } }