/* Librarian research-map scene. Decorative SVG edges only: nodes and the
   central document are real HTML, so text stays selectable, zoomable, and
   keyboard operable. Edge geometry is tuned to the layout at each width:
   starts sit inside the document, ends beneath the opaque cards. */

.lib-scene {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--s4);
  align-items: center;
}

.lib-map {
  border: var(--rule) solid var(--scene-line);
  background: var(--scene-bg);
  border-radius: var(--radius);
}

.lib-canvas {
  position: relative;
  width: 100%;
  aspect-ratio: 32 / 23;
  min-height: 24rem;
}

/* Labels the map as the sources the user added, not automatic discovery. */
.lib-map-label {
  margin: 0;
  padding: var(--s2) var(--s2) 0;
  font-size: var(--fine);
  font-weight: 600;
  color: var(--scene-muted);
}

.lib-map-wide,
.lib-map-tall {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.lib-map-tall { display: none; }

/* Desktop canvas: corner anchors in a 640x460 box, expressed as percentages.
   Nodes are anchored at their top-left corners (no centering transform), so
   their boxes are height-independent. Edges run from the central document to
   points under the opaque cards: connection never depends on card height. */
.lib-self { left: 50%; top: 50%; }
.lib-node-method { left: 3.5%; top: 5%; }
.lib-node-evidence { left: 58.5%; top: 5%; }
.lib-node-different { left: 3.5%; top: 71%; }
.lib-node-context { left: 58.5%; top: 71%; }

.lib-self {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s1);
  width: 10rem;
  padding: var(--s3) var(--s2);
  border: var(--rule) solid var(--scene-selection-bg);
  border-radius: var(--radius);
  background: var(--scene-selection-bg);
  color: var(--scene-selection-ink);
  /* Center with transform, not translate: the shared scene press rule
     animates translate, which must stay free for motion. */
  transform: translate(-50%, -50%);
  font-size: var(--body-size);
  font-weight: 600;
}

.lib-self-name {
  color: inherit;
  line-height: 1.2;
}
.lib-document { width: var(--s3); height: var(--s4); }
.lib-self-topic { font-size: var(--fine); font-weight: 400; }

.lib-node {
  position: absolute;
  width: min(13rem, 28%);
  min-height: var(--control-size);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s0);
  padding: .65rem .8rem;
  background: var(--scene-sheet);
  color: var(--scene-ink);
  border: var(--rule) solid var(--scene-line);
  border-radius: var(--radius);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--fast) var(--ease);
}

.lib-node-name {
  font-size: var(--small);
  font-weight: 600;
  color: var(--scene-ink);
}

.lib-node-note {
  font-size: var(--fine);
  line-height: 1.5;
  color: var(--scene-muted);
}

.lib-node:hover { border-color: var(--scene-ink); }
/* Press motion comes from the shared scene press rule (translate);
   hover and selection carry the state change visually. */
.lib-node[disabled] { cursor: default; }

.lib-node[aria-pressed="true"] {
  border-color: var(--scene-accent);
  box-shadow: inset 0 0 0 1px var(--scene-accent);
}

.lib-node[aria-pressed="true"] .lib-node-name {
  text-decoration: underline;
  text-decoration-color: var(--scene-accent);
  text-underline-offset: .3em;
}

/* Selection reads from the accent border, underlined label, and the solid
   accent edge; text contrast never depends on selection state. */

.lib-node:focus-visible {
  outline: var(--focus-width) solid var(--scene-accent);
  outline-offset: var(--focus-offset);
}

/* Deliberate curves between fixed anchors; no force simulation, no drift.
   Edges use fill-box stroke bounds so pathLength=1 normalizes the dash
   pattern per path. */
.lib-edge {
  fill: none;
  stroke: var(--scene-line);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 0.04 0.016;
  stroke-dashoffset: 0;
}

.lib-edge.is-active {
  stroke: var(--scene-accent);
  stroke-width: 2.5;
  stroke-dasharray: none;
}

/* Exactly the selected edge reads as solid; dashed is the resting state. */
.lib-scene[data-selected="lib-method"] .lib-edge[data-mark="lib-method"],
.lib-scene[data-selected="lib-evidence"] .lib-edge[data-mark="lib-evidence"],
.lib-scene[data-selected="lib-different"] .lib-edge[data-mark="lib-different"],
.lib-scene[data-selected="lib-context"] .lib-edge[data-mark="lib-context"] {
  stroke-dasharray: none;
}

/* Rationale column: shared classes carry type and spacing. */
.lib-scene .scene-details {
  position: relative;
  display: grid;
}

.lib-panel { grid-area: 1 / 1; }

.lib-excerpt {
  margin-top: var(--s2);
  padding: var(--s2);
  border: var(--rule) solid var(--scene-line);
  background: var(--scene-sheet);
  font-family: var(--display);
  font-size: var(--body-large);
  line-height: 1.4;
  color: var(--scene-ink);
}

.lib-excerpt { transition: opacity var(--enter) var(--ease); }

.lib-caption {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--s2);
  border-top: var(--rule) solid var(--scene-line);
  padding-top: var(--s1);
}

.lib-caption .scene-kicker { flex-basis: auto; }

.lib-caption-name {
  font-family: var(--display);
  font-size: var(--body-large);
  color: var(--scene-ink);
}

/* Narrow widths: switch to the tall canvas and re-anchor the cards to the
   column layout the tall edges are drawn for; type sizes are untouched.
   Corner anchoring keeps cards inside the canvas and keeps the center
   column clear regardless of how far the two-line notes wrap. */
@media (max-width: 800px) {
  .lib-scene { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
}
@media (max-width: 560px) {
  .lib-canvas { aspect-ratio: 23 / 28; min-height: 25rem; }
  .lib-map-wide { display: none; }
  .lib-map-tall { display: block; }
  .lib-self { left: 50%; top: 50%; width: 9rem; padding-block: var(--s1); }
  .lib-node { width: 42%; }
  .lib-node-method { left: 4%; top: 5%; }
  .lib-node-evidence { left: 54%; top: 5%; }
  .lib-node-different { left: 4%; top: 72%; }
  .lib-node-context { left: 54%; top: 72%; }
}


@media (prefers-reduced-motion: reduce) {
  .lib-edge.is-active { animation: none; }
  .lib-excerpt { transition: none; }
}

@media (forced-colors: active) {
  .lib-node,
  .lib-self { border: var(--rule) solid CanvasText; }
  .lib-node[aria-pressed="true"] { outline: var(--focus-width) solid Highlight; outline-offset: calc(-1 * var(--focus-width)); }
  .lib-edge { stroke: CanvasText; }
  .lib-edge.is-active { stroke: Highlight; }
}