/* ─── TDD cycle diagram ──────────────────────────────────────────────────── */
.tdd-cycle-wrap {
  margin-top: 1rem;
  display: flex;
  justify-content: center;
}
.tdd-cycle-svg {
  width: 100%;
  max-width: 380px;
  height: auto;
  display: block;
}

/* ─── TDD pyramid ────────────────────────────────────────────────────────── */
.tdd-pyramid-wrap {
  margin-top: 1rem;
  display: flex;
  justify-content: center;
}
.tdd-pyramid-svg {
  width: 100%;
  max-width: 420px;
  height: auto;
  display: block;
}

/* ─── Test doubles grid ──────────────────────────────────────────────────── */
.tdd-doubles-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 1.1rem;
}
.tdd-double-card {
  border-radius: 10px;
  border: 1.5px solid var(--border);
  padding: 0.85rem;
  background: var(--surface);
}
.tdd-double-card h4 {
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.4rem;
}
.tdd-double-card p {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 0.4rem;
}
.tdd-double-card code {
  display: block;
  font-size: 0.75rem;
  font-family: ui-monospace, monospace;
  color: #5c6370;
  background: var(--bg);
  border-radius: 5px;
  padding: 0.25rem 0.4rem;
}
.tdd-double-card--stub  h4 { color: #1d4ed8; }
.tdd-double-card--stub  { border-color: #93c5fd; }
.tdd-double-card--mock  h4 { color: #6d28d9; }
.tdd-double-card--mock  { border-color: #c4b5fd; }
.tdd-double-card--fake  h4 { color: #15803d; }
.tdd-double-card--fake  { border-color: #86efac; }
.tdd-double-card--spy   h4 { color: #92400e; }
.tdd-double-card--spy   { border-color: #fcd34d; }

/* ─── AAA code annotation ────────────────────────────────────────────────── */
.tdd-aaa-grid {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.1rem;
}
@media (min-width: 640px) {
  .tdd-aaa-grid { grid-template-columns: 1fr 1fr 1fr; }
}
.tdd-aaa-card {
  border-radius: 10px;
  border: 1.5px solid;
  padding: 0.85rem;
}
.tdd-aaa-card h4 {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.4rem;
}
.tdd-aaa-card p {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.tdd-aaa-card--arrange { border-color: #93c5fd; background: #eff6ff; }
.tdd-aaa-card--arrange h4 { color: #1d4ed8; }
.tdd-aaa-card--act     { border-color: #86efac; background: #f0fdf4; }
.tdd-aaa-card--act     h4 { color: #15803d; }
.tdd-aaa-card--assert  { border-color: #c4b5fd; background: #f5f3ff; }
.tdd-aaa-card--assert  h4 { color: #6d28d9; }