/* tree-diagram: styles only it uses, split out of site.css by scripts/split-css.mjs. */
.td-tool { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 980px) { .td-tool { grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); } }
.td-side, .td-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.td-side textarea { min-height: 300px; line-height: 1.55; tab-size: 2; }
.td-check { grid-column: 1 / -1; }
.td-stage { display: grid; place-items: center; min-height: 320px; padding: 12px; border-radius: 12px; background: var(--mist); overflow: auto; }
.td-tool.is-transparent .td-stage { background: repeating-conic-gradient(#E3E7EE 0 25%, #fff 0 50%) 0 0 / 18px 18px; }
.td-stage svg { display: block; width: 100%; height: auto; max-height: 72vh; border-radius: 6px; box-shadow: var(--shadow-1); }
.td-stage [data-line] { cursor: pointer; }
.td-stage [data-line]:hover { opacity: 0.85; }
.td-empty { margin: 0; color: var(--slate); }
.pv-wrap.is-full .td-stage svg { max-height: none; height: 100%; }