/* recite — the note map on /notes/graph. Owned by the graph module.
   Tokens come from app.css; nothing here redefines :root. */

.trc-graph {
  margin-bottom: var(--trc-s5);
}

/* ------------------------------------------------------------- controls */

.trc-graph-controls {
  display: flex;
  align-items: center;
  gap: var(--trc-s2);
  flex-wrap: wrap;
  margin-bottom: var(--trc-s2);
}

.trc-graph-search {
  min-width: 180px;
  max-width: 260px;
}

.trc-graph-focus {
  display: inline-flex;
  align-items: center;
  gap: var(--trc-s2);
  padding: 2px var(--trc-s2);
  border-radius: var(--trc-radius-sm);
  background: var(--trc-accent-soft);
  color: var(--trc-accent);
  font-size: var(--trc-fs-sm);
  font-weight: 600;
}

.trc-graph-focus[hidden] { display: none; }

/* ---------------------------------------------------------------- stage */

.trc-graph-stage {
  position: relative;
  height: clamp(340px, 62vh, 720px);
  border: var(--trc-border-w) solid var(--trc-border);
  border-radius: var(--trc-radius);
  background:
    radial-gradient(circle at 1px 1px, var(--trc-border) 1px, transparent 0) 0 0 / 22px 22px,
    var(--trc-surface);
  overflow: hidden;
  touch-action: none;      /* the stage owns pan and pinch, not the page */
}

.trc-graph-svg {
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
}

.trc-graph-svg.is-panning { cursor: grabbing; }

.trc-graph-nojs,
.trc-graph-none {
  position: absolute;
  inset: auto var(--trc-s4) auto var(--trc-s4);
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  text-align: center;
  font-size: var(--trc-fs-sm);
  color: var(--trc-text-2);
}

.trc-graph-none[hidden] { display: none; }

/* ----------------------------------------------------------------- edges */

.trc-graph-edge-line {
  stroke: var(--trc-border-hover);
  stroke-linecap: round;
  opacity: .75;
}

.trc-graph-edge-line.is-hidden { display: none; }

.trc-graph-arrowhead { fill: var(--trc-border-hover); }

/* ----------------------------------------------------------------- nodes */

.trc-graph-node {
  cursor: pointer;
}

.trc-graph-node.is-hidden { display: none; }

.trc-graph-halo {
  fill: none;
  stroke: transparent;
  stroke-width: 2;
}

.trc-graph-dot {
  fill: var(--trc-surface);
  stroke: var(--trc-text-3);
  stroke-width: 2;
  transition: stroke-width .12s ease;
}

.trc-graph-label {
  font-family: var(--trc-font);
  font-size: 11px;
  font-weight: 600;
  fill: var(--trc-text-2);
  paint-order: stroke;
  stroke: var(--trc-surface);
  stroke-width: 2.5px;
  stroke-linejoin: round;
  pointer-events: none;
  user-select: none;
}

/* One colour per law, assigned in first-seen order by graph.js. Six is enough
   for every code a reader is realistically holding at once; a seventh law
   wraps and shares a colour rather than inventing an unreadable one. */
