/* BIO 202 DAG primitive — visual model builder.
   Self-contained styles; no dependency on the design system import. */

.dag-root {
  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  color: #1d1d1b;
}

.dag-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 900px) {
  .dag-row { grid-template-columns: 1fr; }
}

.dag-panel {
  background: #fff;
  border: 1px solid #e2e0d9;
  border-radius: 6px;
  padding: 12px;
}
.dag-panel h4 {
  margin: 0 0 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b6b68;
  font-weight: 600;
}

/* ---- DAG canvas (SVG) ---- */
.dag-svg-wrap {
  position: relative;
  background: #fafaf7;
  border: 1px solid #e2e0d9;
  border-radius: 6px;
  overflow: hidden;
}
.dag-svg { display: block; width: 100%; height: auto; cursor: default; }
.dag-svg.linking { cursor: crosshair; }

.dag-node-bg { fill: #fff; stroke: #6b6b68; stroke-width: 1.5; cursor: pointer; transition: fill 0.12s, stroke 0.12s; }
.dag-node-bg:hover { fill: #f4f0e6; }
.dag-node-bg.selected { stroke: #b23a48; stroke-width: 2.5; fill: #f9e6e9; }
.dag-node-bg.conditioned { stroke: #2f6b8f; stroke-width: 2.5; stroke-dasharray: 4 3; fill: #e6eef5; }
.dag-node-bg.categorical { fill: #f4ede0; stroke: #c28a2b; }
.dag-node-bg.categorical.selected { stroke: #b23a48; }

.dag-node-label {
  font: 600 12px -apple-system, sans-serif;
  fill: #1d1d1b;
  text-anchor: middle;
  pointer-events: none;
  user-select: none;
}
.dag-node-sublabel {
  font: 10px ui-monospace, Menlo, monospace;
  fill: #6b6b68;
  text-anchor: middle;
  pointer-events: none;
}

.dag-arrow { stroke: #1d1d1b; stroke-width: 1.6; fill: none; cursor: pointer; }
.dag-arrow:hover { stroke: #b23a48; stroke-width: 2.4; }
.dag-arrow.selected { stroke: #b23a48; stroke-width: 2.6; }
.dag-arrow.negative { stroke-dasharray: 5 3; }
.dag-arrow-head { fill: #1d1d1b; }
.dag-arrow.selected ~ .dag-arrow-head, .dag-arrow:hover ~ .dag-arrow-head { fill: #b23a48; }
.dag-arrow-strength-label {
  font: 600 10px ui-monospace, Menlo, monospace;
  fill: #b23a48;
  text-anchor: middle;
  pointer-events: none;
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 3;
}

.dag-link-preview { stroke: #b23a48; stroke-width: 1.5; stroke-dasharray: 3 3; fill: none; pointer-events: none; }

/* ---- Toolbar ---- */
.dag-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 10px;
  background: #f4f0e6;
  border-bottom: 1px solid #e2e0d9;
  font-size: 12.5px;
  color: #4a3a14;
}
.dag-toolbar button {
  background: #fff;
  border: 1px solid #c9c4b3;
  border-radius: 4px;
  padding: 4px 9px;
  cursor: pointer;
  font-size: 12.5px;
}
.dag-toolbar button:hover { background: #fffbef; }
.dag-toolbar button.active { background: #b23a48; color: #fff; border-color: #b23a48; }
.dag-toolbar button:disabled { opacity: 0.4; cursor: not-allowed; }
.dag-toolbar .spacer { flex: 1; }
.dag-toolbar .status { font-style: italic; color: #6b6b68; align-self: center; }

/* ---- Side panel: arrow/node properties ---- */
.dag-props { display: flex; flex-direction: column; gap: 12px; }
.dag-prop-row { display: grid; grid-template-columns: 110px 1fr 50px; align-items: center; gap: 8px; }
.dag-prop-row label { font-size: 13px; color: #4a4a48; }
.dag-prop-row output { font: 12px ui-monospace, Menlo, monospace; color: #b23a48; text-align: right; }
.dag-prop-row input[type=range] { width: 100%; }
.dag-prop-help { font-size: 12px; color: #6b6b68; line-height: 1.45; margin: 0; }
.dag-prop-help strong { color: #1d1d1b; }

/* ---- Scatter panel ---- */
.dag-scatter-wrap { background: #fff; }
.dag-scatter-canvas { display: block; width: 100%; height: auto; }
.dag-scatter-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 12.5px;
}
.dag-scatter-controls label { color: #4a4a48; }
.dag-scatter-controls select {
  font-size: 12.5px;
  padding: 2px 6px;
  border: 1px solid #c9c4b3;
  border-radius: 3px;
  background: #fff;
}
.dag-scatter-readout {
  font: 12px ui-monospace, Menlo, monospace;
  color: #1d1d1b;
  padding: 4px 8px;
  background: #f4f0e6;
  border-radius: 3px;
}
.dag-scatter-readout .big { font-size: 14px; color: #b23a48; font-weight: 600; }

/* ---- Inline hint ---- */
.dag-hint {
  background: #f4ede0;
  border-left: 3px solid #c28a2b;
  border-radius: 0 4px 4px 0;
  padding: 6px 10px;
  font-size: 12.5px;
  color: #4a3a14;
  margin: 0;
}