/* ── Diagram layer ──────────────────────────────────────────────────────────
   Reusable coded-diagram styles for the case studies. SVG only, no script.
   Uses the universal design tokens from main.css so every diagram stays
   on-brand. First use: TouchConfig "Why the rebuild, not a patch" fork. */

.tcd2 {
  margin: 30px 0 8px;
  padding: 28px 28px 24px;
  
}

.tcd2-cap {
  font-family: var(--mono);
  font-size: var(--text-10);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px;
}

.tcd2-svg { width: 100%; height: auto; display: block; }
.tcd2-svg text { font-family: var(--sans); }
.tcd2-svg .d-label { font-family: var(--mono); letter-spacing: 0.09em; }
.tcd2-svg .d-title { font-family: var(--serif); font-style: italic; font-weight: 500; }
.tcd2-svg .d-mono  { font-family: var(--mono); letter-spacing: 0.03em; }

.tcd2-svg .f-ink    { fill: var(--ink); }
.tcd2-svg .f-ink2   { fill: var(--ink-2); }
.tcd2-svg .f-ink3   { fill: var(--ink-3); }
.tcd2-svg .f-accent { fill: var(--accent); }
.tcd2-svg .f-gold   { fill: var(--highlight); }
.tcd2-svg .f-onface { fill: var(--dark-text); }

.tcd2-svg .box         { fill: #ffffff; stroke: var(--hairline); stroke-width: 1; }
.tcd2-svg .box-muted   { fill: rgba(96,120,140,0.07); stroke: var(--hairline-strong); stroke-width: 1; stroke-dasharray: 4 3; }
.tcd2-svg .box-accent  { fill: var(--accent-soft-solid); stroke: var(--accent-line); stroke-width: 1; filter: drop-shadow(3px 3px 0 rgba(35,91,150,0.10)); }
.tcd2-svg .box-dark    { fill: var(--dark); filter: drop-shadow(3px 3px 0 rgba(35,91,150,0.16)); }
.tcd2-svg .pill-muted  { fill: var(--hairline); }
.tcd2-svg .pill-accent { fill: var(--accent-soft-solid); stroke: var(--accent-line); stroke-width: 1; }
.tcd2-svg .branch        { fill: none; stroke: var(--hairline-strong); stroke-width: 1.25; stroke-dasharray: 4 3; }
.tcd2-svg .branch-accent { fill: none; stroke: var(--accent); stroke-width: 2; }

/* ── Additional diagram primitives (T1 convergence, T3 scale flow) ── */
.tcd2-svg .box-gold { fill: rgba(244,198,69,0.10); stroke: var(--highlight); stroke-width: 1; }
.tcd2-svg .conv-line { fill: none; stroke: var(--hairline-strong); stroke-width: 1.25; }
.tcd2-svg .conv-line-accent { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.tcd2-svg .flow-arrow { fill: var(--ink-3); }
.tcd2-svg .f-onface2 { fill: var(--dark-text-2); }
.tcd2-svg .f-warn { fill: #B8860B; }