/* Last modified: 2026-06-03 23:25 IST — SmartArt-style lesson diagrams */

.apj-tutor-lesson .apj-diagram {
  margin: 1.25rem 0 1.5rem;
  padding: 0.75rem 0.5rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow-x: hidden;
  overflow-y: visible;
}

.apj-tutor-lesson .apj-diagram-caption {
  margin: 0.5rem 0.25rem 0;
  font-size: 0.88rem;
  color: #475569;
  text-align: center;
  font-style: italic;
}

.apj-tutor-lesson .apj-diagram--fit .apj-diagram-svg {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.apj-tutor-lesson .apj-chart-wrap {
  position: relative;
  height: 280px;
  max-width: 680px;
  margin: 0 auto;
}

/* SVG typography */
.apj-tutor-lesson .apj-th {
  font: 500 13px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif;
  fill: #1e293b;
}

.apj-tutor-lesson .apj-ts {
  font: 400 11px/1.35 system-ui, -apple-system, "Segoe UI", sans-serif;
  fill: #475569;
}

.apj-tutor-lesson .apj-muted {
  fill: #64748b;
}

.apj-tutor-lesson .apj-tn {
  font: 400 9px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif;
  fill: #64748b;
}

.apj-tutor-lesson .apj-diagram-svg text {
  pointer-events: none;
}

/* Boxes and fills — !important beats theme SVG resets (black rects) */
.apj-tutor-lesson .apj-diagram-svg .apj-box {
  stroke: #334155;
  stroke-width: 0.75;
}

.apj-tutor-lesson .apj-diagram-svg .apj-c-gray {
  fill: #f1f5f9 !important;
}

.apj-tutor-lesson .apj-diagram-svg .apj-c-blue,
.apj-tutor-lesson .apj-diagram-svg .apj-chain-marker {
  fill: #dbeafe !important;
}

.apj-tutor-lesson .apj-diagram-svg .apj-panel-schem {
  fill: #f1f5f9 !important;
}

.apj-tutor-lesson .apj-c-teal {
  fill: #ccfbf1;
}

.apj-tutor-lesson .apj-c-amber {
  fill: #fef3c7;
}

.apj-tutor-lesson .apj-c-green {
  fill: #dcfce7;
}

.apj-tutor-lesson .apj-c-gray {
  fill: #f1f5f9;
}

.apj-tutor-lesson .apj-fill-blue {
  fill: #93c5fd !important;
  stroke: #2563eb;
  stroke-width: 0.5;
}

.apj-tutor-lesson .apj-fill-teal {
  fill: #5eead4 !important;
  stroke: #0d9488;
  stroke-width: 0.5;
}

.apj-tutor-lesson .apj-fill-amber {
  fill: #fcd34d !important;
  stroke: #b45309;
  stroke-width: 0.5;
}

.apj-tutor-lesson .apj-diagram-svg .apj-th,
.apj-tutor-lesson .apj-diagram-svg .apj-ts {
  fill: #1e293b !important;
}

.apj-tutor-lesson .apj-diagram-svg .apj-ts.apj-muted {
  fill: #64748b !important;
}

.apj-tutor-lesson .apj-line {
  stroke: #64748b;
  stroke-width: 1;
  fill: none;
}

.apj-tutor-lesson .apj-line-thick {
  stroke: #1e3a5f;
  stroke-width: 2;
  fill: none;
}

.apj-tutor-lesson .apj-dim {
  stroke: #b45309;
  stroke-width: 1;
  stroke-dasharray: 4 3;
}

.apj-tutor-lesson .apj-arr-head {
  fill: #64748b;
}