/* Entity graph component. Shared version of /lab/entity-graph/.
   Mount: <div class="eg" data-entity-graph data-eg-source="ELEMENT_ID"></div>
   The source element must contain a <code> block of JSON-LD. */
.eg { border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-md); overflow: hidden; margin-top: 1.1rem; }
.eg-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.85rem 1.15rem; border-bottom: 1px solid var(--border); background: var(--surface-alt); }
.eg-title { margin: 0; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; font-size: 0.76rem; letter-spacing: 0.09em; text-transform: uppercase; font-weight: 700; color: var(--text-soft); }
.eg-controls { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.eg-btn { font: inherit; font-size: 0.86rem; font-weight: 600; cursor: pointer; border-radius: 999px; padding: 0.5rem 1rem; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); transition: background-color .18s ease, color .18s ease, border-color .18s ease; }
.eg-btn:hover { border-color: var(--primary); color: var(--primary); }
.eg-btn.is-on { background: var(--primary); border-color: var(--primary); color: #fff; }
.eg-stage { display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: stretch; }
.eg-canvas-holder { position: relative; min-height: 520px; background:
  radial-gradient(circle at 22% 12%, rgba(91,33,182,.07), transparent 46%),
  radial-gradient(circle at 82% 88%, rgba(168,85,247,.06), transparent 44%), #fdfbf8; }
.eg-canvas-holder canvas { display: block; width: 100%; height: 100%; position: absolute; inset: 0; cursor: grab; touch-action: pan-y; }
.eg-canvas-holder canvas:active { cursor: grabbing; }
.eg-side { border-left: 1px solid var(--border); background: var(--surface); padding: 1.1rem; overflow-y: auto; max-height: 620px; }
.eg-side-empty { color: var(--text-soft); font-size: .9rem; margin: 0; }
.eg-node-type { font-family: ui-monospace, Menlo, monospace; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); background: var(--primary-soft); padding: .28rem .6rem; border-radius: 999px; display: inline-block; }
.eg-node-name { font-family: var(--font-display); font-size: 1.22rem; font-weight: 600; letter-spacing: -.015em; margin: .6rem 0 .15rem; line-height: 1.2; }
.eg-node-id { font-family: ui-monospace, Menlo, monospace; font-size: .71rem; color: var(--text-soft); word-break: break-all; margin: 0 0 .85rem; }
.eg-props { border-top: 1px solid var(--border); margin: 0; }
.eg-prop { display: grid; grid-template-columns: 110px minmax(0,1fr); gap: .5rem; padding: .52rem 0; border-bottom: 1px solid var(--border); font-size: .82rem; }
.eg-prop dt { font-family: ui-monospace, Menlo, monospace; font-size: .72rem; color: var(--text-soft); word-break: break-word; }
.eg-prop dd { margin: 0; word-break: break-word; }
.eg-prop dd a { color: var(--primary); }
.eg-edges { margin-top: 1rem; }
.eg-edges h4 { font-family: ui-monospace, Menlo, monospace; font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; color: var(--text-soft); margin: 0 0 .5rem; }
.eg-edge-btn { display: flex; width: 100%; align-items: center; gap: .5rem; text-align: left; font: inherit; font-size: .82rem; cursor: pointer; background: var(--surface-alt); border: 1px solid var(--border); border-radius: 8px; padding: .42rem .6rem; margin-bottom: .35rem; color: var(--text); }
.eg-edge-btn:hover { border-color: var(--primary); color: var(--primary); }
.eg-edge-rel { font-family: ui-monospace, Menlo, monospace; font-size: .68rem; color: var(--text-soft); }
.eg-legend { display: flex; flex-wrap: wrap; gap: .75rem; padding: .7rem 1.15rem; border-top: 1px solid var(--border); background: var(--surface-alt); font-size: .76rem; color: var(--text-soft); }
.eg-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.eg-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.eg-stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border-top: 1px solid var(--border); background: var(--surface); }
.eg-stat { padding: .8rem 1rem; border-right: 1px solid var(--border); }
.eg-stat:last-child { border-right: 0; }
.eg-stat b { display: block; font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; letter-spacing: -.02em; }
.eg-stat span { font-size: .72rem; color: var(--text-soft); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.eg-vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 900px) {
  .eg-stage { grid-template-columns: 1fr; }
  .eg-side { border-left: 0; border-top: 1px solid var(--border); max-height: none; }
  .eg-canvas-holder { min-height: 400px; }
}
@media (max-width: 640px) {
  .eg-head { padding: 0.75rem 0.9rem; }
  .eg-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .eg-stat:nth-child(2) { border-right: 0; }
  .eg-stat:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
}