/* PTTidy shared tidy-tree graph — used by org chart, project crew, teams, crew rollup */
.pth-canvas { position: relative; }
.pth-node { position: absolute; }
svg.pth-links { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
svg.pth-links path { fill: none; stroke: var(--bd, #c5cede); stroke-width: 1.5px; }
.pth-empty { padding: 24px; color: var(--ink-soft, #667); font-size: 13px; }

/* A scrollable stage wrapper a surface can drop the graph into. */
.pth-stage { overflow: auto; background: var(--bg2, #f6f7fb); border: 1px solid var(--bd, #e5e7eb); border-radius: 10px; padding: 10px; }

/* Generic person card for focused surfaces (org chart brings its own). */
.pth-card { display: flex; align-items: center; gap: 8px; background: var(--white, #fff); border: 1px solid var(--bd, #e5e7eb);
  border-radius: 10px; padding: 7px 9px; box-shadow: 0 1px 2px rgba(21, 32, 53, .06); border-left: 3px solid var(--accent, #4F46E5); cursor: pointer; }
.pth-card:hover { border-color: var(--accent, #4F46E5); }
.pth-card.leaf { border-left-color: var(--ok, #0e9f6e); }
.pth-card .pth-av { width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #fff; background: var(--accent, #4F46E5); }
.pth-card.leaf .pth-av { background: var(--ok, #0e9f6e); }
.pth-card .pth-who { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.pth-card .pth-n { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink, #111); }
.pth-card .pth-r { font-size: 10px; color: var(--ink-soft, #667); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Rows/Chart segmented toggle (shared with vmb-view-seg where present). */
.pth-toggle { display: inline-flex; border: 1px solid var(--bd, #e5e7eb); border-radius: 8px; overflow: hidden; }
.pth-toggle button { font: inherit; font-size: 12px; font-weight: 600; padding: 5px 10px; border: 0; background: var(--white, #fff); color: var(--ink-soft, #667); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.pth-toggle button.on { background: var(--accent, #4F46E5); color: #fff; }