/* Onboarding & Activation Deep Dive Styles */

:root {
  --dd-ob-primary: #0891b2;
  --dd-ob-secondary: #0369a1;
  --dd-ob-accent: #06b6d4;
  --dd-ob-bg: #ecf0f1;
  --dd-ob-border: #67e8f9;
  --dd-ob-text: #164e63;
  --dd-ob-muted: #475569;
  --dd-ob-node-bg: #ffffff;
  --dd-ob-node-border: #67e8f9;
  --dd-ob-connector: #22d3ee;
}

.dark {
  --dd-ob-primary: #06b6d4;
  --dd-ob-secondary: #0284c7;
  --dd-ob-accent: #67e8f9;
  --dd-ob-bg: #083344;
  --dd-ob-border: #0e7490;
  --dd-ob-text: #a5f3fc;
  --dd-ob-muted: #94a3b8;
  --dd-ob-node-bg: #1e293b;
  --dd-ob-node-border: #0e7490;
  --dd-ob-connector: #0891b2;
}

.dd-onboarding-activation {
  --dd-primary: var(--dd-ob-primary);
  --dd-secondary: var(--dd-ob-secondary);
  --dd-accent: var(--dd-ob-accent);
  --dd-bg: var(--dd-ob-bg);
  --dd-border: var(--dd-ob-border);
  --dd-text: var(--dd-ob-text);
  --dd-muted: var(--dd-ob-muted);
  --dd-node-bg: var(--dd-ob-node-bg);
  --dd-node-border: var(--dd-ob-node-border);
  --dd-connector: var(--dd-ob-connector);
}

.dd-ob-node-caption {
  font-size: 10px;
  fill: var(--dd-muted);
  text-anchor: middle;
}

.dd-ob-feedback-arrow {
  stroke: var(--dd-secondary);
  stroke-width: 2;
  fill: none;
  stroke-dasharray: 6 4;
}

.dd-ob-feedback-label {
  font-size: 11px;
  fill: var(--dd-secondary);
  font-weight: 700;
}

.dd-ob-aha { border-left: 4px solid #0891b2; }
.dd-ob-risk { border-left: 4px solid #f59e0b; }

.dd-ob-layer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.dd-ob-layer-box {
  border: 1.5px solid var(--dd-border);
  border-radius: 10px;
  padding: 10px;
  background: color-mix(in srgb, var(--dd-bg) 65%, white);
}

.dark .dd-ob-layer-box {
  background: color-mix(in srgb, var(--dd-bg) 55%, black);
}

.dd-ob-layer-box h5 {
  font-size: 12px;
  font-weight: 700;
  color: var(--dd-text);
  margin-bottom: 4px;
}

.dd-ob-layer-box p {
  font-size: 12px;
  color: var(--dd-body);
}

@media (max-width: 900px) {
  .dd-ob-layer-grid {
    grid-template-columns: 1fr;
  }
}