.trc-graph-node[data-law-index="0"] .trc-graph-dot { stroke: #B92025; fill: #FFF1F1; }
.trc-graph-node[data-law-index="1"] .trc-graph-dot { stroke: #2025B9; fill: #E6E7F8; }
.trc-graph-node[data-law-index="2"] .trc-graph-dot { stroke: #007426; fill: #E0F2E7; }
.trc-graph-node[data-law-index="3"] .trc-graph-dot { stroke: #8A6100; fill: #FFF6DB; }
.trc-graph-node[data-law-index="4"] .trc-graph-dot { stroke: #6D28A8; fill: #EAE4F9; }
.trc-graph-node[data-law-index="5"] .trc-graph-dot { stroke: #A8005E; fill: #FBE4EF; }

.trc-graph-node:hover .trc-graph-dot,
.trc-graph-node:focus-visible .trc-graph-dot {
  stroke-width: 3.5;
}

.trc-graph-node:focus { outline: none; }

.trc-graph-node:focus-visible .trc-graph-halo {
  stroke: var(--trc-accent);
  stroke-width: 2.5;
}

.trc-graph-node.is-dragging .trc-graph-dot { stroke-width: 3.5; }

/* A selected node and everything it touches stay lit; the rest steps back so
   one provision's neighbourhood is readable inside a busy map. */
.trc-graph-node.is-selected .trc-graph-halo {
  stroke: var(--trc-accent);
  stroke-width: 2.5;
}

.trc-graph-node.is-selected .trc-graph-label { fill: var(--trc-text); }
.trc-graph-node.is-neighbour .trc-graph-label { fill: var(--trc-text); }

.trc-graph-nodes-layer:has(.is-selected) .trc-graph-node:not(.is-selected):not(.is-neighbour) {
  opacity: .35;
}

/* ------------------------------------------------------------ info panel */

.trc-graph-info {
  position: absolute;
  right: var(--trc-s3);
  bottom: var(--trc-s3);
  width: min(300px, calc(100% - var(--trc-s5)));
  max-height: calc(100% - var(--trc-s5));
  overflow-y: auto;
  padding: var(--trc-s3);
  border: var(--trc-border-w) solid var(--trc-border-strong);
  border-radius: var(--trc-radius);
  background: var(--trc-surface);
  box-shadow: var(--trc-shadow-pop);
  font-size: var(--trc-fs-md);
}

.trc-graph-info[hidden] { display: none; }

.trc-graph-info-head {
  display: flex;
  align-items: baseline;
  gap: var(--trc-s2);
  margin-bottom: var(--trc-s1);
}

.trc-graph-info-title {
  font-weight: 700;
  color: var(--trc-text);
  text-decoration: none;
}

.trc-graph-info-title:hover { text-decoration: underline; }

.trc-graph-info-close { margin-inline-start: auto; }

.trc-graph-info-line {
  display: flex;
  align-items: center;
  gap: var(--trc-s1);
  flex-wrap: wrap;
  margin: var(--trc-s2) 0 0;
}

.trc-graph-info-chip {
  padding: 1px 6px;
  border-radius: var(--trc-radius-sm);
  background: var(--trc-surface-sunk);
  color: var(--trc-text);
  font-size: var(--trc-fs-sm);
  text-decoration: none;
  white-space: nowrap;
}

.trc-graph-info-chip:hover {
  background: var(--trc-accent-soft);
  color: var(--trc-accent);
}

.trc-graph-info-actions {
  display: flex;
  gap: var(--trc-s2);
  margin-top: var(--trc-s3);
}

/* ------------------------------------------------- the same graph as words */

.trc-graph-list-head {
  font-size: var(--trc-fs-lg);
  font-weight: 600;
  margin: 0 0 var(--trc-s3);
}

.trc-graph-edges {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--trc-s3);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.trc-graph-edge {
  margin: 0;
}

.trc-graph-edge-head {
  display: flex;
  align-items: baseline;
  gap: var(--trc-s2);
  margin: 0 0 var(--trc-s2);
  font-size: var(--trc-fs-md);
  font-weight: 700;
}

.trc-graph-targets,
.trc-graph-loose-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--trc-s1);
}

.trc-graph-loose-list {
  margin-top: var(--trc-s2);
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--trc-s2);
}

.trc-graph-targets li,
.trc-graph-loose-list li {
  display: flex;
  align-items: baseline;
  gap: var(--trc-s1);
}

.trc-graph-arrow { color: var(--trc-text-3); }

.trc-graph-loose {
  margin-top: var(--trc-s3);
}

.trc-graph-loose summary {
  cursor: pointer;
  font-weight: 600;
}

@media (max-width: 560px) {
  .trc-graph-stage { height: clamp(300px, 56vh, 460px); }
  .trc-graph-info {
    left: var(--trc-s3);
    right: var(--trc-s3);
    width: auto;
  }
  .trc-graph-search { max-width: none; flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .trc-graph-dot { transition: none; }
}