/* The CHAPTERS view of the Translation Explorer (static/js/explorer-chapters.js). Sits over the
   explorer-content frame like the other views, on the figure ground. --dim and --line come from
   bench.css; the fallbacks keep it readable without it. */

/* over #graph-view rather than replacing it, so cytoscape keeps its size underneath */
#chapters-view {
  position: absolute; inset: 0; z-index: 15;
  display: none; flex-direction: column;
  background: var(--ground);
  font-family: var(--font-mono);
  color: var(--ink);
}
#chapters-view.active { display: flex; }

/* the explorer's "drag nodes" hint is about the graph; this view carries its own readout */
.explorer:has(#chapters-view.active) .graph-hint { display: none; }

.ch-stage { position: relative; flex: 1 1 auto; min-height: 0; overflow-x: auto; overflow-y: hidden; }
.ch-stage canvas { display: block; touch-action: pan-x pan-y; }

.ch-readout {
  flex: none; margin: 0;
  padding: var(--sp-2) var(--sp-3);
  border-top: 1px solid var(--line, color-mix(in srgb, var(--ink) 20%, transparent));
  background: var(--paper);
  font-size: 10.5px; line-height: 1.5; color: var(--dim, var(--ink));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ch-readout b { color: var(--ink); font-weight: 600; }

/* tooltip: paper, 2px ink border, mono 12px with a bold first line, flat (spec §3) */
.ch-tip {
  position: absolute; z-index: 5; pointer-events: none;
  max-width: 300px; padding: var(--sp-2) var(--sp-3);
  background: var(--paper); border: 2px solid var(--ink);
  font-size: 12px; line-height: 1.4; color: var(--ink);
}
.ch-tip b { display: block; font-weight: 600; overflow-wrap: anywhere; }
.ch-tip[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  #chapters-view * { transition: none !important; animation: none !important; }
}