/* Keep the same relationships readable when a 3D overview cannot fit. */
.graph-node-picker { display:grid; gap:8px; margin:18px 22px 0; color:var(--muted); font-size:.875rem; }
.graph-node-picker select { width:100%; min-width:0; min-height:48px; font-size:1rem; }
.graph-paging { display:flex; justify-content:center; align-items:center; gap:14px; padding:0 16px 12px; font-size:.875rem; }
.graph-paging button { display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; border:1px solid var(--line); border-radius:6px; background:var(--panel); }
.graph-paging .icon { width:18px; height:18px; }
.graph-shell canvas[data-atlas-graph] { touch-action:pan-y pinch-zoom; }
.graph-shell[data-graph-layout="connections"] canvas[data-atlas-graph] { height:382px; min-height:382px; cursor:pointer; }
.graph-shell[data-graph-layout="connections"] .graph-controls { flex-wrap:wrap; }
.graph-shell[data-graph-layout="connections"] .graph-filters { flex:1 1 100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.graph-shell[data-graph-layout="connections"] .graph-controls button { min-height:44px; font-size:.875rem; }
.graph-shell[data-graph-layout="connections"] .graph-hint { font-size:.875rem; line-height:1.65; text-align:left; }
.graph-shell[data-graph-layout="connections"] .graph-selection { max-height:none; overflow:visible; font-size:.9375rem; }
.graph-shell[data-graph-layout="connections"] #graph-selection .graph-selected-title { font-size:1rem; font-weight:600; }
.graph-shell[data-graph-layout="connections"] .graph-selection-open { display:inline-flex; align-items:center; min-height:44px; }
.graph-shell[data-graph-layout="connections"] .graph-relations { padding:0; list-style:none; }
.graph-shell[data-graph-layout="connections"] #graph-selection .graph-relations li { display:block; padding:10px 0; border-top:1px solid var(--line); overflow-wrap:anywhere; }
.graph-shell[data-graph-layout="connections"] #graph-selection .graph-relation-label { display:block; color:var(--muted); font-size:.8125rem; opacity:1; }
.graph-shell[data-graph-layout="connections"] .graph-relations a { display:inline-flex; align-items:center; min-height:44px; }
.graph-shell[data-graph-layout="connections"] .graph-selection summary { min-height:44px; padding:12px 0; }
@media(max-width:500px) { .graph-node-picker { margin-inline:15px; } }