/* gitbar — граф ссылок. Токены берём из style.css, ничего не переопределяем. */

#graph {
  position: relative;
  /* граф не подчиняется контентной колонке (main: max-width 1180px) — иначе по бокам
     остаются мёртвые поля, за которыми ветки уезжают в невидимое */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* высота выставляется скриптом по фактическому низу шапки (она переносится на узких экранах);
     значение ниже — запасное на случай, если скрипт не отработал */
  height: calc(100vh - var(--head-h) - 34px);
  min-height: 320px;
  background: transparent;                 /* граф лежит прямо на фоне страницы, без панели */
  overflow: hidden;
  touch-action: none;
}
#graph[hidden] { display: none; }

.gr-svg { width: 100%; height: 100%; display: block; cursor: grab; }
.gr-svg.gr-grab { cursor: grabbing; }

.gr-link { stroke: var(--border-hi); stroke-width: 1.2; }

.gr-n { cursor: pointer; }
.gr-hit { fill: transparent; }
.gr-lbl {
  font-family: var(--sans);
  font-size: 11.5px;
  fill: var(--fg);
  pointer-events: none;
}
.gr-cnt {
  font-family: var(--mono);
  font-size: 9.5px;
  fill: var(--faint);
  pointer-events: none;
}
.gr-plate {
  fill: var(--row);
  stroke: var(--border-hi);
  stroke-width: 1;
}
.gr-root .gr-plate,
.gr-category .gr-plate { fill: var(--row-hi); stroke: rgba(63, 185, 80, .35); }
.gr-root .gr-lbl { font-family: var(--mono); fill: var(--accent); }
.gr-subgroup .gr-lbl { fill: var(--muted); font-size: 11px; }

.gr-n:hover .gr-plate { stroke: var(--accent); fill: var(--row-hi); }
.gr-n:hover .gr-lbl { fill: var(--accent-hi); }

.gr-dot { fill: #4a5058; stroke: #6a727c; stroke-width: 1; }
.gr-dot.gr-prod { fill: var(--accent); stroke: none; }
.gr-dot.gr-tested { fill: #7d8590; stroke: none; }
.gr-dot.gr-wish { fill: #4a5058; }
.gr-item .gr-lbl { fill: var(--muted); }
.gr-item:hover .gr-lbl { fill: var(--fg); }

.gr-more-t { fill: var(--faint); font-family: var(--mono); font-size: 10px; }
.gr-n.gr-more:hover .gr-more-t { fill: var(--accent); }

.gr-tools {
  position: absolute;
  right: 10px; bottom: 10px;
  display: flex; gap: 4px;
}
.gr-tools button {
  height: 26px; min-width: 26px; padding: 0 8px;
  border: 1px solid var(--border-hi);
  border-radius: 6px;
  background: var(--row);
  color: var(--muted);
  font: 500 12px/1 var(--sans);
  cursor: pointer;
}
.gr-tools button:hover { color: var(--accent); border-color: var(--accent); }

.gr-tip {
  position: absolute;
  max-width: 250px;
  padding: 7px 9px;
  border: 1px solid var(--border-hi);
  border-radius: 8px;
  background: var(--row-hi);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
  font: 400 11px/1.45 var(--sans);
  color: var(--muted);
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s;
}
.gr-tip.on { opacity: 1; }
.gr-tip b { display: block; color: var(--fg); font-weight: 600; font-size: 12px; }

#list[hidden] { display: none; }

/* в режиме графа нижний отступ списка не нужен: он бы вызвал вертикальный скролл,
   а вместе с ним — горизонтальный из-за 100vw */
body.graph-view main { padding-bottom: 12px; }
body.graph-view { overflow-x: hidden; }

#viewGraph {
  height: 26px; padding: 0 10px;
  border: 1px solid var(--border-hi);
  border-radius: 6px;
  background: var(--row);
  color: var(--muted);
  font: 500 12px/1 var(--sans);
  cursor: pointer;
}
#viewGraph:hover { color: var(--fg); border-color: var(--accent); }
#viewGraph.on { color: var(--accent); border-color: var(--accent); }

@media (max-width: 720px) {
  .gr-tools button { height: 30px; min-width: 30px; }
}