* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }

/* Native workbench structural adapter v0.1; renderer geometry remains full-screen. */
#workspace { position: relative; isolation: isolate; width: 100%; height: 100vh; overflow: hidden; --workbench-edge-gap: 4px; }
#top-layer { position: absolute; inset: 0; z-index: 3; pointer-events: none; font-size: 32px; }
#sidebar-toggle {
  position: absolute; inset-block-start: 0; inset-inline-start: 0; pointer-events: auto;
  appearance: none; border: 0; background: transparent; padding: 0;
  margin-block-start: var(--workbench-edge-gap); margin-inline-start: var(--workbench-edge-gap);
  margin-block-end: 0; margin-inline-end: 0;
  color: inherit; font: inherit; cursor: pointer;
}
#sidebar-toggle[data-ink-measured] {
  inline-size: var(--toggle-ink-inline-size);
  block-size: var(--toggle-ink-block-size);
}
#sidebar-toggle > [data-glyph-canvas] {
  display: block;
  inline-size: 0;
  block-size: 0;
  pointer-events: none;
}
#sidebar-toggle[data-ink-measured] > [data-glyph-canvas] {
  inline-size: 100%;
  block-size: 100%;
}
#control-plane {
  position: absolute; inset-block: 0; inset-inline-start: 0; z-index: 2;
  width: clamp(320px, 28vw, 440px); min-width: 0;
  padding-block-start: var(--content-top, 0px); padding-inline: var(--workbench-edge-gap); padding-block-end: 2rem;
  overflow-x: hidden; overflow-y: scroll;
  background: Canvas; color: CanvasText;
}
#control-plane h1 { margin-block-start: 0; }
#data-plane { position: relative; width: 100%; height: 100vh; min-width: 0; z-index: 1; overflow: hidden; }
#workspace[data-sidebar="collapsed"] #control-plane { display: none; }
#graph { position: absolute; inset: 0; overflow: hidden; }
@media (max-width: 959px) {
  #control-plane { inset: 0; width: 100%; }
}
#graph-viewport {
  position: absolute; inset: 0; z-index: 1;
  overflow: hidden; touch-action: none;
  outline: 0;
}
#graph-surface {
  position: absolute; inset: 0; z-index: 1;
  display: block; width: 100%; height: 100%;
  border: 0; background: Canvas; color: CanvasText; border-color: GrayText;
  pointer-events: none;
}
#graph-scrollport {
  position: absolute; inset: 0; z-index: 2;
  overflow: scroll; scrollbar-width: none;
  touch-action: none;
}
#graph-scrollport::-webkit-scrollbar { width: 0; height: 0; }
#graph-scroll-space { position: relative; min-width: 100%; min-height: 100%; }
#graph-scene {
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  transform-origin: 0 0; pointer-events: none;
  contain: layout style;
}
#graph-nodes { position: absolute; inset: 0; pointer-events: none; }

.graph-node {
  position: absolute; display: block;
  appearance: none; padding: 0; background: transparent; border: 0;
  border-radius: 0; color: CanvasText;
  font: 700 14px/24px Arial, Helvetica, sans-serif;
  text-align: left; cursor: pointer; pointer-events: auto;
  overflow: visible;
}
.graph-node-copy {
  position: absolute; inset: 0;
  display: block; width: 100%; min-width: 0; padding: 12px;
}
.graph-node[data-has-image] .graph-node-copy {
  padding-block-start: 92px;
}
.graph-node:hover { z-index: 3; }
.graph-node:focus-visible { outline: 2px solid #ff5b3a; outline-offset: 2px; }
.graph-node.is-selected { outline: 0; z-index: 4; }
.graph-node.is-dimmed { opacity: .2; }
.graph-node-title {
  display: -webkit-box; width: 100%; overflow: hidden;
  overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
}
.graph-node[data-compact-title] .graph-node-title { font-size: .79rem; }
.graph-node-subtitle {
  display: -webkit-box; width: 100%; overflow: hidden; overflow-wrap: anywhere;
  color: GrayText; font: 10px/16px monospace;
  -webkit-box-orient: vertical; -webkit-line-clamp: 3;
}
.graph-node-year {
  display: table; max-width: 100%; margin-block-end: 8px; padding-inline: 8px;
  overflow: hidden; border: 1px solid transparent; font: 12px/18px monospace;
  text-overflow: ellipsis; white-space: nowrap;
}
.graph-node-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; width: 100%; }
.graph-node-field {
  min-width: 0; height: 20px; padding-inline: 6px; overflow: hidden;
  background: transparent; color: #fff;
  font: 700 9px/20px Arial, Helvetica, sans-serif;
  text-overflow: ellipsis; white-space: nowrap;
}
#graph-viewport[data-node-density="far"] :is(.graph-node-subtitle, .graph-node-year, .graph-node-fields) { visibility: hidden; }
#graph-viewport[data-node-density="mid"] .graph-node-subtitle { visibility: hidden; }

.timeline-top {
  position: absolute; inset-block-start: 0; inset-inline: 0; z-index: 4;
  background: transparent; color: CanvasText;
  pointer-events: none;
}
.timeline-ticks { position: relative; width: 100%; height: 100%; }
.timeline-top-item { position: absolute; inset-block: 0; width: 1px; }
.timeline-top-item b { position: absolute; inset-block-start: 14px; display: block; font: 600 24px/1 monospace; white-space: nowrap; }

.node-detail {
  position: absolute;
  z-index: 5;
  width: min(300px, calc(100vw - 24px));
  max-height: calc(100vh - 84px);
  overflow: auto;
  contain: paint;
  padding: 12px;
  border: 1px solid #000;
  border-top: 5px solid var(--field-color, #36c);
  border-radius: 0;
  background: #fff;
  color: #202122;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  line-height: 1.35;
  user-select: text;
}

.node-detail[data-state="preview"] { pointer-events: none; }
.node-detail[data-state="selected"] { pointer-events: auto; box-shadow: 0 0 0 2px #000; }

.node-detail h2 { margin: 0 0 .6rem; font-size: 16px; line-height: 1.15; }
.node-detail h3 { margin: .65rem 0 .25rem; font-size: 13px; }
.node-detail p { margin: 0; white-space: pre-wrap; }
.node-detail dl { display: grid; grid-template-columns: max-content 1fr; gap: .2rem .75rem; margin: 0; color: #54595d; }
.node-detail dt { font-weight: 700; }
.node-detail dd { margin: 0; overflow-wrap: anywhere; }
.node-detail ul { margin: 0 0 .6rem; padding-left: 1.25rem; }
.node-detail li { margin: .15rem 0; overflow-wrap: anywhere; }
.node-detail a { color: #36c; font-weight: 700; }
.node-detail a[hidden] { display: none; }
.node-detail [data-related-node] {
  padding: 0;
  border: 0;
  background: transparent;
  color: #36c;
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.node-detail a:focus-visible,
.node-detail [data-related-node]:focus-visible { outline: 2px solid #36c; outline-offset: 2px; }