/* SVG styles shared by the three graph views. */

.graph {
  display: block;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.graph text { user-select: none; }

.panel { fill: #fff; }

.guide { stroke: #eef0f3; stroke-width: 1; }
.guide, .axis, .gutter, .chapter, .axis-label, .lane-label, .chapter-label,
.reading-thread, .axis-title {
  pointer-events: none;
}
.axis { stroke: #d9dde2; stroke-width: 1; }
.gutter { stroke: #d9dde2; stroke-width: 1; stroke-dasharray: 4 5; }
.chapter { stroke: #d5d9df; stroke-width: 1; stroke-dasharray: 3 4; }

.axis-title {
  fill: #9aa1ab;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.axis-label { fill: #9aa1ab; font-size: 9.5px; font-variant-numeric: tabular-nums; }
.lane-label { fill: #6f7782; font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; }
.chapter-label { fill: #949ba5; font-size: 10px; }

.node { cursor: pointer; }
.node circle, .node rect { transition: stroke-width 0.1s, opacity 0.1s; }

.node.active circle, .node.active rect {
  stroke: #14181d;
  stroke-width: 2.5;
}

.node.paragraph rect { opacity: 0.92; }
.node.paragraph:hover rect { opacity: 1; }
.node.paragraph.unlinked rect { opacity: 0.55; }

.node-label {
  fill: #4b5058;
  font-size: 9.5px;
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 3px;
  stroke-linejoin: round;
  pointer-events: none;
}

.node-count {
  fill: #a8aeb7;
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.node.untimed rect { fill: #f1f2f4; stroke: #d6dae0; }
.node.untimed:hover rect { fill: #e9ebee; }

.link { fill: none; stroke: #b9bfc7; stroke-width: 1.2; opacity: 0.55; }
.link:hover { stroke: #7d8794; opacity: 1; }
.link.active { stroke: #2c6491; stroke-width: 2; opacity: 1; }

.reading-thread {
  fill: none;
  stroke: #ccd2da;
  stroke-width: 1;
  stroke-dasharray: 2 3;
}

.thread {
  stroke-width: 1.2;
  opacity: 0.5;
  transition: opacity 0.1s;
}

.thread.active { stroke-width: 2.4; opacity: 0.95; }

.chapter-band.active rect { fill: #eaf1f7 !important; }

.focused .node:not(.active),
.focused .link:not(.active) {
  opacity: 0.4;
}

.focused .thread:not(.active) { opacity: 0.28; }
.focused .chapter-band:not(.active) { opacity: 0.6; }