/* L8-specific styles on top of shared/custom.css and L7/custom.css. */

/* 3-up grid for d-separation rule cards (slide 5). */
.reveal .dsep-rules {
  display: flex;
  gap: 1em;
  justify-content: center;
  margin: 0.4em 0;
}
.reveal .dsep-rules .dsep-card {
  flex: 1;
  text-align: center;
  padding: 0.7em 0.5em;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-top: 4px solid #1d4ed8;
  border-radius: 6px;
}
.reveal .dsep-rules .dsep-card h3 {
  font-size: 0.85em;
  color: #1d4ed8;
  margin: 0 0 0.3em 0;
}
.reveal .dsep-rules .dsep-card .blocking {
  font-size: 0.7em;
  color: #374151;
  margin: 0.3em 0 0;
  line-height: 1.4;
}
.reveal .dsep-rules .dsep-card .blocking .green { color: #166534; font-weight: 600; }
.reveal .dsep-rules .dsep-card .blocking .red   { color: #991b1b; font-weight: 600; }
.reveal .dsep-rules .dsep-card svg {
  max-width: 100%;
  max-height: 90px;
  width: auto;
  height: auto;
}

/* Diagnostic-symptoms DAG (slides 6-8). */
.reveal .dsep-graph svg {
  max-height: 240px;
  width: auto;
}
.reveal .dsep-graph .edge-path     { stroke: #dc2626; stroke-width: 2.5; }
.reveal .dsep-graph .node-observed circle,
.reveal .dsep-graph .node-observed ellipse,
.reveal .dsep-graph .node-observed rect { fill: #d1d5db; stroke: #374151; }
.reveal .dsep-graph rect { fill: #fff; stroke: #111827; stroke-width: 1.5; rx: 3; ry: 3; }

/* "Set: { ... }" caption labels for construction examples. */
.reveal .construction-step {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.8em;
  color: #6b7280;
  text-align: center;
  margin: 0.3em 0;
}
.reveal .construction-step .set-label {
  color: #1d4ed8;
  font-weight: 700;
}

/* Spurious-correlation chart for slide 17. */
.reveal .spurious-chart { display: block; margin: 0.3em auto; max-height: 220px; }
.reveal .spurious-chart .axis      { stroke: #9ca3af; stroke-width: 1; }
.reveal .spurious-chart .curve-a   { stroke: #1d4ed8; stroke-width: 2.5; fill: none; }
.reveal .spurious-chart .curve-b   { stroke: #dc2626; stroke-width: 2.5; fill: none; stroke-dasharray: 5 3; }
.reveal .spurious-chart .axis-label { font-size: 11px; fill: #6b7280; }

/* Construction-example BN container - tighter sizing. */
.reveal .construction-bn svg {
  max-width: 100%;
  max-height: 180px;
  width: auto;
  height: auto;
}

/* Centered original BN reminder at top of construction-example slides. */
.reveal .original-bn-mini {
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 0.4em 0.6em;
  margin: 0.3em auto;
  text-align: center;
  font-size: 0.78em;
  max-width: 60%;
}
.reveal .original-bn-mini svg {
  max-height: 60px;
  width: auto;
  vertical-align: middle;
}

/* do-operator graph-surgery pair (slide 19). */
.reveal .do-surgery-pair {
  display: flex;
  gap: 1.4em;
  justify-content: center;
  align-items: center;
  margin: 0.5em 0;
}
.reveal .do-surgery-pair > div { text-align: center; }
.reveal .do-surgery-pair svg { max-height: 130px; width: auto; }
.reveal .do-surgery-pair .panel-label {
  font-size: 0.8em;
  font-weight: 700;
  margin-bottom: 0.2em;
}
.reveal .do-surgery-pair .panel-label.observe { color: #1d4ed8; }
.reveal .do-surgery-pair .panel-label.do      { color: #b91c1c; }
.reveal .do-surgery-pair .severed-edge {
  stroke: #dc2626;
  stroke-width: 2;
  stroke-dasharray: 5 3;
  fill: none;
}
.reveal .do-surgery-pair .scissors {
  fill: #dc2626;
  font-size: 16px;
  font-weight: 700;
}