/* ============================================================
 * Lesson diagrams — shared vocabulary for figure-style SVGs
 * (Parquet anatomy, lakehouse metadata, Lambda/Kappa, RTA flow)
 * ============================================================ */

.ld-fig {
  margin: 28px 0 32px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--paper);
  overflow: hidden;
}
.ld-fig-head {
  display: flex; align-items: baseline; gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
  font-family: var(--mono);
  font-size: 0.78rem;
  flex-wrap: wrap;
}
.ld-fig-num {
  color: var(--cyan-ink);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}
.ld-fig-title { color: var(--ink); font-weight: 600; }
.ld-fig-sub { color: var(--ink-3); margin-left: auto; }

.ld-fig-stage {
  padding: 22px;
  background:
    radial-gradient(ellipse 90% 70% at 50% 50%, var(--paper), oklch(0.95 0.008 240));
}

.ld-fig-cap {
  padding: 14px 18px;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 0.92rem;
  color: var(--ink-2);
  line-height: 1.55;
  background: var(--paper);
}
.ld-fig-cap b { color: var(--ink); font-weight: 600; }
.ld-fig-cap code {
  font-family: var(--mono); font-size: 0.85em;
  background: var(--paper-2); padding: 1px 5px; border-radius: 3px;
  border: 1px solid var(--rule);
}

.ld-svg { width: 100%; display: block; height: auto; }

/* ----- shared SVG primitives ----- */
.ld-svg .ld-card {
  fill: var(--paper);
  stroke: var(--rule-2);
  stroke-width: 1.2;
}
.ld-svg .ld-card-head {
  fill: var(--paper-2);
  stroke: none;
}
.ld-svg .ld-rule { stroke: var(--rule); stroke-width: 1; }
.ld-svg .ld-rule-2 { stroke: var(--rule-2); stroke-width: 1; }

.ld-svg text { font-family: var(--mono); fill: var(--ink); }
.ld-svg .ld-title { font-weight: 700; font-size: 14px; fill: var(--ink); }
.ld-svg .ld-sub   { font-size: 11px; fill: var(--ink-3); letter-spacing: 0.04em; }
.ld-svg .ld-label { font-size: 12px; fill: var(--ink-2); }
.ld-svg .ld-mini  { font-size: 10px; fill: var(--ink-3); }
.ld-svg .ld-tag   {
  font-family: var(--mono); font-size: 9.5px; font-weight: 700;
  fill: white; letter-spacing: 0.05em;
}

/* ----- Parquet anatomy specific ----- */
.ld-pq-magic { fill: var(--cyan-ink); }
.ld-pq-magic-text { fill: white; font-weight: 700; font-size: 11px; letter-spacing: 0.1em; }
.ld-pq-rg { fill: oklch(0.985 0.005 240); stroke: var(--rule-2); stroke-width: 1.2; }
.ld-pq-rg-head { fill: oklch(0.96 0.008 240); }
.ld-pq-col { fill: var(--paper); stroke: var(--rule-2); stroke-width: 1; }
.ld-pq-col-head { fill: oklch(0.94 0.025 215); }
.ld-pq-page { fill: oklch(0.92 0.04 215); stroke: var(--cyan-ink); stroke-width: 0.7; }
.ld-pq-page.alt { fill: oklch(0.95 0.025 215); }
.ld-pq-footer { fill: oklch(0.93 0.012 60); stroke: oklch(0.7 0.08 60); stroke-width: 1.2; }
.ld-pq-footer-head { fill: oklch(0.86 0.06 60); }
.ld-pq-anno {
  font-family: var(--mono); font-size: 10.5px;
  fill: var(--ink-2);
}
.ld-pq-anno-line {
  stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 3; fill: none;
}

/* ----- Lakehouse metadata specific ----- */
.ld-lh-layer-cat { fill: oklch(0.96 0.03 80); stroke: oklch(0.75 0.12 80); }
.ld-lh-layer-meta { fill: oklch(0.95 0.04 215); stroke: var(--cyan-ink); }
.ld-lh-layer-mfl { fill: oklch(0.96 0.04 270); stroke: oklch(0.55 0.15 270); }
.ld-lh-layer-mf { fill: oklch(0.96 0.05 145); stroke: oklch(0.5 0.13 145); }
.ld-lh-layer-data { fill: oklch(0.965 0.012 250); stroke: var(--rule-2); }
.ld-lh-arrow { stroke: var(--ink-3); stroke-width: 1.6; fill: none; }
.ld-lh-layer-label {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
}

/* ----- Lambda / Kappa specific ----- */
.ld-lk-track {
  fill: var(--paper);
  stroke: var(--rule-2);
  stroke-width: 1.2;
}
.ld-lk-batch  { stroke: oklch(0.6 0.13 60); }
.ld-lk-speed  { stroke: oklch(0.6 0.15 25); }
.ld-lk-stream { stroke: var(--cyan-ink); }
.ld-lk-node {
  fill: var(--paper); stroke-width: 1.5;
}
.ld-lk-node.batch  { stroke: oklch(0.6 0.13 60); }
.ld-lk-node.speed  { stroke: oklch(0.6 0.15 25); }
.ld-lk-node.stream { stroke: var(--cyan-ink); }
.ld-lk-pipe {
  fill: none; stroke-width: 2;
  marker-end: url(#ld-lk-arrow);
}
.ld-lk-pipe.batch  { stroke: oklch(0.6 0.13 60); }
.ld-lk-pipe.speed  { stroke: oklch(0.6 0.15 25); stroke-dasharray: 6 4; }
.ld-lk-pipe.stream { stroke: var(--cyan-ink); }
.ld-lk-track-label {
  font-family: var(--mono); font-size: 16px; font-weight: 700;
  letter-spacing: 0.06em;
}

/* ----- Real-time analytics flow specific ----- */
.ld-rta-stage {
  fill: var(--paper);
  stroke: var(--rule-2);
  stroke-width: 1.2;
}
.ld-rta-stage.src    { stroke: oklch(0.55 0.13 220); }
.ld-rta-stage.cdc    { stroke: oklch(0.55 0.13 60); }
.ld-rta-stage.bus    { stroke: oklch(0.5 0.15 270); }
.ld-rta-stage.proc   { stroke: oklch(0.5 0.15 25); }
.ld-rta-stage.lake   { stroke: oklch(0.45 0.13 145); }
.ld-rta-stage.serve  { stroke: oklch(0.5 0.13 215); }
.ld-rta-stage-head {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.ld-rta-arrow {
  fill: none; stroke: var(--ink-3); stroke-width: 1.8;
  marker-end: url(#ld-rta-arrow-h);
}
.ld-rta-arrow-label {
  font-family: var(--mono); font-size: 10.5px;
  fill: var(--ink-3); font-weight: 600; letter-spacing: 0.04em;
}