/* Relationship workspace. SVG controls use the same CSS-mask mechanism as Oblique icons. */
.ob-detail-tabs-frame .ob-tabs { align-items: center; gap: var(--ob-space-md); overflow: visible; }
.ob-tab-list { display: flex; flex: 1; min-width: 0; overflow-x: auto; scroll-padding-inline: var(--ob-space-lg); scrollbar-width: none; } /* a focused tab scrolls clear of the end fade */
.ob-tab-list::-webkit-scrollbar { display: none; }
.ob-relations-toggle { flex: none; margin-left: auto; white-space: nowrap; }
.ob-detail-tabs-frame::after { display: none; } /* the toggle sits beside the list here; the shared end fade would cover it */
/* The shell grows with its status row; graph.js raises the minimum to the remaining viewport height so only the diagram window absorbs free space.
   It is its own container so the toolbar responds to the same width inline and inside the fullscreen dialog. */
.ob-graph-shell { display: flex; flex-direction: column; min-width: 0; min-height: var(--ob-graph-min-height); border: var(--ob-border-width-xs) solid var(--ob-color-border); background: var(--ob-color-bg); container: graph / inline-size; }
.ob-graph-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ob-space-xs); padding: var(--ob-space-compact) var(--ob-space-sm); border-bottom: var(--ob-border-width-xs) solid var(--ob-color-border); }
.ob-graph-toolbar .ob-button { min-width: var(--ob-graph-control-size); min-height: var(--ob-graph-control-size); }
.ob-graph-toolbar .ob-button[aria-pressed=true] { background: var(--ob-color-surface-hover); box-shadow: inset 0 0 0 var(--ob-border-width-xs) var(--ob-color-text-secondary); }
.ob-graph-toolbar .ob-button:focus-visible { box-shadow: var(--ob-focus-ring); }
/* Groups wrap as units on narrow shells: zoom, mode, pan pad; the fullscreen action keeps the row end. */
.ob-graph-toolbar-group { display: flex; flex: none; align-items: center; gap: var(--ob-space-xs); }
.ob-graph-toolbar .ob-graph-zoom { font-size: var(--ob-font-size-xs); padding: var(--ob-space-xs) var(--ob-space-sm); min-width: var(--ob-graph-zoom-min-width); }
.ob-graph-toolbar [data-action=graph-fullscreen] { margin-left: auto; }
.ob-graph { position: relative; flex: 1; min-height: var(--ob-graph-viewport-min-height); height: auto; border: 0; overflow: clip; background: var(--ob-color-bg); touch-action: pan-y pinch-zoom; cursor: grab; }
.ob-graph[data-mode=select] { cursor: default; }
.ob-graph.is-dragging, .ob-graph.is-dragging * { cursor: grabbing !important; }
.ob-graph-canvas { position: absolute; left: 0; top: 0; margin: 0; transform-origin: 0 0; }
.ob-graph-svg { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.ob-graph-line { fill: none; stroke: var(--ob-color-graphic); stroke-width: 1.5; }
.ob-graph-line.is-selected { stroke: var(--ob-color-text); stroke-width: 3; }
.ob-graph-hub { position: absolute; display: flex; flex-direction: column; align-items: center; text-align: center; }
.ob-graph-hub-orbit { display: flex; align-items: center; justify-content: center; flex: none; width: var(--ob-graph-hub-size); height: var(--ob-graph-hub-size); border-radius: 50%; background: var(--ob-color-graph-halo); }
.ob-graph-hub-circle { display: flex; align-items: center; justify-content: center; width: calc(var(--ob-graph-hub-size) - 2 * var(--ob-graph-halo)); height: calc(var(--ob-graph-hub-size) - 2 * var(--ob-graph-halo)); border-radius: 50%; background: var(--ob-color-text-secondary); color: var(--ob-color-text-inverse); }
.ob-graph-hub strong { margin-top: var(--ob-graph-label-gap); max-height: var(--ob-graph-label-height); font-size: var(--ob-font-size-md); line-height: var(--ob-line-height-tight); background: var(--ob-color-bg); max-width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.ob-graph-group { position: absolute; display: flex; flex-direction: column; align-items: center; }
.ob-graph-bubble { position: relative; display: flex; align-items: center; justify-content: center; flex: none; width: var(--ob-graph-bubble-size); height: var(--ob-graph-bubble-size); border-radius: 50%; background: var(--ob-color-surface); }
.ob-graph-bubble-inner { display: flex; align-items: center; justify-content: center; width: calc(100% - 2 * var(--ob-graph-halo)); height: calc(100% - 2 * var(--ob-graph-halo)); border: var(--ob-border-width-xs) solid var(--ob-color-border); border-radius: 50%; background: var(--ob-color-bg); }
.ob-graph-group h3 { flex: none; width: 100%; height: var(--ob-graph-label-height); margin: var(--ob-graph-label-gap) 0 0; font-size: var(--ob-font-size-sm); line-height: var(--ob-line-height-tight); text-align: center; background: var(--ob-color-bg); max-width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.ob-graph-count { position: absolute; top: 14.645%; left: 14.645%; transform: translate(-65%, -65%); display: flex; align-items: center; justify-content: center; min-width: var(--ob-space-lg); height: var(--ob-space-lg); padding-inline: var(--ob-space-xs); border-radius: var(--ob-radius-pill); background: var(--ob-color-text-tertiary); color: var(--ob-color-text-inverse); font-size: var(--ob-font-size-xs); font-weight: var(--ob-font-weight-semibold); }
/* Grid geometry is supplied by graph.js so all entries fit inside the circular boundary. */
.ob-graph-nodes { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: var(--ob-graph-node-gap); width: var(--ob-graph-grid-width); height: var(--ob-graph-grid-height); }
.ob-graph-node { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ob-space-2xs); width: var(--ob-graph-node-width); height: var(--ob-graph-node-height); padding: var(--ob-space-2xs); border: var(--ob-border-width-xs) solid transparent; border-radius: var(--ob-radius-lg); background: transparent; color: var(--ob-color-text); font: inherit; font-size: var(--ob-font-size-xs); line-height: var(--ob-line-height-xs); text-align: center; cursor: pointer; }
.ob-graph-node > .ob-icon { color: var(--ob-color-text-secondary); }
.ob-graph-node > span:last-child { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; width: 100%; min-width: 0; overflow: hidden; overflow-wrap: anywhere; hyphens: auto; } /* two label lines, then an ellipsis; the title carries the full name */
.ob-graph-node:hover { background: var(--ob-color-surface); }
.ob-graph-node.is-selected { border-color: var(--ob-color-text); background: var(--ob-color-surface-hover); }
.ob-graph-group-pager { display: flex; flex: none; align-items: center; justify-content: center; gap: var(--ob-space-xs); height: var(--ob-graph-pager-height); max-width: 100%; font-size: var(--ob-font-size-xs); line-height: var(--ob-line-height-xs); background: var(--ob-color-bg); }
.ob-graph-group-pager > span { margin-right: var(--ob-space-xs); }
.ob-graph-group-pager .ob-button { min-width: var(--ob-control-height-sm); min-height: var(--ob-control-height-sm); padding: var(--ob-space-xs); }
.ob-graph-canvas[data-narrow=true] .ob-graph-group-pager .ob-button { min-width: var(--ob-touch-target); min-height: var(--ob-touch-target); }
.ob-graph-pan-pad { gap: var(--ob-space-2xs); }
.ob-graph-pan-pad .ob-button { padding: var(--ob-space-xs); }
.ob-graph-pan-pad [data-action=graph-up] .ob-icon { transform: rotate(-90deg); }
.ob-graph-pan-pad [data-action=graph-down] .ob-icon { transform: rotate(90deg); }
.ob-graph-selection { display: flex; flex: none; align-items: center; flex-wrap: wrap; gap: var(--ob-space-sm) var(--ob-space-default); min-height: var(--ob-touch-target); padding: var(--ob-space-sm) var(--ob-space-md); border-top: var(--ob-border-width-xs) solid var(--ob-color-border); font-size: var(--ob-font-size-sm); line-height: var(--ob-line-height-tight); overflow-wrap: anywhere; }
.ob-graph-selection > div:first-child { display: flex; flex: 1 1 50%; min-width: 0; flex-direction: column; gap: var(--ob-space-2xs); } /* the entry keeps at least half the row for word wrapping; the actions wrap below it on phones */
.ob-graph-selection-actions { display: flex; flex: none; align-items: center; gap: var(--ob-space-default); margin-left: auto; }
.ob-graph-selection > span, .ob-graph-selection div span { color: var(--ob-color-text-tertiary); }
.ob-graph-selection a { display: inline-flex; flex: none; align-items: center; min-height: var(--ob-control-height); } /* the open-entry action shares the control target height */
.ob-graph-hint { flex: none; margin: 0; padding: 0 var(--ob-space-md) var(--ob-space-sm); font-size: var(--ob-font-size-xs); line-height: var(--ob-line-height-tight); color: var(--ob-color-text-tertiary); }
.ob-graph-fullscreen { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; color: var(--ob-color-text); }
.ob-graph-fullscreen .ob-graph-shell { width: 100%; height: 100%; min-height: 0; border: 0; overflow-y: auto; overscroll-behavior: contain; } /* graph.js clears its inline minimum while the dialog is open */
.ob-graph-fullscreen .ob-graph-toolbar { position: sticky; top: 0; z-index: 1; flex-shrink: 0; background: var(--ob-color-bg); }
.ob-graph-fullscreen .ob-graph { touch-action: none; }
.ob-graph-modal-open { overflow: hidden; }
@container workspace (max-width: 640px) {
  .ob-detail-tabs-frame .ob-tabs { flex-wrap: wrap; gap: var(--ob-space-xs); }
  .ob-tab-list { flex-basis: 100%; }
  /* The relationship toggle wraps inside the frame, so put the divider on
     the tab list itself, above the toggle. */
  .ob-detail-controls:has(.ob-relations-toggle) { border-bottom: 0; }
  .ob-detail-tabs-frame:has(.ob-relations-toggle) { margin-bottom: 0; }
  .ob-detail-tabs-frame:has(.ob-relations-toggle) .ob-tab-list { border-bottom: var(--ob-border-width-xs) solid var(--ob-color-border); }
  .ob-detail-tabs-frame:has(.ob-relations-toggle) .ob-tab { margin-bottom: calc(-1 * var(--ob-border-width-xs)); }
  .ob-relations-toggle { margin-bottom: calc(var(--ob-space-xs) + var(--ob-border-width-xs)); }
  /* The list spans the frame again, so the end fade returns for the tab row only (44px minus its divider). */
  .ob-detail-tabs-frame::after { display: block; bottom: auto; height: calc(var(--ob-touch-target) - var(--ob-border-width-xs)); }
}
/* Dividers separate the groups only where the toolbar is a single row, so none can open a wrapped row. */
@container graph (min-width: 641px) {
  .ob-graph-toolbar-group + .ob-graph-toolbar-group { margin-left: var(--ob-space-xs); padding-left: var(--ob-space-sm); border-left: var(--ob-border-width-xs) solid var(--ob-color-border); }
}
@media (forced-colors: active) {
  .ob-graph-toolbar .ob-button[aria-pressed=true] { outline: var(--ob-border-width-xs) solid Highlight; outline-offset: -1px; }
  .ob-graph-toolbar .ob-button:focus-visible { outline: var(--ob-focus-width) solid Highlight; outline-offset: var(--ob-border-width-sm); }
}
@media print {
  .ob-graph-shell, .ob-graph-fullscreen { display: none !important; }
  .ob-graph-modal-open { overflow: visible; }
}