.pg-graph {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
  overflow: hidden;
  isolation: isolate;
  touch-action: none;
  color: var(--pg-ink, #bdc9c9);
  background: var(--pg-bg, transparent);
  border-radius: var(--pg-radius, 4px);
  font: 13px/1.4 var(--pg-font, ui-sans-serif, system-ui, sans-serif);
}
.pg-graph *, .pg-graph *::before, .pg-graph *::after { box-sizing: border-box; }
.pg-graph .pg-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
  touch-action: none;
  cursor: grab;
}
.pg-graph .pg-canvas:focus-visible { outline: 2px solid var(--pg-focus, #df9978); outline-offset: -3px; }
.pg-graph .pg-labels { position: absolute; inset: 0; pointer-events: none; }
.pg-graph .pg-label {
  position: absolute;
  display: block;
  width: max-content;
  max-width: min(176px, calc(100% - 24px));
  min-height: 36px;
  padding: 5px 8px;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  appearance: none;
  color: var(--pg-label, var(--pg-ink, #bdc9c9));
  background: var(--pg-label-bg, #171d1bef);
  border: 1px solid var(--pg-label-border, transparent);
  border-radius: var(--pg-radius, 4px);
  font-family: var(--pg-font, ui-sans-serif, system-ui, sans-serif);
  font-size: max(11px, var(--pg-font-label, 12px));
  line-height: 1.35;
  text-align: left;
  text-wrap: balance;
  cursor: pointer;
}
.pg-graph .pg-label small {
  display: block;
  margin-top: 3px;
  color: var(--pg-label-muted, var(--pg-ink-dim, #7b8b85));
  font-family: var(--pg-font, ui-sans-serif, system-ui, sans-serif);
  font-size: max(11px, var(--pg-font-sub, 11px));
  line-height: 1.3;
}
.pg-graph .pg-label { transition: opacity 0.12s ease-out; }
.pg-graph .pg-label[data-quiet='true'] { opacity: 0; pointer-events: none; }
.pg-graph .pg-label[data-quiet='true']:focus-visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .pg-graph .pg-label { transition: none; } }
.pg-graph[data-reduced-motion='true'] .pg-label { transition: none; }
.pg-graph .pg-label:hover, .pg-graph .pg-label[data-selected='true'] { color: var(--pg-focus, #df9978); }
.pg-graph .pg-label:focus-visible { outline: 2px solid var(--pg-focus, #df9978); outline-offset: 3px; z-index: 2; }
.pg-graph .pg-label-feature {
  max-width: min(196px, calc(100% - 24px));
  border-color: var(--pg-local-cage);
  color: var(--pg-local-cage);
  padding: 6px 9px;
}
.pg-graph .pg-label-feature[data-status='prioritize'], .pg-graph .pg-label-feature[data-status='product'] { border-style: dashed; }
/* With Feature threads the border follows the threads' rule, which the engine sets: solid only once released. */
.pg-graph .pg-label-feature[data-line='dashed'] { border-style: dashed; }
.pg-graph .pg-label-feature[data-line='solid'] { border-style: solid; }
.pg-graph .pg-label-feature[data-status='prioritize'] small { color: var(--pg-status-prioritize, var(--pg-label-muted, #7b8b85)); }
.pg-graph .pg-label-feature[data-status='product'] small { color: var(--pg-status-product, var(--pg-label-muted, #7b8b85)); }
.pg-graph .pg-label-feature[data-status='technology'] small { color: var(--pg-status-technology, var(--pg-label-muted, #7b8b85)); }
.pg-graph .pg-label-feature[data-status='qa'] small { color: var(--pg-status-qa, var(--pg-label-muted, #7b8b85)); }
.pg-graph .pg-label-feature[data-status='released'] small { color: var(--pg-status-released, var(--pg-label-muted, #7b8b85)); }
.pg-graph .pg-message {
  position: absolute;
  inset: 50% 20px auto;
  transform: translateY(-50%);
  max-width: 340px;
  margin: 0 auto;
  color: var(--pg-ink-dim, #7b8b85);
  text-align: center;
  pointer-events: none;
}
.pg-graph .pg-color-probe { position: absolute; width: 1px; height: 1px; overflow: hidden; visibility: hidden; pointer-events: none; }
.pg-graph [hidden] { display: none !important; }
@media (pointer: coarse) { .pg-graph .pg-label { min-height: 44px; } }
@media (max-width: 480px) { .pg-graph .pg-label { max-width: 144px; } }
